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
import {
  Accordion, AccordionItem, AccordionTrigger, AccordionContent
} from "@/components/ui/accordion";

export function Example() {
  return (
    <Accordion type="single" collapsible defaultValue="item-1" className="w-64">
      <AccordionItem value="item-1">
        <AccordionTrigger>Section 1</AccordionTrigger>
        <AccordionContent>Content 1</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Section 2</AccordionTrigger>
        <AccordionContent>Content 2</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

​
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.