Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Tree

Browse hierarchical content with expansion, selection, checkboxes and drag feedback.

CoreNavigation@gaudi/design-system/core/TreeView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Tree } from '@gaudi/design-system/core/Tree';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/tree-display-options.json.

Usage

import { Tree, TreeItem, TreeItemLabel } from '@gaudi/design-system/core/Tree';
// tree is the host's @headless-tree/react useTree instance.<Tree tree={tree} aria-label='Project files'>  {tree.getItems().map(item => <TreeItem key={item.getId()} item={item}>    <TreeItemLabel>{item.getItemName()}</TreeItemLabel>  </TreeItem>)}</Tree>

Examples

Display options

Storybook

Organization chart

Storybook

Permission checkboxes

Storybook

API

7 props

Accessibility

Headless Tree supplies hierarchical keyboard navigation. Keep node names stable and announce loading or failed child fetches.

AvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesFieldField composes form label, description, error, and input building blocks.7 examplesSwitchSwitch renders a token-styled boolean preference control.4 examplesCheckboxCheckbox renders a token-styled binary control.6 examples