v0.46.0 — Now on npm

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 MCP Server Design Rules Composition Patterns createTheme() DevTools 53+ Components 12 Patterns 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.

16 Props documented
15 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" }, … 14 more props ], "usageExamples": [ { "title": "Primary action", "code": "<Button variant=\"primary\">…</Button>" }, … 14 more examples ], "accessibility": { "role": "button", "ariaAttributes": ["aria-disabled", "aria-busy"] } };
Theming

One line,
any design.

Pick a curated preset or derive your own system from 9 brand colors. Your AI reads the manifest, writes one prop, and your entire app transforms.

10 design presets Curated bundles of palette, shadow, shape, and density — from Brutalist to Liquid Glass.
LucentDevTools Live token editor — tweak every design decision in real time. Toggle with Cmd+Shift+D.
createTheme() Pass 9 brand colors as anchors — Lucent derives all 40+ tokens using perceptual contrast.
Component Library

Everything you need.
Nothing you don't.

53 components across two tiers, plus 12 composition patterns for real-world UI layouts. Every component ships with a COMPONENT_MANIFEST.

28 Atoms
25 Molecules
12 Patterns
Atoms Primitive, unstyled-friendly building blocks
Button atom
ButtonGroup atom
SplitButton atom
Badge atom
Avatar atom
Input atom
Textarea atom
Spinner atom
Divider atom
Checkbox atom
Radio atom
Toggle atom
Select atom
Tag atom
Chip atom
Tooltip atom
Icon atom
Text atom
NavLink atom
Slider atom
Progress atom
CodeBlock atom
ColorPicker atom
ColorSwatch atom
SegmentedControl atom
Table atom
Stack atom
Row 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
Menu molecule
NavMenu molecule
CommandPalette molecule
MultiSelect molecule
DatePicker molecule
DateRangePicker molecule
FileUpload molecule
Timeline molecule
Toast molecule
Stepper molecule
FilterSearch molecule
FilterSelect molecule
FilterMultiSelect molecule
FilterDateRange molecule
Patterns Real-world composition templates with working code, variants, and design notes
Profile Card pattern
Settings Panel pattern
Stats Row pattern
Action Bar pattern
Form Layout pattern
Empty State Card pattern
Collapsible Card pattern
Search / Filter Bar pattern
Product / Item Card pattern
Announcement Card pattern
Confirmation Dialog pattern
Bulk Action Bar pattern
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, design rules, composition patterns, and theme spec — 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
Design rules
Spacing scale, typography hierarchy, button pairing, and layout patterns — injected into the AI's system prompt automatically
Composition patterns
12 real-world UI templates — product cards, confirmation dialogs, bulk action bars — with structure trees, working code, and variants
Zero hallucinations
The AI only uses prop names, variants, and layout patterns that actually exist in the library