TreeView
Browse a hierarchy with native disclosure and an optional selected leaf.
Live — this one is real
Usage
import { useState } from "react";
import { TreeView } from "mizu-ui";
export function Example() {
const [selected, setSelected] = useState("button");
return (
<TreeView
selected={selected}
onSelect={setSelected}
nodes={[
{
id: "ui",
label: "Foundation",
children: [
{ id: "button", label: "Button.tsx" },
{ id: "badge", label: "Badge.tsx" },
],
},
{ id: "styles", label: "styles.css" },
]}
/>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect data/Inspection.tsx
Source is included in the npm package under src/data/Inspection.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| nodes | TreeNode[] | — | Stable id, label and optional children. |
| selected / onSelect | string / function | — | Optional leaf selection. |
Accessibility
Nested lists and native details; not an ARIA tree widget. Tab and Enter operate disclosures and leaf buttons. Depth is bounded at 16.
Motion
Native disclosure.