H
UI by hampton.io
Back to Components
Cards

Stack Cards

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

PropsUsage ExampleVariations
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

Related Cards Components

Ambient Glow Card

A feature card with a rotating ambient aura for premium highlights.

Animated Card Hover

Hover tilt card with optional glare and depth effect.

Animated Gradient Border Card

Card with a rotating gradient border for premium emphasis.

Bento Card

Card component for bento grid layouts. Supports multiple sizes (1x1, 2x1, 1x2, 2x2) with optional gradient backgrounds.

Bento Grid

Asymmetric bento layout tiles with ambient glow and shine animations.

Card

Flexible card container with header, content, and footer sections.