Case Deck
A stack of results you swipe through like cards on a table.
Features
- Drag or flick the top card and it tucks in at the back
- Moves on by itself, and pauses on hover or focus
- Previous and next buttons for keyboards
- Stays put for reduced motion
Best for: Agencies, consultants and SaaS teams whose best argument is their numbers.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | The headline. |
| accent | string | - | Optional ending in serif italic. |
| description | string | - | The line under the headline. |
| cases | DeckCase[] | - | The cards: client, tag, metric and result. |
| primaryCta | { label: string; href: string } | - | The blue button. |
| secondaryCta | { label: string; href: string } | - | Optional second button. |
| eyebrow | ReactNode | - | Optional line above the headline. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Case Deck interactive section free to use?
Yes. Case Deck is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Case Deck work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Case Deck in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Case Deck need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Case Deck accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.