# Shadcn Permissions

> Permissions tree with checkboxes

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

## Best for

Role access grouped by area with a checkbox on each action row, plus and minus toggles and 5 grants on load

## Agent notes

- Grants live in local `checked` state seeded with 5 ids; save them to your API from `togglePermission`
- Only leaf rows render a `Checkbox`, so an area row cannot grant or clear its whole group

## When not to use

- Area rows that tick or clear every action under them and show a mixed state: use [Cascader](https://reui.io/components/cascader.md) (`get_component("cascader")`)

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

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