Yami UI

A collapsible read-only tree viewer for JSON data.

"name": "yami-ui"

"version": "0.3.0"

"button"

"card"

"tree"

]

"dark": true

"cjk": true

}

Installation

Add the json viewer component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/json-viewer.json

Usage

import { JsonViewer } from "@/components/ui/json-viewer"

<JsonViewer data={myObject} />

Examples

Nested object

"name": "yami-ui"

"version": "0.3.0"

"active": true

"count": 42

"button"

"card"

"tree"

]

"dark": true

"cjk": true

"radius": 0.625

}

"empty": null

}

Code

import { JsonViewer } from "@/components/ui/json-viewer"

<JsonViewer data={{
  name: "yami-ui",
  version: "0.3.0",
  active: true,
  components: ["button", "card"],
  meta: { dark: true },
}} />