bloomkitAccordion
Collapsible content sections built on Radix primitives. Supports single or multiple open items with smooth height animations.
Installation
npm install @bloomkit/reactUsage
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@bloomkit/react";
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Section title</AccordionTrigger>
<AccordionContent>Section content here.</AccordionContent>
</AccordionItem>
</Accordion>Multiple open items
<Accordion type="multiple">
<AccordionItem value="a">
<AccordionTrigger>First</AccordionTrigger>
<AccordionContent>Content A</AccordionContent>
</AccordionItem>
<AccordionItem value="b">
<AccordionTrigger>Second</AccordionTrigger>
<AccordionContent>Content B</AccordionContent>
</AccordionItem>
</Accordion>Default open
<Accordion type="single" collapsible defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Open by default</AccordionTrigger>
<AccordionContent>This section starts expanded.</AccordionContent>
</AccordionItem>
</Accordion>Accordion Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | — | Whether one or many items can be open |
| collapsible | boolean | false | When type is single, allows closing the open item |
| defaultValue | string | string[] | — | Initially open item(s) |
| value | string | string[] | — | Controlled open item(s) |
| onValueChange | (value: string | string[]) => void | — | Called when open items change |
| className | string | "" | Additional Tailwind classes |
AccordionItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Unique identifier for this item |
| disabled | boolean | false | Prevents interaction |
| className | string | "" | Additional Tailwind classes |
AccordionTrigger Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Trigger label content |
| className | string | "" | Additional Tailwind classes |
AccordionContent Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Collapsible content |
| className | string | "" | Additional Tailwind classes |