Popover
shadcn/ui
Floating panel anchored to a trigger. For filters, settings, custom pickers, and contextual actions.
@/components/ui/popoverAlignment — align prop
| align | Preview | Behavior |
|---|---|---|
| start | Left edge of content aligns to left edge of trigger — toolbars, dropdown menus | |
| center | Content centered on trigger — icon buttons, popovers in the middle of a page | |
| end | Right edge aligns to right edge of trigger — right-side toolbars, overflow menus |
Side — side prop
Default: side="bottom" · sideOffset=4
Content patterns
Simple
With form
In context — ticket table filter
Tickets
Filter popover: align="end" so it opens flush with the right side of the trigger
Props — PopoverContent
| Prop | Default | Description |
|---|---|---|
| align | "center" | start | center | end — horizontal alignment relative to trigger |
| side | "bottom" | top | right | bottom | left — which side to open on |
| sideOffset | 4 | Gap in px between trigger and popover content |
| className | — | w-[Npx] to set width; default padding is p-4 |
Tokens: bg-popover text-popover-foreground border-border shadow-md
On this page