Interactive horizontal accordion showcase cards highlighting UI library features and architectural pillars with spring flex-grow expansions, gradient backdrops, and animated quotes.
Kinetic Physics
Spring-mass-damping equations tuned for real-time 120Hz tactility.
Motion isn't a cosmetic afterthought — it's tactile communication.Every interaction preserves physical velocity and momentum.
Alex Rivera, Design Technologist
Install directly into your project using the shadcn CLI or copy the source code manually.
TypeScript props supported by <ExpandableCards />.
| Prop | Type | Default | Description |
|---|---|---|---|
| stories | ExpandableCardItem[] | — | Array of card items containing id, name, tagline, quote, author, role, initials, href, ctaText, bg, border, and logo (ReactNode or Component). |
| items | ExpandableCardItem[] | — | Alternative alias prop for stories. |
| defaultActiveId | number | string | 1 | ID of the card that should be expanded by default on initial render. |
| title | React.ReactNode | — | Custom headline element rendered at the top left of the section. |
| subtitle | React.ReactNode | — | Descriptive eyebrow subtitle text rendered above the main headline. |
| headerAction | React.ReactNode | — | Custom top-right element or link to override the default explore action. |
| moreStoriesText | string | — | Label for the link in the header linking to the component catalog. |
| moreStoriesHref | string | — | Destination URL for the header action. |
| className | string | — | Optional Tailwind CSS class overrides applied to the outer section container. |
