Introduction
Beautifully designed components with AI-native metadata. Accessible. Customizable. Open Source.
Hex UI is a component library designed for both AI coding assistants and human developers. Every component ships with machine-readable schemas, usage hints, and accessibility metadata that LLMs can consume via MCP.
What is Hex UI?
Unlike traditional component libraries, Hex UI is not a package you install as a dependency. Instead, you pick the components you need and copy them into your project. This gives you full ownership and control over the code — no vendor lock-in, no version conflicts.
AI-Native
Every component includes a .schema.ts file with structured metadata:
- Props, variants, slots — machine-readable interface
- AI hints — when to use, when not to use, common mistakes
- Accessibility notes — what ARIA attributes to include
- Token budget — estimated LLM token cost
- Examples — code snippets for common patterns
MCP Server
Add the Hex UI MCP server to your Claude Code settings and discover components with natural language:
// .claude/settings.json
{
"mcpServers": {
"hex-ui": {
"command": "npx",
"args": ["@hex-core/mcp"]
}
}
}Then ask: “Search hex-ui for a button component and add it to my project.”
Tech Stack
- Radix UI — accessible headless primitives
- Tailwind CSS — utility-first styling
- CVA — class-variance-authority for variant management
- TypeScript — strict types throughout