Reveal with motion: its height glides open with no overshoot while what's inside rises as it fades in; closing, the content fades first and the height folds away, so no line is cut through.
$ pnpm dlx shadcn@latest add @dashral/motion-revealInstallation
$ pnpm dlx shadcn@latest add @dashral/motion-revealAdds components/dashral/motion/reveal.tsx, the Reveal it builds on (in components/dashral/), motion and the motion files every motion component shares. Or by its full URL: https://dashral.com/r/motion-reveal.json
Usage
The same as Reveal, imported from components/dashral/motion/ (with the npm package: @dashral/motion/components/reveal): swap the import and it moves.
import { Reveal } from "@/components/dashral/motion/reveal"
<Reveal open={failed} className="text-sm text-destructive-text">
<p role="alert">Couldn't save. Check your connection and try again.</p>
</Reveal>Examples
Compared with Default
The height grows in CSS while the content fades in; it closes in CSS too.
Motion
The height glides on a spring with no overshoot while the content rises as it fades in, as an Accordion section opens; closing, the content fades first, then the height folds away.
How the two editions differ in general, and which to use where: Motion.
API reference
Every prop of Reveal, and every attribute of the element it renders. The Motion edition adds no props of its own.
Reveal
| Prop | Type | Default |
|---|---|---|
open | booleanShown while true: it grows in when it turns true and folds away when it turns false. Inside a RevealList, a row shows while it's in the list. | true |
as | "div" | "li" | "span"The element it is: li for a row of a RevealList, span inside a line of text. | "div" |
children | ReactNodeWhat appears: a message, a field, a hint. | — |
id | stringIts id, e.g. for aria-describedby on the field it explains. | — |
className | stringClasses of what's inside (the part that fades), e.g. its text color. | — |
RevealList
| Prop | Type | Default |
|---|---|---|
as | "ul" | "ol" | "div"The list's element. | "ul" |
children | ReactNodeIts rows: a Reveal each, as="li", with a key. Added rows grow in and removed ones fold away in the Motion edition; here they appear and go at once. | — |
… | HTMLAttributesAnything a list takes: className, aria-label. | — |
Motion
- Opening, its height glides on a spring with no overshoot (the considered glide) while what's inside rises 4px as it fades in (--duration-standard, --ease-enter).
- Closing, what's inside fades out fast (--duration-fast) while the height waits a moment, then folds away gathering speed (--ease-exit), so no line is cut through.
- In a grid or a flex column, the gap it brings glides in and out with the height, so nothing below jumps.
- With reduced motion it only fades.