Overlay
Popover
Non-modal floating panel anchored to a trigger. Use for settings panels and pickers.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/popover
Examples
Align
Use the align prop on PopoverContent to control the horizontal alignment.
Basic
A simple popover with a header, title, and description.
With Form
A popover with form fields inside.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
Popover, PopoverTrigger, PopoverContent,
PopoverHeader, PopoverTitle, PopoverDescription,
} from "@codefast/ui/popover";
<Popover>
<PopoverTrigger asChild>…</PopoverTrigger>
<PopoverContent>
<PopoverHeader>
<PopoverTitle>…</PopoverTitle>
</PopoverHeader>
…
</PopoverContent>
</Popover>
API reference
Props for each part of the component. All native element props are also forwarded.
Popover
Root. Manages open state. Non-modal by default.
| Prop | Type | Default | Description |
|---|---|---|---|
| open / onOpenChange | boolean / (open: boolean) => void | — | Control visibility from your own state. |
| defaultOpen | boolean | false | Open on mount when uncontrolled. |
| modal | boolean | false | When true, traps focus and blocks outside interaction. |
PopoverContent
| Prop | Type | Default | Description |
|---|---|---|---|
| side / align | "top"|"right"|"bottom"|"left" / "start"|"center"|"end" | "bottom" / "center" | Placement relative to the trigger. |
| sideOffset | number | 4 | Gap in px between trigger and content. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Space | Opens the popover when the trigger is focused. |
| Tab | Moves through focusable elements inside the content. |
| Esc | Closes the popover and returns focus to the trigger. |
- Focus moves into the content on open and returns to the trigger on close.
- Unlike a Dialog it is non-modal — the rest of the page stays interactive unless modal is set.
- Use a Tooltip for hover hints; reach for a Popover when the panel holds controls.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Anchor short, focused tasks to the control they relate to.
- Give the panel a title with PopoverTitle when it contains a form.
Don’t
- Don’t put long, primary content in a popover — use a Dialog or a page.
- Don’t use a Popover for passive hints — that’s a Tooltip.