Accordion
A vertically stacked set of interactive headings that each reveal a section of content. Supports single and multiple expand modes, collapsible, animated transitions, chevron indicator, and disabled items.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/component-kit/items/accordion';
export function Example() { return ( <Accordion type="single" collapsible><AccordionItem value="one"><AccordionTrigger>Can I customize it?</AccordionTrigger><AccordionContent>Yes. The source lives in your project.</AccordionContent></AccordionItem></Accordion> );}Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | — | Allow one or several open sections. |
collapsible | boolean | false | Allow all sections to close in single mode. |