Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn JSON Tree View for React Radix UI

Display JSON data in an interactive, expandable tree.

Framework
UI library

Radix UI does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.

{ address: Object, age: 30, email: "[email protected]", … }
age: 30
name: "John Doe"

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/json-tree-view.json

Usage

import { JsonTreeView } from "@/components/ui/json-tree-view";
const data = {
  name: "John Doe",
  age: 30,
  email: "[email protected]",
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
    zip: "12345",
  },
};

const Example = () => (
  <div className="w-full max-w-md">
    <JsonTreeView data={data} defaultExpandedDepth={1} />
  </div>
);

Demos

Data Types

Expand Depth

Map Set

API Reference

JsonTreeView

PropType
AttributeType
CSS variableType
--depthstring