# Shadcn Columns Mode

> Columns mode with independently scrolling panels.

- Type: example, free and open source (MIT)
- Component: [Cascader](https://reui.io/components/cascader.md)
- Page: https://reui.io/components/cascader/c-cascader-13
- Docs (Base UI): https://reui.io/docs/components/base/cascader.md
- Docs (Radix UI): https://reui.io/docs/components/radix/cascader.md
- MCP: `get_example("c-cascader-13")`
- Registry item: https://reui.io/r/styles/base-nova/c-cascader-13.json
- Uses: Badge, Button, Cascader, Icon Tile

## Best for

Video, audio and article items grouped by library and collection, with a hued tile per library and a runtime chip on items and the trigger

## Agent notes

- Keep `w-auto` and `min-w-0` on `CascaderContent`, or the trigger width floors the popup and the columns cannot size it

## When not to use

- A hierarchy whose rows expand in place under each parent: use [Tree Multi-Select](https://reui.io/components/cascader/c-cascader-18.md) (`get_example("c-cascader-18")`)

## Install

```bash
npx shadcn@latest add @reui/c-cascader-13
```

## About Shadcn Cascader

### When to use

- Form fields that commit one value from a nested tree, such as a category, region, file or department
- Picking several nodes at once, such as permissions, report columns or shipping zones with cascading checks
- Deep or large hierarchies as Miller columns, an expanding tree, an inline panel or levels fetched on demand

### When not to use

- A short flat list of options with no nesting: use [Select](https://reui.io/components/select.md) (`get_component("select")`)
- A folder hierarchy browsed on the page rather than picked into a form field: use [Tree](https://reui.io/components/tree.md) (`get_component("tree")`)
- A table of records whose cells are edited in place and saved together: use the [Editing blocks](https://reui.io/blocks/data-grid/editing.md)

### Agent notes

- Parts live in separate files with no index: `CascaderItems` comes from `cascader-item`, while `CascaderInput` and `CascaderValue` come from `cascader-nav`
- Give every node a `value` that is unique across the whole tree, not only within its level; a repeated `value` silently drops the later row

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.