Popover
Floats a panel of mixed content off a trigger, such as a picker with a setting under it.
Configurations
3 examplesClosed
Open
Model
Align end
Model
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
Popover
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | Controlled open state. Pair with `onOpenChange`. Leave unset for an uncontrolled popover. |
| defaultOpen | boolean | false | Initial open state of an uncontrolled popover. |
| onOpenChange | (open: boolean) => void | - | Called with the next open state on every request: the trigger's toggle, an outside pointer-down, Escape. |
| children | React.ReactNode | - | The anchor (a `PopoverTrigger`, or a field its owner opens and closes) and the `PopoverContent`. |
| className | string | - | Extra class on the anchor wrapper. |
| style | React.CSSProperties | - | Inline styles merged onto the anchor wrapper, e.g. a width for a field anchor. |
PopoverTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Renders via Radix Slot, merging the trigger's props onto its only child (a Button, an IconButton, a custom button) instead of a bare native button. |
| render | React.ReactElement | - | The same as asChild, in the Base UI form some installers rewrite asChild into: the trigger renders this element with its props merged onto it, and the trigger's children, when given, become the element's children. |
| aria-haspopup | 'dialog'|'menu'|'listbox'|'grid'|'tree'|boolean | 'dialog' | What the panel is. Match it to `PopoverContent`'s `role`. |
| type | 'button'|'submit'|'reset' | 'button' | HTML button type, omitted when asChild or render is set. |
| onClick | (event: React.MouseEvent<HTMLButtonElement>) => void | - | Runs before the toggle; call `event.preventDefault()` to keep the popover as it is. |
| children | React.ReactNode | - | The trigger's content, with asChild the element that becomes the trigger, with render the element's content. |
| className | string | - | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | - | Merged over the open-state fill, so a trigger that paints its own open state keeps it. |
PopoverContent
| Prop | Type | Default | Description |
|---|---|---|---|
| side | 'auto'|'top'|'bottom' | 'auto' | Which side of the anchor the panel opens on. `auto` takes the side with room for the whole panel inside the nearest scrolling ancestor (above first), else the roomier side with the panel capped to it and scrolling. `top` / `bottom` pin the side and cap the panel to that side's room. |
| align | 'start'|'end' | 'start' | Which edge of the anchor the panel lines up with. |
| width | string|number | - | Panel width, any CSS length. `'100%'` matches the anchor. Unset, the panel sizes to its content. Always capped inside the viewport. |
| role | string | 'dialog' | The panel's role: `dialog` for mixed content, `menu` for a menu, `listbox` for a results list. |
| aria-label | string | - | Accessible name. Unset, the panel is named by its `PopoverLabel` when it has one. |
| id | string | - | Panel id; the trigger's `aria-controls` follows it. Generated when unset. |
| children | React.ReactNode | - | The panel's content: rows, a label, separators, controls. |
| className | string | - | Extra class on the panel. |
| style | React.CSSProperties | - | Inline styles merged onto the panel. |
PopoverLabel
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The section's name, sentence case; the role sets it in capitals. |
| id | string | - | Label id. Generated when unset; the panel is named by it unless it has an aria-label. |
| className | string | - | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | - | Inline styles applied to the root element. |
PopoverSeparator
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | - | Inline styles applied to the root element. |
AI Canvas