Browse components
Motion Cards
A card grid that springs in with a stagger and, when filtered by tag, shrinks leaving cards away while the rest glide into their new cells.
Installation
npx shadcn@latest add @glint-ui/motion-cardsFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/motion-cards.json
Usage
import { MotionCards } from "@/components/ui/motion-cards";
<MotionCards
items={[
{ id: "1", title: "Designing calm interfaces", image: "/a.jpg", tags: ["Design"] },
{ id: "2", title: "Edge caching in practice", image: "/b.jpg", tags: ["Engineering"] },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { id, title, description?, image?, eyebrow?, tags }. |
| columns | number | 4 | Grid columns on wide screens. |
| stagger | number | 0.06 | Seconds between card entrances. |
| bounce | number | 0.25 | Spring bounce for entrances and reordering. |
| showFilter | boolean | true | Show the tag filter bar. |
| allLabel | string | "All" | Label of the show-everything filter; empty hides it. |
| onFilterChange | ReactNode | — | Called with the active tag, or null for all. |
| className | string | — | Extra classes for the root element. |