Skip to main content
Accordion component preview (light)
  • Location: sabo/src/components/ui/accordion.tsx

When to use

  • Group multiple sections where only headings are visible by default.
  • Use one-at-a-time (single) or multi-open (multiple) behavior.

Usage

sabo/src/components/ui/accordion.tsx

Key props

type
'single' | 'multiple'
Controls whether only one item can be open at a time (single) or multiple (multiple).
collapsible
boolean
Whether the open item in a single accordion can be collapsed.
This component forwards all props from Radix Accordion primitives (Root/Item/Trigger/Content). Above are commonly used props. For the full API, see Radix docs: https://www.radix-ui.com/primitives/docs/components/accordion

Styling tip

  • Trigger rotates the chevron on open; avoid replacing it with heavy icons.
  • Keep content padding light; Accordion should feel compact.

Accessibility

  • Uses disclosure semantics; headings are keyboard navigable.