Controls
Card Stack
Stacked notification cards that fan out into a full list with springy stagger — collapses back into a compact peek with ghost layers.
Installation
Coming soon. Components will be available via the registry once checkout goes live.
Usage
<CardStack />
// or with your own articles:
<CardStack
cards={[
{ id: "1", title: "Building Micro-Interactions", subtitle: "Motion Design", time: "5 min read", href: "https://your-blog.com/post-1" },
{ id: "2", title: "Spring Physics for UI", subtitle: "Animation", time: "8 min read", href: "https://your-blog.com/post-2" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cards | CardItem[] | — | Array of card items to render. Defaults to a built-in article set when omitted. |
| cards[].id* | string | — | Unique key for the card. Used as the React key — must be stable across renders. |
| cards[].title* | string | — | Primary heading line. Truncated with an ellipsis if it overflows. |
| cards[].image | ReactNode | — | Optional icon or image for the leading thumbnail (48×48 px). Pass any React element — a Lucide icon, <img>, or <Image> component. |
| cards[].subtitle | string | — | Optional secondary line beneath the title. Typically a category, publication, or short description. |
| cards[].time | string | — | Optional trailing label. Works for read time ("5 min read"), publish date, or relative time. |
| cards[].href | string | — | Optional URL. When provided the card becomes a link that opens in a new tab. |
| width | number | 384 | Max width of the card stack in px. Increase for wider layouts or decrease for sidebars. |
| className | string | — | Tailwind classes merged onto the root container. |
Use cases
Writing section on a portfolio
Drop this on your personal site to link to your articles — the latest piece stays front and center, the rest are one tap away without cluttering the page.
Featured projects
Showcase your top project as the primary card with links to the case study or live demo, and let visitors expand to browse the rest of your work.
Resource / link list
Curate a set of links — tools you use, talks you've given, interviews — and embed them anywhere without a dedicated page.
Press & mentions
Surface the most recent coverage or feature on top, let visitors unfold older mentions on demand.