Tree

Hierarchies in a Soft card: files, navigation with counts, checkboxes with parent states, and indent guides.

FreeWeb and Mobile4 variantsMotion

npx shadcn add @fetaui/tree

Playground

Explorer

src

components

Button.tsx

Dialog.tsx

hooks

index.ts

package.json

Tree Item

components24

files

Explorer

src

components

Button.tsx

Dialog.tsx

hooks

index.ts

package.json

navigation

Workspace

Inbox12

Projects3

Website refresh8

Mobile app21

Billing v25

Installation

Terminal· bash

1 npx shadcn add @fetaui/tree

Accessibility

Uses tree and treeitem with aria-level, aria-expanded and aria-selected.
One tab stop, with arrow keys inside.
Checkbox parents report mixed.

Motion

Children fade in and settle 4 px over 240 ms, and the chevron turns.
The card rises 8 px over 400 ms on first render.
With reduced motion, rows appear in place.

Responsive behavior

280 wide on Web and 358 on Mobile. Rows are 32 and 44 px.

Performance

Rows are a memoized flat list, and closed branches do not render.
Rows are not virtualized, so very large trees should open lazily.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

Import Tree, TreeCard and TreeItem from @/components/fetaui/tree after installing it. nodes and label are required.
Node ids must be unique across the whole tree. kind is files, navigation, checkbox or guides.
expanded, selected and checked each have a default and a change callback. Choosing a branch selects and toggles it.
In checkbox kind, checked holds leaf ids and parents work out their own state. Disabled nodes never tick. Composes Checkbox.

/docs/components/tree/markdown

PreviousTab Bar

NextFile Tree

File TreeComponentA file explorer: folders with chevrons, files with type icons, git marks and a selected row.Tree ViewComponentA file tree with guides, inline renaming and the selected path in the footer.Tree TableComponentRows that roll up, with guides for depth. Selecting rows totals their spend in the footer.SidebarComponentNav Items on a tray, with the active page lifted onto surface. Collapses to an icon rail.CheckboxComponentToggles between checked and not checked, with an indeterminate value for parents of a list.

Preview