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

# Collapsible

> Toggle visibility for small content blocks.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/collapsible-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=d3330038f7604e10d3585abb2c026b1d" alt="Collapsible component preview (light)" height="210" data-path="images/ui/collapsible-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/collapsible.tsx`

## When to use

* Show/hide a small chunk of content (filters, advanced options).
* Lighter than Accordion; you control trigger/button UI.

## Usage

```tsx sabo/src/components/ui/collapsible.tsx theme={null}
import {
  Collapsible, CollapsibleTrigger, CollapsibleContent
} from "@/components/ui/collapsible";
import { Button } from "@/components/ui/button";

export function Example() {
  return (
    <Collapsible>
      <div className="flex items-center justify-between">
        <h4 className="font-medium">Details</h4>
        <CollapsibleTrigger asChild>
          <Button variant="outline" size="sm">Toggle</Button>
        </CollapsibleTrigger>
      </div>
      <CollapsibleContent className="mt-3 text-sm text-muted-foreground">
        Hidden content goes here.
      </CollapsibleContent>
    </Collapsible>
  );
}
```

## Key props

<ParamField path="defaultOpen" type="boolean">
  Initial open/closed state.
</ParamField>

<ParamField path="asChild" type="boolean">
  Render trigger/content as child elements.
</ParamField>

<Note>
  This component forwards all props from Radix Collapsible primitives (Root/Trigger/Content). Above are commonly used props. For the full API, see Radix docs: [https://www.radix-ui.com/primitives/docs/components/collapsible](https://www.radix-ui.com/primitives/docs/components/collapsible)
</Note>

## Styling tip

* Provide clear visual feedback on open/close (icons, text).
* Keep content short; for larger sections use Accordion.

## Accessibility

* Ensure the trigger is focusable; announce state via <code>aria-expanded</code> if you customize markup.