> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Accordion

> Expand/collapse content sections.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/accordion-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=e5a6d0ebaeb238d577559753cfbebe3c" alt="Accordion component preview (light)" width="240" data-path="images/ui/accordion-light.png" />
</Frame>

* **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

```tsx sabo/src/components/ui/accordion.tsx theme={null}
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

<ParamField path="type" type="'single' | 'multiple'">
  Controls whether only one item can be open at a time (<code>single</code>) or multiple (<code>multiple</code>).
</ParamField>

<ParamField path="collapsible" type="boolean">
  Whether the open item in a single accordion can be collapsed.
</ParamField>

<Note>
  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](https://www.radix-ui.com/primitives/docs/components/accordion)
</Note>

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