Popover

Rich content in a floating panel, anchored to a trigger.

$ pnpm dlx shadcn@latest add https://dashral.com/r/popover.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/popover.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/popover

Usage

example.tsx

1import { Button } from "@/components/dashral/button"
2import { Input } from "@/components/dashral/input"
3import { Popover } from "@/components/dashral/popover"
4
5<Popover trigger={<Button variant="outline">Filters</Button>} className="w-72">
6  <Input label="Customer" placeholder="Name or email" />
7</Popover>

Examples

Share link

Notifications

The bell's popover: opening one marks it read, and the count and Mark all as read follow.

API reference

Popover

Also takes every prop of Radix Popover(opens in a new tab).

Prop	Type	Default
`trigger`	`ReactElement` What opens it, e.g. a button. Required.	—
`children`	`ReactNode` The panel's content.	—
`side / align`	Where it opens.	`"bottom" / "center"`
`open / onOpenChange`	Control it yourself.	—
`className`	`string` The panel's classes, e.g. a width or p-0.	—

PopoverRoot / PopoverTrigger / PopoverAnchor / PopoverContent

Building blocks, for a control of your own: Combobox and DatePicker are made from them.

Also takes every prop of Radix Popover(opens in a new tab).

Keyboard

Keys	Action
`Tab`or`Shift+Tab`	Move between controls; focus stays inside while it's open
`Escape`	Close and return focus to what opened it

Accessibility

The trigger has aria-expanded and aria-controls; focus moves into the content and back.

Motion

Opens with a fade, a scale from 95%, a 2px blur clearing and a 4px slide from its trigger's side, on the spring (--duration-standard); closes faster (--duration-fast, --ease-exit). No blur with reduced motion.