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 {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from "../components/ui/accordion";
export default function AccordionDemo() {
return (
<div className="flex items-center justify-center min-h-screen bg-background">
<Accordion type="single" collapsible defaultValue="item-1" className="w-80">
<AccordionItem value="item-1">
<AccordionTrigger>What is this component?</AccordionTrigger>
<AccordionContent>
A fluid accordion with smooth spring animations, collapsible sections, and proximity hover effects when grouped.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>How does it animate?</AccordionTrigger>
<AccordionContent>
It uses Framer Motion spring transitions for height changes, chevron rotation, and font weight shifts on hover.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes, built on Radix UI Accordion primitives with full keyboard navigation and ARIA attributes.
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
);
}