Glass Popover for React

Preview

Demos ready. Update 0.

Installation

For React 19+ apps with Tailwind CSS 4.

npmpnpmyarnbun

$ npx shadcn@4.14.1 add @glassyui/glass-popover

Adds 12 files to components/glassyui and installs @radix-ui/react-popover and clsx.

Usage

import { GlassPopover, GlassPopoverContent, GlassPopoverTrigger } from "@/components/glassyui/glass-popover";

export function PopoverDemo() {
  return (
    <GlassPopover>
      <GlassPopoverTrigger>Open</GlassPopoverTrigger>
      <GlassPopoverContent>Glass popover</GlassPopoverContent>
    </GlassPopover>
  );
}

React Native usage

import { GlassButton } from '@/components/glassyui/glass-button';
import {
  GlassPopover,
  GlassPopoverContent,
  GlassPopoverTrigger,
} from '@/components/glassyui/glass-popover';

export default function PopoverExample() {
  return (
    <GlassPopover>
      <GlassPopoverTrigger>
        <GlassButton>Delivery</GlassButton>
      </GlassPopoverTrigger>
      <GlassPopoverContent>Arrives Thursday between 9:00 and 12:00.</GlassPopoverContent>
    </GlassPopover>
  );
}

It also uses Glass Button. Install them together:

npmpnpmyarnbun

$ npx shadcn@4.14.1 add @glassyui-native/glass-popover @glassyui-native/glass-button && npx expo install --fix

Examples

Side offset

<GlassPopoverContent sideOffset={16}>Content</GlassPopoverContent>

API reference

`GlassPopover`

Prop	Type	Default	Description
`open / defaultOpen`	`boolean`	`false`	Controlled or uncontrolled open state.
`onOpenChange`	`(open: boolean) => void`	None	Called when the popover opens or closes.

Also accepts Radix Popover.Root props.

`GlassPopoverTrigger`

Toggles the popover.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Renders your own element, such as a GlassButton, as the trigger.

Also accepts Radix Popover.Trigger props.

`GlassPopoverAnchor`

Positions the popover against an element other than the trigger.

Also accepts Radix Popover.Anchor props.

`GlassPopoverContent`

The floating glass panel, rendered in a portal.

Prop	Type	Default	Description
`sideOffset`	`number`	`12`	Gap between the trigger and the panel, in pixels.
`side / align`	`'top' \| 'right' \| 'bottom' \| 'left' / 'start' \| 'center' \| 'end'`	`'bottom' / 'center'`	Preferred placement; it flips to stay on screen.
`thickness`	`number`	thickness preference	Glass thickness as a multiple of regular (1); thicker glass bends the backdrop further at the rim.
`className`	`string`	None	Applies to the glass panel.

Also accepts Radix Popover.Content props.

Types: GlassPopoverContentProps