Authoring a token-dashboard page

A single MDX page composing <Diagnostics />, <TokenNavigator />, and <TokenTable /> gives consumers a top-to-bottom view of the design-token set for the active theme: project-level health, a browsable tree of every token, and a searchable table for quick lookup.

Blocks live in docs, so the dashboard lives alongside every other surface you publish for designers and engineers consuming your tokens.

Template

---
title: Design Tokens
---

import { Diagnostics, TokenNavigator, TokenTable } from '@unpunnyfuns/swatchbook-blocks';

# Design Tokens

<Diagnostics />

## Tree

<TokenNavigator />

## Table

<TokenTable />

Drop that file under your Storybook MDX stories directory. The toolbar's theme switcher is live — every block re-renders against the active theme. Outside Storybook, wrap the tree in SwatchbookProvider with a hand-built or exported ProjectSnapshot (see the blocks reference).

You can see this dashboard composition live against our tokens-reference fixture in the live Storybook.

Variations

• Per-subsystem. Pass a root or filter prop to scope the tree and table: <TokenNavigator root="color" />, <TokenTable filter="space.*" />.

• Diagnostics auto-collapses unless errors or warnings are present, so you can leave it at the top of every page without it adding noise on clean loads.