Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Live Demo
Design tokens are the visual design atoms of the design system — colors, spacing, typography, and more stored as named variables. They let components stay theme-agnostic by consuming semantic variables like
--color-semantic-primary.Props: Accordion (Root)
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'single' | 'multiple' | 'single' | Determines whether one or multiple items can be opened at the same time. |
collapsible | boolean | false | When type is "single", allows closing content when clicking the trigger of an open item. |
defaultValue | string | string[] | — | The value of the item(s) to expand when initially rendered. |
value | string | string[] | — | The controlled value of the expanded item(s). |
onValueChange | (value: string | string[]) => void | — | Event handler called when the expanded state changes. |
className | string | — | Additional CSS class names. |
Usage
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@ghiberti85/ui'
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>What are design tokens?</AccordionTrigger>
<AccordionContent>
Design tokens are the visual design atoms of the design system —
colors, spacing, typography, and more stored as variables.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Does it support dark mode?</AccordionTrigger>
<AccordionContent>
Yes. Apply data-mode="dark" to any ancestor element to activate
the dark palette for that subtree.
</AccordionContent>
</AccordionItem>
</Accordion>