# Collapsible

Expandable section that reveals extra details in place. The panel opens smoothly, its contents can fade in row by row, and closing folds everything neatly away.

> Composed · Free · Layout — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add collapsible
```

## Import

```tsx
import { Collapsible, CollapsibleTrigger, CollapsibleContent, CollapsibleItem } from "@/components/ui/collapsible/collapsible";
```

## Variants

- `order-details` — Order Details: `npx @lumioui/cli add collapsible-order-details`

## Props

### Collapsible

| Prop | Type | Notes |
| --- | --- | --- |
| `open?` | `boolean` | Controlled open state. |
| `defaultOpen?` | `boolean` | Uncontrolled initial state. |
| `onOpenChange?` | `(open: boolean) => void` | — |
| `className?` | `string` | — |

### CollapsibleTrigger

| Prop | Type | Notes |
| --- | --- | --- |
| `children` | `React.ReactNode` | — |
| `hideChevron?` | `boolean` | Hide the chevron. |
| `className?` | `string` | — |

### CollapsibleContent

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |

### CollapsibleItem

| Prop | Type | Notes |
| --- | --- | --- |
| `index` | `number` | Reading-order position inside the content — sets the 40ms ignite step. |
| `className?` | `string` | — |

## Icons rendered

- `chevron-right` — /icons.html?i=chevron-right

Source: https://lumioui.com/components/collapsible