videorc/uiPopover
A floating panel for a short task, on the popup tier of the float glass. An Anchor part lines it up with something other than its trigger.
Installation
$ pnpm dlx shadcn@latest add @videorc/popoverUsage
import {
Popover,
PopoverContent,
PopoverDescription,
PopoverHeader,
PopoverTitle,
PopoverTrigger,
} from "@/components/ui/popover";<Popover>
<PopoverTrigger render={<Button variant="secondary" />}>
Add marker…
</PopoverTrigger>
<PopoverContent>
<PopoverHeader>
<PopoverTitle>Add a marker</PopoverTitle>
<PopoverDescription>
Marks this moment in the recording.
</PopoverDescription>
</PopoverHeader>
</PopoverContent>
</Popover>Anatomy
<Popover>
<PopoverAnchor />
<PopoverTrigger />
<PopoverContent>
<PopoverHeader>
<PopoverTitle />
<PopoverDescription />
</PopoverHeader>
</PopoverContent>
</Popover>Examples
Anchor
PopoverAnchor wraps what the popover should line up with when that isn't the trigger: here the whole status bar, so the sound board opens over its end rather than over the small Sounds button. The trigger still opens and closes it.
Theming
| Token or attribute | Meaning |
|---|---|
glass-float | The popup tier: the window's solid tone, a 1 px rim and the float drop |
rounded-lg | The popup tier's 10 px corners |
w-72, p-3, gap-3 | Its default width and spacing |
data-open, data-closed | Fades and scales from 0.98 in 100 ms, with no slide |
data-side, data-align | Where it opened |
Keyboard
| Key | Action |
|---|---|
Enter, Space | On the trigger, opens or closes the popover |
Tab | Moves through the popover's controls |
Escape | Closes the popover and returns focus to the trigger |
Accessibility
The popover is a dialog: PopoverTitle names it and PopoverDescription describes it. Focus moves into it on open and back to the trigger on close.
API reference
Every Base UI Popover prop, plus:
PopoverContent
Prop
Type
PopoverAnchor
Prop
Type
Tooltip
A short label for a control on the tooltip tier of the float glass. It waits 600 ms for a deliberate hover, and its neighbours under one provider then open at once.
Hover Card
A preview of what a link points at, shown on hover or focus, on the popup tier of the float glass. Base UI's Preview Card under shadcn's name.