# Shadcn Basic

> Basic tree.

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

## Best for

The bare pattern with nothing added: chevron toggles and text only rows over a CRM outline of leads and accounts

## When not to use

- Deep outlines where a line at each level helps the eye follow the nesting: use [Indent Lines](https://reui.io/components/tree/c-tree-2.md) (`get_example("c-tree-2")`)

## Third-party libraries

- Headless Tree v1: [API reference](https://headless-tree.lukasbach.com/api/core/), [docs](https://headless-tree.lukasbach.com/getstarted/)

## Install

```bash
npx shadcn@latest add @reui/c-tree-1
```

## About Shadcn Tree

### When to use

- Folder and file explorers for a code project, a workspace or a document store
- Record hierarchies such as CRM accounts and contacts, or an org chart of who reports to whom
- Role permission editors grouped by area, where each action is ticked on or off

### When not to use

- A whole drive page with a folder rail beside a listing of the open folder: use the [Files blocks](https://reui.io/blocks/solutions/files.md)
- Folder rows with size and item count columns that move into other folders by pointer: use the [Drag & Drop blocks](https://reui.io/blocks/data-grid/drag-drop.md)
- A pick of one value from a nested list, made inside a popup: use [Cascader](https://reui.io/components/cascader.md) (`get_component("cascader")`)

### Agent notes

- `syncDataLoaderFeature` throws when `getItem` returns nothing or a promise, so children fetched from a server need the async data loader feature
- The `rootItemId` record is never drawn, so its children form the top level and its own name stays hidden
- After adding, moving or removing records behind `dataLoader`, call rebuildTree on `tree`, or the rows keep the old structure

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.