## JSON Viewer (S—162)

A collapsible JSON tree: fold objects and arrays, see item counts when folded, and copy any value’s path.

- URL: https://sundaeui.dev/components/json-viewer
- Category: Cards & data visualization · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/json-viewer.json`
- Tags: tree, json, viewer, data, developer, inspector

Objects and arrays fold with a chevron and show “{3}” or “[12]” when closed. Hovering a row reveals a copy button that copies its path, such as data.items[2].price.
Expand all / Collapse all sit in the header. Strings, numbers and booleans are told apart by weight and quotes rather than colour.

### Usage

```tsx
import { JsonViewer } from '@/components/sundae/json-viewer'

<JsonViewer />
```

### Props

- `data` (`unknown`, required): Any JSON value.
- `defaultDepth` (`number`, default `1`): Levels open by default.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- API explorers, logs, debugging panels, admin tools.

### When not to use

- End-user data: format it as a real UI.

### Accessibility

- A tree with treeitems and aria-expanded on containers.
- Copy buttons are labelled with the path and announce success.
- Reduced motion removes the movement and keeps every state change.