Library

Expandable Card

Expandable Card

Layout-animated cards with AnimatePresence, gradient accents, and smooth expand/collapse. Click to toggle expanded content with spring-based layout animations.

clickexpandlayoutAnimatePresence

Installation

bash
# Copy expandable-card.tsx to your project
cp components/ui/expandable-card.tsx your-project/components/ui/expandable-card.tsx

How to use

tsx
import { ExpandableCard } from "@/components/ui/expandable-card";
tsx
<ExpandableCard
  title="Feature Name"
  description="Brief description here"
  icon={<Sparkles size={24} />}
  gradientClass="from-violet-500 to-fuchsia-500"
  expandedContent={
    <p>Detailed content revealed on expand.</p>
  }
/>

Dependencies

framer-motion

Exports

ExpandableCard

File

components/ui/expandable-card.tsx
Preview

Parallax Hero

Multi-layer scroll-linked parallax with sticky positioning

Scroll Reveal

Intersection-observer-powered entrance animations

Text Gradient Scroll

Word-by-word color reveal on scroll progress

Expandable Card

Layout-animated cards with AnimatePresence

Made with