Primitive / Moleculestable

Popover

Floating content panel anchored to a trigger element.

@glinui/uiComponent: popover

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add popover

Usage

TSX

1import { Popover, PopoverTrigger, PopoverContent } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <Popover>
6      <PopoverTrigger>Open popover</PopoverTrigger>
7      <PopoverContent>
8        <div className="space-y-2">
9          <h4 className="font-medium text-sm">Dimensions</h4>
10          <p className="text-sm text-neutral-500">Set the dimensions for the layer.</p>
11        </div>
12      </PopoverContent>
13    </Popover>
14  )
15}

Accessibility

Built on Radix Popover with focus management.
Focus returns to trigger on close.

Keyboard Interactions

Key	Action
`Escape`	Close the popover.
`Tab`	Cycle focus within the popover.

ARIA Attributes

`aria-expanded` on trigger
`aria-controls` linking trigger to content

Reduced Motion

Open/close transitions respect `prefers-reduced-motion`.

Affected properties

opacitytransform

API Reference

`Popover`

Prop	Type	Required	Default	Description
`open`	`boolean`	-	`-`	Controlled open state.
`defaultOpen`	`boolean`	-	`-`	Initial open state.
`onOpenChange`	`(open: boolean) => void`	-	`-`	Open state change handler.
`modal`	`boolean`	-	`false`	Trap focus within the popover.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from popoverContentVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "outline" \| "ghost"`	No	`"default"`	Variant option from popoverContentVariants.

`PopoverTrigger`

Prop	Type	Required	Default	Description
`asChild`	`boolean`	-	`false`	Render as child element.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from popoverContentVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "outline" \| "ghost"`	No	`"default"`	Variant option from popoverContentVariants.

`PopoverContent`

Prop	Type	Required	Default	Description
`variant`	`"default" \| "glass" \| "frosted" \| "outline" \| "ghost"`	No	`default`	Visual treatment.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Content width (w-56/w-72/w-80).
`align`	`"start" \| "center" \| "end"`	-	`center`	Alignment relative to trigger.
`sideOffset`	`number`	-	`8`	Distance from trigger in pixels.
`side`	`"top" \| "right" \| "bottom" \| "left"`	-	`bottom`	Preferred side of the trigger.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Popover } from "@glinui/ui"

Source Files

popover.tsx

popover.test.tsxtest

Dependencies

@glinui/ui

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/popover.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

PopoverProps

`PopoverContentProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from popoverContentVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "outline" \| "ghost"`	No	`"default"`	Variant option from popoverContentVariants.

`PopoverProps`

No explicit fields extracted for this props type.

`PopoverTriggerProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from popoverTriggerVariants.
`variant`	`"default" \| "glass" \| "frosted" \| "outline" \| "ghost"`	No	`"default"`	Variant option from popoverTriggerVariants.