Popover
A floating panel anchored to the control that opened it
Visible columns
Choose which fields a run summary shows. The setting is per project.
align="center" · panel left 180 · shift 0
Installation
npx shadcn@latest add @sudokw/components-popoverimport { Popover } from "@gpuixui/components";Usage
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@gpuixui/components/popover";
<Popover>
<PopoverTrigger variant="secondary">Columns</PopoverTrigger>
<PopoverContent side="bottom" align="start">
<ColumnToggles />
</PopoverContent>
</Popover>;Composition
Popover
├── PopoverTrigger
└── PopoverContentSides
Visible columns
A panel opens on bottom with a 6px gap from its trigger.
side="bottom" · sideOffset 6 · the other three sides keep the same gap
Collision
Visible columns
The panel keeps its side and slides 150px back inside the frame.
panel x 352 · pulled back 150px · right margin 8
API reference
Popover
| Prop | Type | Default |
|---|---|---|
open | boolean | uncontrolled |
defaultOpen | boolean | false |
onOpenChange | (open: boolean) => void | none |
children | parts — PopoverTrigger, PopoverContent | — |
PopoverContent
| Prop | Type | Default |
|---|---|---|
side | "top" | "right" | "bottom" | "left" | "bottom" — a stored name the union does not carry |
align | "start" | "center" | "end" | "center" — a stored name the union does not carry |
sideOffset | number | 6 |
collisionPadding | number | 8 |
alignOffset | number | 0 |
className | string — joined after the surface recipe | — |
children | ReactNode — the surface's content | — |
PopoverTrigger
| Prop | Type | Default |
|---|---|---|
onActivate | (event) => void | — |
onClick | (event) => void | — |
Theming
The surface paints the theme's elevation.lg beside its 1px foreground ring. Its corner is the recipe's fixed 24px (rounded-3xl); the preview follows the platform radius and is the approximation.
Keyboard
- Escape
- closes the popover
- Tab
- closes it and lets focus leave
read from popover.tsx
Edit this page on GitHubapps/docs/content/docs/components/popover.mdx