Now in open beta

Your AI already knows
your design system.

Lucent UI is an open-source React component library where every component ships with a machine-readable COMPONENT_MANIFEST — so AI coding assistants generate correct, on-brand UI the first time.

✦   You're on the list

Early access · No spam · Unsubscribe anytime

COMPONENT_MANIFEST createTheme() MCP Server React 18 / 19 Claude · Cursor · Copilot Open Source
COMPONENT_MANIFEST

AI reads the spec,
not the source.

Every component in Lucent UI ships with a machine-readable COMPONENT_MANIFEST — a structured JSON object describing props, design intent, usage examples, and accessibility requirements.

AI coding assistants read the manifest at context time. No prompt engineering, no hallucinated prop names, no incorrect variants — just correct UI, first try.

11 Props documented
7 Usage examples
1 Import, all context
AI reads this at import time. No prompt engineering required.
ButtonManifest Live data · imported at build time
// ButtonManifest — imported directly from lucent-ui const ButtonManifest = { "id": "button", "name": "Button", "tier": "atom", "designIntent": "Buttons communicate available actions. Variant conveys hierarchy: use "primary" for the single most important action in …", "props": [ { "name": "variant", "type": "enum", "enumValues": ["primary", "secondary", "ghost", "danger"], "default": "primary" }, { "name": "size", "type": "enum", "enumValues": ["sm", "md", "lg"], "default": "md" }, … 9 more props ], "usageExamples": [ { "title": "Primary action", "code": "<Button variant=\"primary\">…</Button>" }, … 6 more examples ], "accessibility": { "role": "button", "ariaAttributes": ["aria-disabled", "aria-busy"] } };
createTheme()

9 colors →
complete design system.

Pass your brand colors as anchors. Lucent UI derives all 40+ tokens automatically — hover states, subtle backgrounds, text colors, borders — using perceptual lightness and contrast ratios.

Component Library

Everything you need.
Nothing you don't.

36 components across two tiers — atoms for primitives, molecules for composed patterns. Every single one ships with a COMPONENT_MANIFEST.

19 Atoms
17 Molecules
Atoms Primitive, unstyled-friendly building blocks
Button atom
Badge atom
Avatar atom
Input atom
Textarea atom
Spinner atom
Divider atom
Checkbox atom
Radio atom
Toggle atom
Select atom
Tag atom
Tooltip atom
Icon atom
Text atom
NavLink atom
Slider atom
CodeBlock atom
Table atom
Molecules Composed patterns for real product interfaces
FormField molecule
SearchInput molecule
Card molecule
Alert molecule
EmptyState molecule
Skeleton molecule
Breadcrumb molecule
Tabs molecule
Collapsible molecule
PageLayout molecule
DataTable molecule
CommandPalette molecule
MultiSelect molecule
DatePicker molecule
DateRangePicker molecule
FileUpload molecule
Timeline molecule
MCP Server

Connect your AI
in one line.

Lucent UI ships an MCP (Model Context Protocol) server. Point your AI assistant at it and it gains full access to every component manifest, theme anchors spec, and usage examples — without touching your project source.

Claude
Cursor
GitHub Copilot
claude_desktop_config.json or cursor settings.json
// Add to mcpServers: { "mcpServers": { "lucent-ui": { "command": "npx", "args": ["lucent-ui-mcp"] } } }
Component manifests
All props, variants, design intent, and usage examples for every component
ThemeAnchors spec
Machine-readable guidance so the AI generates correct createTheme() calls
Zero hallucinations
The AI only uses prop names and values that actually exist in the library