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.
Spotted: somewhere on the internet
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. |