# Shadcn Collapsible Panels

> Frame with collapsible panels

- Type: example, free and open source (MIT)
- Component: [Frame](https://reui.io/components/frame.md)
- Page: https://reui.io/components/frame/c-frame-5
- Docs (Base UI): https://reui.io/docs/components/base/frame.md
- Docs (Radix UI): https://reui.io/docs/components/radix/frame.md
- MCP: `get_example("c-frame-5")`
- Registry item: https://reui.io/r/styles/base-nova/c-frame-5.json
- Uses: Collapsible, Frame

## Best for

One run step whose chevron title bar opens and closes its instructions panel, open on load

## Agent notes

- `stacked` joins nothing here, since the only `FramePanel` sits inside `CollapsibleContent`; each added step needs its own `Collapsible`

## When not to use

- A list of steps or sections where several expand and collapse: use [Accordion](https://reui.io/components/accordion.md) (`get_component("accordion")`)
- A numbered sequence the user moves through with progress shown: use [Stepper](https://reui.io/components/stepper.md) (`get_component("stepper")`)

## Install

```bash
npx shadcn@latest add @reui/c-frame-5
```

## About Shadcn Frame

### When to use

- Dashboard, settings and status sections with a title bar, card panels and a footer line
- Lists of services, records or log entries joined into one stacked column of bordered panels
- A titled shell around other parts, such as a collapsible run step that opens to its instructions

### When not to use

- Several sections that each expand and collapse, one or many open at a time: use [Accordion](https://reui.io/components/accordion.md) (`get_component("accordion")`)
- Ready made KPI tiles, profile summaries or promo offers laid out across a page: use the [Card blocks](https://reui.io/blocks/application/card.md)
- A storefront page of items with photos, prices, swatches and wishlist toggles: use the [Product Grid blocks](https://reui.io/blocks/ecommerce/product-grid.md)

### Agent notes

- `dense` strips the padding and gap of `Frame` itself and pulls each `FramePanel` onto the outer border; the panels keep their own padding
- `stacked` joins only `FramePanel` elements that are adjacent direct children of `Frame`; a wrapper around one leaves both fully rounded and bordered
- `FramePanel` grows into any spare height of `Frame`; pass `fit` when a panel should keep the height of its own content

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.