New

MorphingCard

Card that smoothly morphs between collapsed and expanded states with CSS transitions on click.

Creative & Uniquemorphtransitionexpandcollapseinteractive

Dependencies

shadcn/ui components needed:

npx shadcn@latest add lucide-react

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { useState } from "react";
4import { ChevronDown, Sparkles, ArrowRight } from "lucide-react";
5
6export default function MorphingCard() {
7  const [expanded, setExpanded] = useState(false);
8
9  return (
10    <div className="flex items-center justify-center py-12">
11      <div
12        onClick={() => setExpanded(!expanded)}
13        className="group w-full max-w-sm cursor-pointer select-none overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-lg transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] dark:border-zinc-800 dark:bg-zinc-950"
14        style={{ maxHeight: expanded ? "400px" : "160px" }}
15      >
16        {/* Header - always visible */}
17        <div className="flex items-center gap-4 p-6">
18          <div className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-xl transition-all duration-500 ${expanded ? "bg-gradient-to-br from-violet-500 to-indigo-600 rotate-0" : "bg-violet-100 dark:bg-violet-900/30 -rotate-6"}`}>
19            <Sparkles className={`h-6 w-6 transition-colors duration-500 ${expanded ? "text-white" : "text-violet-600 dark:text-violet-400"}`} />
20          </div>
21          <div className="flex-1 min-w-0">
22            <h3 className="text-lg font-bold text-zinc-900 dark:text-zinc-50">Magic Card</h3>
23            <p className="text-sm text-zinc-500 dark:text-zinc-400">Click to reveal more</p>
24          </div>
25          <ChevronDown className={`h-5 w-5 text-zinc-400 transition-transform duration-500 ${expanded ? "rotate-180" : ""}`} />
26        </div>
27
28        {/* Expanded content */}
29        <div className={`px-6 pb-6 transition-all duration-500 ${expanded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}>
30          <div className="mb-4 h-px bg-zinc-100 dark:bg-zinc-800" />
31          <p className="mb-4 text-sm leading-relaxed text-zinc-600 dark:text-zinc-300">
32            This card smoothly morphs between two states using CSS transitions. The height, colors, and content all animate together for a fluid experience.
33          </p>
34          <div className="mb-4 grid grid-cols-3 gap-2">
35            {["Design", "Code", "Ship"].map((label) => (
36              <div key={label} className="rounded-lg bg-zinc-50 py-2 text-center text-xs font-semibold text-zinc-700 dark:bg-zinc-900 dark:text-zinc-300">{label}</div>
37            ))}
38          </div>
39          <button className="flex w-full items-center justify-center gap-2 rounded-lg bg-violet-600 px-4 py-2.5 text-sm font-semibold text-white transition-all hover:bg-violet-500 active:scale-[0.98]" onClick={(e) => e.stopPropagation()}>
40            Get Started <ArrowRight className="h-4 w-4" />
41          </button>
42        </div>
43      </div>
44    </div>
45  );
46}