design.json

structured index

The same content as DESIGN.md, but as data: tokens, 201 components with their exports and prop signatures, and the templates. Generated from the library source, served as a static file, free to consume.

Open design.json

The shape

Shortened — the real file carries every component.

json

{
  "name": "@wunderui/react",
  "version": "0.1.0",
  "site": "https://wunderui.com",
  "generatedAt": "2026-09-18",
  "counts": { "components": 201, "categories": 8, "templates": 5 },
  "tokens": {
    "light": { "--primary": "#555CF3", "--background": "#FFFFFF" },
    "dark":  { "--primary": "#555CF3", "--background": "#17181A" }
  },
  "components": [
    {
      "slug": "data-grid",
      "title": "Data Grid",
      "category": "Data Display",
      "description": "A full-featured table: sort, search, select, resize columns, paginate.",
      "exports": ["DataGrid", "DataGridColumn"],
      "props": "function DataGrid<T extends { id: string | number }>({ columns, data, selectable, pageSize, searchable, className }): React.JSX.Element;",
      "docs": "https://wunderui.com/components/data-grid"
    }
  ],
  "templates": [ /* … */ ]
}

Fields

Path	What it holds
	Package identity and where the docs live.
	The date this index was rebuilt from the source.
	npm command, import line and the stylesheet import.
	React, Tailwind, the primitive layer and the chart library.
	Components, categories, exports and templates.
	Every CSS custom property with its value.
	The category order used across the documentation.
	slug, title, category, description, exports[], props (the TypeScript signature) and the docs URL.
	slug, title, description, the components used, and the URL.

What to build with it

Check for drift in CI

Fail the build when a component is exported but missing from the registry, or when a token disappears that a project depends on.

Generate your own docs

Feed the inventory into an internal wiki, a Storybook index or a Slack command, without scraping the site.

Build a custom agent tool

The MCP server answers from exactly this file — a few dozen lines are enough to wire your own.

Sync design tokens

Read tokens.light and tokens.dark into a Figma plugin, a Style Dictionary pipeline or another platform's theme.

Fetch it

const design = await fetch("https://wunderui.com/design.json").then((response) => response.json())

// every component that ships a prop signature
const documented = design.components.filter((component) => component.props)

// the accent token in both themes
const accent = { light: design.tokens.light["--primary"], dark: design.tokens.dark["--primary"] }

The file is regenerated on every release; read if you cache it.