Glass Popover

Liquid glass context menu — frosted tinted panel with icon+label rows, hairline separators, keyboard navigation, and outside-click / Escape dismissal.

Playground

Edit the props live and copy the config.

Side

Tint

0.55

<Popover>
  <PopoverTrigger>Open popover</PopoverTrigger>
  <PopoverContent side="bottom" tint={0.55}>
    <PopoverItem>Profile</PopoverItem>
    <PopoverItem>Settings</PopoverItem>
    <PopoverSeparator />
    <PopoverItem>Sign out</PopoverItem>
  </PopoverContent>
</Popover>

Install

npx shadcn@latest add https://websiteglass.com/r/glass-popover.json

Usage

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverItem,
  PopoverSeparator,
} from '@/components/ui/glass-popover';

<Popover>
  <PopoverTrigger>Open menu</PopoverTrigger>
  <PopoverContent>
    <PopoverItem onClick={() => console.log('edit')}>
      Edit
    </PopoverItem>
    <PopoverItem>Share</PopoverItem>
    <PopoverSeparator />
    <PopoverItem>Delete</PopoverItem>
  </PopoverContent>
</Popover>

Components

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state.
`onOpenChange`	`(v: boolean) => void`	—	Fires on open change.

PopoverContent

Prop	Type	Default	Description
`tint`	`number`	`0.55`	Frosted tint of the panel.
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Which side to open on.
`sideOffset`	`number`	`8`	Gap in px between trigger and panel.
`align`	`"start" \| "center" \| "end"`	`"center"`	Horizontal alignment relative to trigger.

Dismisses on outside click, Escape, or calling setOpen(false).