- Home
- Components
- Collapsible

# Collapsible

An interactive component which expands/collapses a panel.

## Props

All parts mirror Radix Collapsible props:

- Collapsible: root container
- CollapsibleTrigger: toggles state (supports asChild)
- CollapsibleContent: animated content area

### Example

```
<Collapsible>
  <CollapsibleTrigger asChild>
    <Button variant="ghost">Toggle</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>Hidden content</CollapsibleContent>
</Collapsible>
```

## Usage

#### @peduarte starred 3 repositories

```
<Collapsible className="flex w-[350px] flex-col gap-2">
  <div className="flex items-center justify-between gap-4 px-4">
    <h4 className="text-sm font-semibold">
      @peduarte starred 3 repositories
    </h4>
    <CollapsibleTrigger asChild>
      <Button title="This is a collapsible trigger" variant="ghost" size="icon" className="size-8">
        <ChevronsUpDown/>
        <span className="sr-only">Toggle</span>
      </Button>
    </CollapsibleTrigger>
  </div>
  <div className="rounded-md px-4 py-2 text-sm hover:bg-bg-secondary">
    @radix-ui/primitives
  </div>
  <CollapsibleContent className="flex flex-col gap-2">
    <div className="rounded-md px-4 py-2 text-sm hover:bg-bg-secondary">
      @radix-ui/colors
    </div>
    <div className="rounded-md px-4 py-2 text-sm hover:bg-bg-secondary">
      @stitches/react
    </div>
  </CollapsibleContent>
</Collapsible>
```