127 Components
Popover Card
OverlaysFloating anchored popover card with configurable side and alignment, spring scale-in physics, outside-click dismissal, and interactive toggle controls.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/popover-card.json"
Props
TypeScript props supported by <PopoverCard />.
| Prop | Type | Default | Description |
|---|---|---|---|
| triggerLabel | string | "Display Settings" | Label displayed inside the popover trigger button. |
| title | string | "Workspace Preferences" | Header title displayed inside the floating card. |
| description | string | "Adjust real-time notification and layout behavior." | Subtitle text displayed under the popover title. |
| side | "top" | "bottom" | "left" | "right" | "bottom" | Side of the trigger where the popover appears. |
| align | "start" | "center" | "end" | "center" | Alignment along the chosen side. |
| open | boolean | — | Controlled open state for the popover. |
| onOpenChange | (open: boolean) => void | — | Callback fired when the popover opens or closes. |
| children | React.ReactNode | — | Custom content rendered inside the popover body. |
| className | string | — | Additional Tailwind CSS classes for the wrapper. |
Key Features
- Configurable `side` (top, bottom, left, right) and `align` (start, center, end) positioning.
- Outside click and Escape key listeners for immediate dismissal.
- Includes interactive spring switch toggles out of the box when no custom children are passed.
Keyboard & Accessibility
- Links trigger button to popover dialog via aria-expanded, aria-haspopup, and aria-controls.
- Uses role='switch' and aria-checked on interactive preference toggles.
- Respects prefers-reduced-motion for entry and exit animations.