How helixui compares

helixui is not the first design system, and we’re explicit about what it borrows. This page maps helixui onto the libraries you’ve probably already evaluated, so you can decide whether to adopt it.

TL;DR

	helixui	Radix UI	shadcn/ui	MUI	Mantine
Tokens-first	✅ DTCG JSON is the source of truth	❌ (no built-in tokens)	⚠️ Tailwind theme	✅ MUI’s theme	✅ Mantine theme
Styling model	CSS variables + plain CSS files	Unstyled (BYO)	Tailwind classes	Emotion CSS-in-JS	CSS Modules
Component count	~80 (and growing)	~30 primitives	~50 recipes	100+	100+
AI/LLM-readable spec per component	✅ `spec.md` colocated	❌	❌	❌	❌
DTCG token export	✅ source of truth	❌	❌	❌	❌
DOCX / PPTX export	✅ `@helixui/document`, `@helixui/slides`	❌	❌	❌	❌
MCP server	✅ `@helixui/mcp`	❌	❌	❌	❌
Theme engine	✅ DNA — 22-gene genome with breeding	❌	⚠️ Tailwind config	✅ palette + density	✅ ColorScheme + theme
Owns the source	You install npm packages	You install npm packages	You copy code in	You install npm packages	You install npm packages

What helixui does that others don’t

1. Tokens are JSON, not code

The W3C Design Tokens Community Group format is the authoring surface for colors, spacing, radii, typography, shadows, and motion in helixui. CSS variables and TypeScript types are build outputs. That means:

Figma plugins can read the same JSON the runtime does.
An LLM can answer “what’s color.bg.action.brand.hover?” by parsing one file.
Token changes don’t need a code release — rebuild and the cascade follows.

Radix has no tokens at all. shadcn/ui leans on Tailwind’s theme.extend, which is JS, not JSON. MUI’s tokens live inside the theme object you pass to <ThemeProvider>, which is again code.

2. Each component carries a machine-readable spec

Every @helixui/core component has a sibling spec.md:

packages/core/src/components/button/
  Button.tsx
  button.css
  spec.md         ← props, tokens used, a11y, examples

spec.md’s frontmatter is a typed schema. The docs site, the LLM manifest (llms-full.txt), and the MCP server all read the same file. So when you ask Claude “what props does <Button> take?”, you get a real answer without scraping anyone’s website.

3. Multi-format export from one React tree

// Same React tree, three outputs
<MyDeck />                       // → DOM
await exportToPptx(<MyDeck />)   // → .pptx (pptxgenjs lazy import)
await exportToDocx(<MyDoc />)    // → .docx (docx lazy import)

The @helixui/document and @helixui/slides packages share the same token manifest as @helixui/core, so a doc exported to DOCX has the same colors as the same content rendered to the web.

4. DNA — a theme as a genome

@helixui/dna models a theme as 22 genes (accent, chroma, radius, density, …). You can clone(), mutate(), compose() two parents into a child, and evolve() a population. Dominant alleles win in crossover; recessive ones surface ~15% of the time. It’s a real genetic algorithm, applied to design.

npx @helixui/dna breed studio noir --seed 42 --output shorthand

MUI gives you a theme; helixui gives you a population of themes you can cross.

When the other libraries are the right call

Use Radix UI when

You want unstyled primitives and intend to write all your visual language yourself.
You don’t care about token export, AI metadata, or a multi-format story.
You’ve already invested in your own design tokens and just need accessible behavior.

helixui uses some of the same WAI-ARIA patterns Radix popularized — credit where due. You can wrap Radix primitives in your own helixui-styled components if you want both.

Use shadcn/ui when

You want to own the source. shadcn’s “copy the components into your repo” model is unbeatable for teams that prefer no upstream churn.
You’re already deep into Tailwind and want components that compose with class: and arbitrary variants.
The token cascade isn’t part of your mental model.

helixui and shadcn solve different problems. shadcn is recipes you own; helixui is a system you import.

Use MUI when

You want the deepest stock-component coverage in the React ecosystem.
You’re comfortable with CSS-in-JS (Emotion) and the runtime cost is acceptable for your app.
You need Material Design specifically — helixui doesn’t try to be Material.

Use Mantine when

You want a polished, opinionated React UI kit with batteries included (hooks, form, dates, notifications).
You want CSS Modules without writing your own pipeline.
You don’t need AI tooling integration today.

When helixui is the right call

You’re building AI-first surfaces (agentic IDEs, LLM dashboards, copilots) and want components your AI can introspect.
You care about DTCG portability — Figma round-trip, token versioning, multiple consumers.
You need PPTX / DOCX export of the same UI you render to the web.
You want a principled theme system that goes beyond “swap the palette.”
You don’t mind being early. We’re pre-1.0; API churn is real.

Side-by-side: Button

// helixui
import { Button } from '@helixui/core';
<Button variant="solid" tone="brand" size="md">Save</Button>;

// Radix
import * as Slot from '@radix-ui/react-slot';
// (you write your own button atop the primitive)

// shadcn (after `npx shadcn add button`)
import { Button } from './components/ui/button';
<Button variant="default" size="default">Save</Button>;

// MUI
import Button from '@mui/material/Button';
<Button variant="contained" color="primary" size="medium">Save</Button>;

// Mantine
import { Button } from '@mantine/core';
<Button variant="filled" color="blue" size="md">Save</Button>;

The vocabulary is similar everywhere — the divergence is what lives behind tone="brand" versus color="primary". In helixui, tone="brand" resolves through the token cascade to whichever accent gene your DNA expresses; the same Button renders correctly in every theme.

Migration notes

We don’t yet ship codemods. The mental shifts when porting from each:

From Radix: keep your behavior primitives, replace your custom styling layer with helixui tokens + components.
From shadcn: delete the copied recipes you don’t need to fork; import the equivalents from @helixui/core. You can keep Tailwind for layout — helixui doesn’t fight it.
From MUI: replace <ThemeProvider> with <HelixUIDNAProvider>, swap component imports, and move palette overrides to a DNA mutation.
From Mantine: the closest one-to-one mapping. Most components have a helixui equivalent with similar prop shapes.

PRs that document a migration story are very welcome — see CONTRIBUTING.md.