Back

Smooth Expand Accordion

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

Category
Micro InteractionReact
CSS
shadcnCustom CSS

Manual

Create a file and paste the following code into it.

src/components/interactive-accordion-demo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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>
  );
}

Update the import paths to match your project setup.

Similar screens