Popover with motion: it springs out of its trigger from the side it opens on, and glides to its new height when what's inside changes.
$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-popover.jsonInstallation
$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-popover.jsonAdds components/dashral/motion/popover.tsx, the Popover it builds on (in components/dashral/), motion and the motion files every motion component shares. With the registry in your components.json:
$ pnpm dlx shadcn@latest add @dashral/motion-popoverUsage
The same as Popover, imported from components/dashral/motion/: swap the import and it moves.
import { Popover } from "@/components/dashral/motion/popover"
<Popover trigger={<Button variant="outline">Filters</Button>}>
<FiltersForm />
</Popover>Examples
Compared with Default
Fades and zooms in from 95%; when what's inside changes, its height jumps.
Motion
Springs out of its trigger from its own side, and glides to a new height when what's inside changes.
How the two editions differ in general, and which to use where: Motion.
API reference
Every prop of Popover, and every attribute of the element it renders. The Motion edition adds no props of its own.
Popover
Also takes every prop of Radix Popover(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
trigger | ReactElementWhat opens it, e.g. a button. Required. | — |
children | ReactNodeThe panel's content. | — |
side / align | Where it opens. | "bottom" / "center" |
open / onOpenChange | Control it yourself. | — |
className | stringThe panel's classes, e.g. a width or p-0. | — |
Motion
- It springs out of its trigger from the side it opens on (--duration-standard, a hint of overshoot), from 94% and 6px back toward the trigger; it leaves quickly.
- When what's inside changes (a rule added, a person invited, a message after saving) it glides to the new height with no overshoot; it's clipped only while it glides.
- With reduced motion it only fades, and its height follows at once.