react98

Tree View

A Windows 98 tree view for nested items.

Preview

tree-view.exe
  • Desktop
    • My Computer
    • Programs
      • Notepad
      • Paint

Installation

pnpm dlx shadcn@latest add https://react98-ui.vercel.app/r/tree-view.json
npx shadcn@latest add https://react98-ui.vercel.app/r/tree-view.json
yarn dlx shadcn@latest add https://react98-ui.vercel.app/r/tree-view.json
bunx shadcn@latest add https://react98-ui.vercel.app/r/tree-view.json

Usage

import { TreeView, type TreeNode } from "@/components/ui/98/tree-view";

const nodes: TreeNode[] = [
  {
    id: "desktop",
    label: "Desktop",
    children: [{ id: "computer", label: "My Computer" }],
  },
];

export function Example() {
  return <TreeView nodes={nodes} />;
}

Props

PropTypeDescription
nodesTreeNode[]Tree nodes to render recursively.
...HTMLAttributes<HTMLUListElement>All native list attributes pass through.

TreeNode

PropTypeDescription
idstringStable key for the node.
labelReactNodeDisplayed node label.
childrenTreeNode[]Optional child nodes.

On this page