Components
Popover
Displays rich and interactive content in a portal, triggered by a button or other interactive element.
Loading
Installation
pnpm dlx shadcn@latest add @toui/popover
Pattern
Tokens
4 CSS variables in 4 categories.
px
| CSS Variable | Value | Description |
|---|---|---|
--popover-px | var(--component-px-lg) | 16px |
py
| CSS Variable | Value | Description |
|---|---|---|
--popover-py | var(--component-px-md) | 12px |
radius
| CSS Variable | Value | Description |
|---|---|---|
--popover-radius | var(--component-radius-lg) | — |
max-width
| CSS Variable | Value | Description |
|---|---|---|
--popover-max-width | 24rem | 384px |
Credits
- Built with Radix UI Popover for the popover component.