Glide with motion: when the layout changes it glides to its new place and size; a highlight shared by layoutId springs from one place to the next.
$ pnpm dlx shadcn@latest add @dashral/motion-glideInstallation
$ pnpm dlx shadcn@latest add @dashral/motion-glideAdds components/dashral/motion/glide.tsx, the Glide 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-glide.json
Usage
The same as Glide, imported from components/dashral/motion/ (with the npm package: @dashral/motion/components/glide): swap the import and it moves.
import { Glide } from "@/components/dashral/motion/glide"
<ul className="grid gap-2">
{list.map((person) => (
<Glide as="li" key={person.name}>{person.name}</Glide>
))}
</ul>Compared with Default
It's the element, moving at once when the layout changes.
Motion
It glides to its new place and size on a spring with no overshoot; a highlight shared by layoutId springs to its new place.
How the two editions differ in general, and which to use where: Motion.
API reference
Every prop of Glide, and every attribute of the element it renders. The Motion edition adds no props of its own.
Glide
| Prop | Type | Default |
|---|---|---|
as | "div" | "span" | "li"The element it is. | "div" |
layout | boolean | "position" | "size"What glides when the layout changes: everything, only where it is (position, for text that would stretch), or only its size. | true |
layoutId | stringA name shared by elements in different places, such as a highlight: when it moves to another, it glides there. | — |
… | HTMLAttributesAnything an element takes: className, style, aria-*, handlers. | — |
Motion
- Its place and size glide on a spring with no overshoot (the considered glide); with layoutId, it springs to its new place with a touch of overshoot to settle.
- With reduced motion it moves at once.