Hex UIv1
164 components shipped

The component layer for spec-driven UI.

Every component ships with a machine-readable spec — when to use it, when not to, common mistakes, accessibility notes, token budget. Hand your agent a brief; Hex UI resolves it to a ranked component checklist over MCP.

Get startedOpen the studio →
Studio

Edit your theme against real product surfaces

Token edits feel right when you can see them on a working form, a chart, a list of transactions — not on a swatch grid.

  • Live, not mocked

    Drag color tokens, density, and radius — every product surface in the canvas re-paints in one frame against the actual @hex-core/components bundle.

  • Per-mode overrides

    Light AND dark in one URL — share a link and your collaborator sees the exact theme you're editing, with both palettes intact.

  • Copy for LLM

    One click → the canonical buildAppContext markdown (the same blob the MCP emit_app_context tool emits). Paste into Claude or ChatGPT and the agent has your full stack.

Payout Threshold

Minimum balance before a payout is triggered.

$2,500
$50 (min)$10,000 (max)
Open the studioSee the LLM payload →
164 components

Every component teaches the agent what to do

Every JSON in the registry carries a structured AI block — not just docs, not just types, but the things the agent needs to choose.

When an agent has to pick a component, it's usually choosing between three or four candidates that all look right by name. Hex UI ships a structured ai block on every registry item — not docs, not types, but the things that actually drive the choice.

The agent reads it once, then ranks. No training-data guesswork, no hallucinated props. The same blob is what powers MCP search, the /llms-full.txt bundle, and Studio's "Copy for LLM" payload — one canonical schema, four surfaces.

whenToUsestring
What the component is for. The agent reads this before it picks Outline vs Default — not training-data guesswork.
whenNotToUsestring
What the component is NOT for. Stops the agent from grabbing a Button when it really wants a Link.
commonMistakesstring[]
Foot-guns the LLM should self-correct before review does. Shipped, not assumed.
tokenBudgetinteger
Approximate context cost. MCP search ranks by what fits in the context window, not just by name match.
registry/items/button.json → ai
{
  "whenToUse": "Use for clickable actions: form submissions, confirmations, triggering operations. Use 'default' variant fo…",
  "whenNotToUse": "Don't use for navigation between pages (use Link or anchor with asChild). Don't use 'destructive' for non-d…",
  "commonMistakes": [
    "Nesting interactive elements inside asChild button",
    "Using <Button> with plain onClick for navigation instead of <Button asChild><a href=...></a></Button> — bre…",
    "Using <Button variant='destructive'> for recoverable actions like 'Reset filters' — reserve destructive for…"
  ],
  "accessibilityNotes": "Automatically handles focus ring, disabled state, and aria attributes. Icon-only buttons MUST have aria-lab…",
  "tokenBudget": 500
}
View full item →
Browse all 164 components →
MCP server

Plug it into Claude Code or Cursor

The Hex UI MCP server exposes the registry as structured tool calls. Component discovery is one tool call away — not hundreds of tokens of doc reading.

.claude/settings.json
{
  "mcpServers": {
    "hex-ui": {
      "command": "npx",
      "args": ["@hex-core/mcp"]
    }
  }
}
  • search_components

    Brief or tag → ranked component list with descriptions and dependencies.

  • get_component_schema

    Pull props, variants, slots, and AI hints for one component without fetching its source.

  • resolve_spec

    Natural-language brief → ranked components + recipes + dependency union.

  • emit_app_context

    Theme + selected components + density → the canonical paste-into-LLM markdown blob.

Full MCP setup guide →
For agents

3 endpoints LLMs already understand

Static text, no SDK, no auth, no rate limit. An agent that can fetch can read every component, every recipe, every theme — and your live tweaks too.

  • /llms.txt

    Short index — package list, tool catalog, and a pointer to the full guide. The Cursor / Claude / Perplexity convention.

    bash
    curl https://hex-core.dev/llms.txt
  • /llms-full.txt

    Every per-package mini-guide concatenated. One fetch ingests the whole stack into the agent's context.

    bash
    curl https://hex-core.dev/llms-full.txt
  • /studio/copy

    Your tweaked theme + selected components rendered as the canonical buildAppContext markdown. Same blob the MCP emit_app_context tool emits.

    bash
    open https://hex-core.dev/studio/copy
8 packages

Independent release cadences

Token tweaks ship without re-testing the whole component library. Adopt only the packages you need; skip the rest. Each package has its own mini-guide.

Browse package guides →

Install in one command

Copy any component into your project. No npm dependency.

pnpm
pnpm dlx @hex-core/cli add button