H
UI by hampton.io
Back to Components
Cards

Expandable Card

Clickable card that expands to reveal additional content with smooth animation.

PropsUsage ExampleVariations

Dependencies

  • clsx
  • tailwind-merge
  • framer-motion
  • lucide-react

Files

  • components/ui/expandable-card.tsx

Installation

Using shadcn CLI

npx shadcn add expandable-card --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge framer-motion lucide-react

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.