Hex UIv0.1

Installation

How to add Hex UI components to your project in under a minute.

Requirements

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

CLI install

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

pnpm
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.

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.

css
@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

Edit this page on GitHub