Smooth Expand Accordion

Fluid accordion expand/collapse with spring physics and content height animation.

Micro InteractionReactFramer Motion

CSSshadcnCustom CSS

Manual

Create a file and paste the following code into it.

src/components/interactive-accordion-demo.tsx

import { UniqueAccordion } from "@/components/interactive-accordion";

export default function InteractiveAccordionDemo() {
  return (
    <main className="flex h-dvh w-full items-center justify-center bg-background p-8">
      <div className="w-full max-w-2xl">
        <div className="mb-12">
          <h1 className="mb-3 text-4xl font-medium tracking-tight text-balance">
            What we do
          </h1>
          <p className="text-lg text-muted-foreground">
            Transforming ideas into exceptional digital experiences.
          </p>
        </div>
        <UniqueAccordion />
      </div>
    </main>
  );
}