@hex-core/components

AI-native React components — Radix UI + Tailwind CSS + CVA, with machine-readable schemas for every component.

Install

You typically don't install this package directly. Use the CLI to copy components into your project:

pnpm dlx @hex-core/cli add button

If you want to import the built components directly:

pnpm add @hex-core/components

Tailwind v4 consumers must register this package's bundle so utility classes resolve. One line in your app's globals.css:

@import "tailwindcss";
@import "@hex-core/components/tailwind.css";

Without it, classes like inset-ring-foreground/[0.06] (used by Button outline, Input, Card, etc.) appear in the rendered HTML but have no CSS rule, and components render unstyled. Tailwind v4 doesn't auto-scan node_modules.

import { Button } from "@hex-core/components";

export default function Page() {
  return <Button>Click me</Button>;
}

What's inside

47 components across primitives (Button, Input, Checkbox, …) and compounds (Combobox, DataTable, Command, …). Every component ships with:

• Radix UI headless foundation where applicable
• CVA variants (default, outline, ghost, etc.)
• Canonical transition-all duration-200 ease-out
• HSL design tokens — override via CSS vars, no JS config needed
• A matching .schema.ts with AI hints (whenToUse, whenNotToUse, commonMistakes, accessibilityNotes, tokenBudget)

Peer dependencies

• react 18 or 19
• react-dom 18 or 19
• react-hook-form (only needed by <Form> — tree-shaken if unused)
• @tanstack/react-table (only needed by <DataTable>)

Docs

Full component catalog, demos, theming, and MCP integration: hex-core.dev

License

MIT