Treedata-display

Hierarchical list with lazy child loading, single or multiple selection with tri-state checkboxes, full keyboard support and opt-in virtualization.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/tree

의존 아이템button locale style

Default

Europe3

France

Germany

Italy

Asia

Oceania0

tree-demo.tsx

import { Tree, type TreeNode } from "@/components/ui/tree";
const nodes: TreeNode[] = [  {    id: "europe",    label: "Europe",    count: 3,    children: [      { id: "fr", label: "France" },      { id: "de", label: "Germany" },      { id: "it", label: "Italy", disabled: true },    ],  },  { id: "asia", label: "Asia", hasChildren: true },  { id: "oceania", label: "Oceania", count: 0 },];
export default function TreeDemo() {  return <Tree aria-label="Regions" nodes={nodes} defaultExpanded={["europe"]} selectionMode="single" defaultValue={["de"]} />;}