Back to Components
Cards

Stack Cards

Stacked cards that fan out on hover and focus for a layered showcase.

Stage 1

Launch Preview

Review the release plan and timelines.

Tap to exploreStack 1
Stage 2

Design Review

Approve final UI and interaction polish.

Tap to exploreStack 2
Stage 3

Go Live

Deploy and monitor the rollout.

Tap to exploreStack 3

Dependencies

  • clsx
  • tailwind-merge
  • framer-motion

Files

  • components/ui/stack-cards.tsx

Installation

Using shadcn CLI

npx shadcn add stack-cards --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge framer-motion