Shadcn Tree Basic

Basic tree. Built with the Tree component. Uses @headless-tree/core, @headless-tree/react alongside the shadcn primitives. A free, open source shadcn tree example you can install with npx shadcn@latest add @reui/c-tree-1 and edit as your own code.

Basic tree.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

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

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

Deep outlines where a line at each level helps the eye follow the nesting: use the Tree Indent Lines example
A whole drive page with a folder rail beside a listing of the open folder: use the Files blocks
Folder rows with size and item count columns that move into other folders by pointer: use the Drag & Drop blocks
A pick of one value from a nested list, made inside a popup: use the Cascader component

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

Third-party API docs

Headless Tree v1: API reference, docs

Markdownhttps://reui.io/components/tree/c-tree-1.md

MCPget_example("c-tree-1")

Installnpx shadcn@latest add @reui/c-tree-1

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Tree Basic

Tree

Dependencies

@headless-tree/core
@headless-tree/react

About Shadcn Tree Basic

What You Can Build With Shadcn Tree Basic

Composes Tree, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-tree-1
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Tree Examples

Indent Lines Tree with indented lines.
Folder File Icons Tree with custom indent.
Plus Minus Toggles Tree with custom indent.
File Explorer File explorer tree with type icons
Org Chart Organization chart tree with avatars
Permissions Permissions tree with checkboxes

Related Shadcn Component Categories

Accordion
Open-source shadcn accordion components for FAQ layouts, settings panels, and help sections.
Alert
Open-source shadcn alert components for status messages, warning banners, and destructive notices.
Alert Dialog
Open-source shadcn alert dialog components for delete confirmations, destructive actions, and critical decisions.
Aspect Ratio
Open-source shadcn aspect ratio components for responsive media, image galleries, and video previews.
Attachment
Open-source shadcn attachment components for chat composers, upload states, and file previews.
Autocomplete
Open-source shadcn autocomplete components for smart search, typeahead inputs, and suggestion lists.

Frequently Asked Questions

When should I use Shadcn Tree Basic?

Use it for the bare pattern with nothing added: chevron toggles and text only rows over a CRM outline of leads and accounts.

Shadcn Tree as a whole fits:

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

For deep outlines where a line at each level helps the eye follow the nesting, use the Tree Indent Lines example. For a whole drive page with a folder rail beside a listing of the open folder, use the Files blocks. For folder rows with size and item count columns that move into other folders by pointer, use the Drag & Drop blocks. For a pick of one value from a nested list, made inside a popup, use the Cascader component.

How do I install Shadcn Tree Basic?

Run npx shadcn@latest add @reui/c-tree-1. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Tree Basic free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Tree Basic use?

It composes Tree. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.