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 AccordionGroupedDemo() {
return (
<div className="flex items-center justify-center min-h-screen bg-background">
<AccordionGroup type="single" collapsible defaultValue="item-1" className="w-80">
<AccordionItem value="item-1" index={0}>
<AccordionTrigger>Getting Started</AccordionTrigger>
<AccordionContent>
Install the package and import the components. The grouped mode adds a proximity hover effect that follows your cursor between items.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2" index={1}>
<AccordionTrigger>Customization</AccordionTrigger>
<AccordionContent>
Supports single and multiple expansion modes, custom animations via Framer Motion springs, and flexible styling through className props.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3" index={2}>
<AccordionTrigger>Proximity Hover</AccordionTrigger>
<AccordionContent>
The grouped accordion tracks mouse position to highlight the nearest item, creating a fluid interactive experience.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-4" index={3}>
<AccordionTrigger>Accessibility</AccordionTrigger>
<AccordionContent>
Full keyboard support with focus-visible ring, screen reader compatibility, and proper ARIA roles via Radix UI primitives.
</AccordionContent>
</AccordionItem>
</AccordionGroup>
</div>
);
}