Components
Loading preview...
A fluid accordion with spring animations, collapsible sections, proximity hover effects in grouped mode, and smooth content transitions. Built on Radix UI with Framer Motion.
@micka_design
npx shadcn@latest add https://21st.dev/r/micka_design/accordion"use client";
import {
AccordionGroup,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from "../components/ui/accordion";
export default function AccordionMultipleDemo() {
return (
<div className="flex items-center justify-center min-h-screen bg-background">
<AccordionGroup type="multiple" defaultValue={["item-1", "item-3"]} className="w-80">
<AccordionItem value="item-1" index={0}>
<AccordionTrigger>Design System</AccordionTrigger>
<AccordionContent>
Consistent visual language with shared tokens for spacing, typography, and color.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2" index={1}>
<AccordionTrigger>Components</AccordionTrigger>
<AccordionContent>
Reusable building blocks with flexible APIs and composable patterns.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3" index={2}>
<AccordionTrigger>Animation</AccordionTrigger>
<AccordionContent>
Spring-based transitions that feel natural and responsive to user interaction.
</AccordionContent>
</AccordionItem>
</AccordionGroup>
</div>
);
}