Large rounded showcase card with an eyebrow badge, headline, concise copy, interactive media stage, and smooth spring hover lift.
Every interaction responds with spring physics, hardware-accelerated transforms, and zero layout shift across light and dark appearances.
Install directly into your project using the shadcn CLI or copy the source code manually.
TypeScript props supported by <FeatureCard />.
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Apple Silicon Architecture" | Small uppercase label displayed above the headline. |
| title | string | "Engineered for fluid 120Hz motion." | Primary headline inside the feature card. |
| description | string | — | Concise supporting paragraph below the headline. |
| ctaLabel | string | "Explore Architecture" | Text label for the call-to-action pill button. |
| onAction | () => void | — | Callback fired when the CTA button is clicked. |
| media | React.ReactNode | — | Custom visual or media node rendered inside the media stage. |
| layout | "vertical" | "horizontal" | "vertical" | Controls whether text and media stack vertically or sit side-by-side. |
| className | string | — | Additional Tailwind CSS classes for the card. |
