# Collapsible

> Show/hide a region of content.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/collapsible.json`

## Install

```tsx
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@aspyn-io/kit";
```

### Show more

```tsx
<Collapsible>
  <div className="rounded-md border px-4 py-2 text-sm">aspyn-io/design-system</div>
  <CollapsibleContent className="space-y-2">
    <div className="rounded-md border px-4 py-2 text-sm">aspyn-io/ui</div>
    <div className="rounded-md border px-4 py-2 text-sm">aspyn-io/api</div>
  </CollapsibleContent>
  <CollapsibleTrigger asChild>
    <Button variant="ghost" size="sm">Toggle 2 more</Button>
  </CollapsibleTrigger>
</Collapsible>
```

### Nested (file tree)

Nest collapsibles to render an expandable folder tree.

```tsx
<Collapsible defaultOpen>
  <CollapsibleTrigger className="flex items-center gap-1">
    <ChevronIcon /> src
  </CollapsibleTrigger>
  <CollapsibleContent className="pl-4">
    <Collapsible>
      <CollapsibleTrigger className="flex items-center gap-1">
        <ChevronIcon /> components
      </CollapsibleTrigger>
      <CollapsibleContent className="pl-4">button.tsx</CollapsibleContent>
    </Collapsible>
  </CollapsibleContent>
</Collapsible>
```

### Settings panel

A titled section that expands to reveal advanced options.

```tsx
<Collapsible className="rounded-md border">
  <CollapsibleTrigger className="flex w-full items-center justify-between p-4">
    <span className="text-sm font-medium">Advanced settings</span>
    <ChevronDownIcon />
  </CollapsibleTrigger>
  <CollapsibleContent className="border-t p-4">…</CollapsibleContent>
</Collapsible>
```

## Notes

- For accordion-style stacked sections with styling, use Accordion instead.