@hex-core/cli

hex init

pnpm dlx @hex-core/cli init [--theme <slug>] [--overwrite] [--no-install]

Scaffold the Tailwind v4 setup: writes `globals.css` with the chosen theme's `@theme` block + `:root {}` + `.dark {}`, adds the `@import "@hex-core/components/tailwind.css"` directive, and prints next steps. Idempotent — re-running won't double-write existing tokens. `--theme <slug>` picks the theme to scaffold from (default `default`); `--overwrite` replaces existing `globals.css` and `tailwind.config.ts`; `--no-install` prints the install line for peer deps instead of running it.

cd my-next-app
pnpm dlx @hex-core/cli init
# → wrote src/app/globals.css
# → next: pnpm dlx @hex-core/cli add button

hex add <component...>

pnpm dlx @hex-core/cli add <component...> [-y] [-o] [--no-deps] [--no-install]

Copy one or more components (and their internal deps) into your project. Component sources land in `src/components/ui/<slug>.tsx`; the `cn` helper and other shared utilities go to `src/lib/utils.ts`. Skips files that already exist (pass `-o` / `--overwrite` to replace). Resolves internal deps recursively (pass `--no-deps` to skip). Auto-installs npm peers when detected; pass `--no-install` to print the install line instead.

pnpm dlx @hex-core/cli add button card input
# → installed button → src/components/ui/button.tsx
# → installed card   → src/components/ui/card.tsx
# → installed input  → src/components/ui/input.tsx

• **Heavy-peer prompt (0.4.0+):** when an added component declares a heavy peer (`@tanstack/react-table` for DataTable, `react-day-picker` + `date-fns` for Calendar, `vaul` for Drawer, `cmdk` for Command, `input-otp` for InputOTP, `react-hook-form` for Form, `react-resizable-panels` for Resizable, `sonner` for Toaster), the CLI surfaces a single consolidated prompt with the install command before continuing. Skip the install only if you skip the component.

hex list [--category <cat>]

pnpm dlx @hex-core/cli list [--category primitive|component|block|hook]

Print every component (or recipe) the bundled registry knows about. Useful when scripting bulk installs.

pnpm dlx @hex-core/cli list --category primitive
# button
# card
# input
# label
# ...

hex theme apply <preset>

pnpm dlx @hex-core/cli theme apply <default|midnight|ember> [--file <path>]

Swap an existing `globals.css` to a different first-party preset without clobbering custom rules. For branded presets (Stripe, Linear, …) and richer authoring, use `theme init` / `theme edit` below.

pnpm dlx @hex-core/cli theme apply midnight
# → updated ./globals.css :root and .dark blocks for theme "midnight"

hex theme init [-i] [--name <preset>]

pnpm dlx @hex-core/cli theme init [-i] [--name <preset>] [--out <path>] [--format css|json|ts] [--overwrite]

Scaffold a theme file. Without flags it scaffolds from a Hex Core preset (default `default`); pass `--name <slug>` (or `--preset <slug>`) to seed from any of the 74 presets across @hex-core/tokens and @hex-core/themes. Pass `-i` to author interactively from the five `TokenSetSeeds` (primary / foreground / background / destructive / radius) — derives a coherent dark mode automatically from the light seeds.

# scaffold from a branded preset
pnpm dlx @hex-core/cli theme init --name stripe

# author interactively from one brand color
pnpm dlx @hex-core/cli theme init -i

hex theme edit [-i] [--token <key=value>...]

pnpm dlx @hex-core/cli theme edit [-i] [--file <path>] [--token <key=value>...] [--mode light|dark|both]

Override one or more token values in an existing `globals.css`. Pass `-i` to walk the tokens interactively with visual swatches and AA-contrast warnings; pass `--token primary="240 50% 50%"` (repeatable) for non-interactive edits. The `--mode` flag picks which palette to update (defaults to both).

# update one token in both modes
pnpm dlx @hex-core/cli theme edit --token primary="217 100% 53%"

# walk every token interactively (recommended for new themes)
pnpm dlx @hex-core/cli theme edit -i

hex theme list

pnpm dlx @hex-core/cli theme list [--category <name>] [--tag <name>] [--json]

List every available theme preset (3 first-party + 71 voltagent brand presets), grouped by category. Filter with `--category` (one of `ai`, `dev-tools`, `backend`, `productivity`, `design`, `fintech`, `ecommerce`, `media`, `automotive`) or `--tag`. Pass `--json` to emit machine-readable output for scripts.

pnpm dlx @hex-core/cli theme list --category fintech
# binance — Binance
# coinbase — Coinbase
# kraken — Kraken
# mastercard — Mastercard
# revolut — Revolut
# stripe — Stripe
# wise — Wise

hex theme add <slug> --from <studio-url>

pnpm dlx @hex-core/cli theme add <slug> --from <studio-url> [--out <path>] [--overwrite]

Compose a custom theme from a Studio URL and write it as a TypeScript file in your project. Closes the Studio → editor loop the docs feedback called out: tweak the canvas, copy the URL, run this command, and a paste-ready `extendTheme(...)` source file lands at `src/themes/<slug>.ts`. The CLI parses every `?<token>_<mode>=` query param + the `?base=` preset + the `?radius=` slider, then runs the same `extendTheme()` call the studio's Export-to-project dropdown emits. Default output path is `src/themes/<slug>.ts` (or `themes/<slug>.ts` if `src/` doesn't exist).

pnpm dlx @hex-core/cli theme add my-stripe \
  --from "https://hex-core.dev/studio?base=stripe&background_light=220+31%25+61%25"
# → wrote src/themes/my-stripe.ts (extendTheme(stripeTheme, { ... }))

hex recipe list / hex recipe add <slug>

pnpm dlx @hex-core/cli recipe list
pnpm dlx @hex-core/cli recipe add <slug> [-y] [-o]

Recipes were promoted to a subcommand surface in 0.4.0. `recipe list` enumerates available recipes; `recipe add <slug>` installs every component the recipe declares, in order, then prints the post-install checklist (blocker / warn / nit items the recipe author flagged). The same six recipes the MCP `list_recipes` tool exposes.

pnpm dlx @hex-core/cli recipe list
# auth-form, settings-page, command-palette, ...

pnpm dlx @hex-core/cli recipe add settings-page
# → installs: tabs, card, input, switch, separator, button
# → next steps: see docs/recipes/settings-page

hex doctor

pnpm dlx @hex-core/cli doctor

Diagnose your Hex UI install. Reports on `hex.config.json`, Tailwind v4 detection, the `cn` helper at `src/lib/utils.ts`, alias config, and the components directory. Exit code 0 on pass; non-zero when blockers are found. Pure with respect to fs/cwd — no spawn, no install — so it's safe to wire into CI.

pnpm dlx @hex-core/cli doctor
# ✓ hex.config.json present
# ✓ Tailwind v4 detected
# ✓ src/lib/utils.ts exports cn
# ✓ components dir at src/components/ui
# ! warn: heavy peer @tanstack/react-table requested by data-table not installed

hex skills install

pnpm dlx @hex-core/cli skills install [-t <path>] [-o]

Copy Hex UI's bundled agent skills (SKILL.md packs for Claude Code) into `<cwd>/.claude/skills/`. Per-directory idempotent: an existing skill directory is skipped unless `-o` / `--overwrite` is passed. Use `-t <path>` to install to a custom location.

pnpm dlx @hex-core/cli skills install
# → installed hex-ui skills to ./.claude/skills/

Bootstrap a new project

Three commands gets you a Next.js + Tailwind v4 app with the design system installed and a Button + Card on the page.

pnpm create next-app@latest my-app --tailwind --app
cd my-app
pnpm dlx @hex-core/cli init
pnpm dlx @hex-core/cli add button card

Try a branded preset, then roll back

`theme apply` rewrites only the token blocks; your custom CSS stays. For first-party presets it works directly; for branded presets, scaffold via `theme init --name <slug>` first.

# first-party (instant swap)
pnpm dlx @hex-core/cli theme apply ember
# → inspect output, then roll back
pnpm dlx @hex-core/cli theme apply default

# branded (scaffold + apply)
pnpm dlx @hex-core/cli theme init --name stripe --out ./globals.css --overwrite

Author a custom theme interactively

Authoring from one brand color with `theme init -i` walks the five seeds and derives a coherent dark mode automatically.

pnpm dlx @hex-core/cli theme init -i
# ? Primary brand color (hex / named / hsl): #0F62FE
# ? Page foreground (HSL triplet): 240 10% 3.9%
# ? Page background (HSL triplet): 0 0% 100%
# ? Destructive color (hex / named / hsl): #DC2626
# ? Radius preset: balanced
# → wrote ./globals.css (light + auto-derived dark)

Install an entire recipe

Recipes are vetted multi-component compositions. The CLI fetches every primitive the recipe needs and prints the post-install checklist.

pnpm dlx @hex-core/cli recipe add auth-form
# → installs: button, input, label, card, separator
# → checklist: wire <form> to your auth handler; see docs/recipes/auth-form