# Shadcn Org Chart

> Organization chart tree with avatars

- Type: example, free and open source (MIT)
- Component: [Tree](https://reui.io/components/tree.md)
- Page: https://reui.io/components/tree/c-tree-6
- 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-6")`
- Registry item: https://reui.io/r/styles/base-nova/c-tree-6.json
- Uses: Avatar, Tree

## Best for

People rows with a photo, name and job title under their manager, nested at a wider 24px step

## Agent notes

- Each `avatar` is a remote Unsplash URL; `AvatarFallback` shows initials taken from `name` while one loads or if it fails

## 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-6
```

## 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.