Flip Card
A book-style card with a spine tab that flips open on hover, revealing accent-colored detail. Built with pure CSS transforms and Tailwind.
Default
Hover over the card to see the flip animation and spine tab.
Scales across teams Reusable components Faster iteration
click to read
Case Study
Build a scalable Component Library that cut development time by 50% across Three Design Teams
Installation
$ npx shadcn add https://knot-ui.trupal.me/r/flip-card.json
Color Variants
Use the accentColor prop to choose a preset or pass custom Tailwind classes.
Microservices migration Reduced deploy time by 80% Improved reliability
read more
Case Study
Rebuilt a legacy monolith into microservices, cutting deploy time by 80%
FlipCardProps
Props accepted by the <FlipCard /> component.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Case Study" | Label text shown above the title, rendered next to the icon. |
| icon | LucideIcon | BookOpenIcon | Lucide icon component rendered next to the label. |
| title | ReactNode | (default text) | Main title / heading content displayed on the card face. |
| spineText | string | "click to read" | Text on the spine tab revealed when the card is hovered. |
| accentColor | string | "red" | Accent color preset or custom Tailwind classes. Presets: "red" | "blue" | "green" | "purple" | "orange" | "amber" | "teal". |
| className | string | — | Additional CSS classes applied to the root container. |
| onClick | () => void | undefined | Callback fired when the card is clicked. When provided, the card receives button role and keyboard support. |
| size | "sm" | "md" | "lg" | "xl" | "lg" | Size preset that controls card dimensions, text, padding, and spine proportionally. |