Installation

Requirements

• Node.js 20.9 or newer
• React 19
• Tailwind CSS v4
• pnpm / npm / bun — any package manager works

Choose your integration

Three paths to install Hex UI components, each suited to a different workflow:

• CLI (recommended for most projects) — pnpm dlx @hex-core/cli add <slug> copies a component plus its internal deps into src/components/ui/. No runtime dependency added; you own the source. Best when you plan to customize.
• Manual copy — paste from any /docs/components/<slug> Code tab. Useful when you want a single component without installing the CLI.
• MCP server — wire @hex-core/mcp into Claude Code or Cursor and let the agent install components by name. Best for AI-driven workflows where the agent picks the right primitive from a structured catalog rather than reading docs.

The CLI and MCP paths share the same registry — picking one doesn’t lock you out of the other. Many teams use both: CLI for human-driven scaffolds, MCP for agent-driven iteration.

CLI install

The @hex-core/cli package copies a component and its dependencies into your project. No npm runtime dependency is added.

pnpm dlx @hex-core/cli add button

Replace button with any slug from the components index. The CLI resolves inter-component dependencies automatically (e.g. adding combobox also pulls in popover and command).

Manual copy

Prefer to copy code by hand? Open any component page, click the Code tab, and paste the contents into src/components/ui/<slug>.tsx. Install the listed peer dependencies (Radix primitives, CVA) once per project.

MCP server

Wire @hex-core/mcp into Claude Code or Cursor and let the agent discover + install components via structured tool calls (search_components, get_component, scaffold_project, …). The catalog is the same one the CLI reads, so an MCP-driven install lands in the same src/components/ui/<slug>.tsx path the CLI would have used.

Full setup — MCP Server guide (client configs for Claude Code + Cursor, available tools, example prompts).

Tailwind setup

Hex UI uses HSL design tokens defined as Tailwind theme vars. Add this block to your globals.css — you can freely override any token.

@theme {
  --color-background: hsl(0 0% 100%);
  --color-foreground: hsl(240 10% 3.9%);
  --color-primary: hsl(240 5.9% 10%);
  --color-primary-foreground: hsl(0 0% 98%);
  --color-border: hsl(240 5.9% 90%);
  --color-ring: hsl(240 5.9% 10%);
}

See Theming for the full token list and dark-mode palette.

What’s next

• Add your first component
• Browse the @hex-core/* packages — components, tokens, themes, payload, cli, mcp, and more
• Wire the MCP server for Claude Code integration
• Customize the theme