The Accordion component allows users to toggle the visibility of sections of content. It features a physics-based opening animation and subtle magnetic text effects on hover.
Preview
Usage
Installation
$ pnpm dlx shadcn add https://klarden.vercel.app/r/accordion.json
Basic Example
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/accordion";
export default function App() {
return (
<Accordion type="single" collapsible>
<AccordionItem value="1">
<AccordionTrigger>Title</AccordionTrigger>
<AccordionContent>Content goes here.</AccordionContent>
</AccordionItem>
</Accordion>
);
}
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | — | Determines if one or multiple items can be open. |
collapsible | boolean | false | Whether an open item can be closed by clicking its trigger. |
className | string | — | Additional CSS classes for the root container. |