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.