v0.30.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 createTheme() MCP Server DevTools Design Presets 52+ Components 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.

13 Props documented
12 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" }, … 11 more props ], "usageExamples": [ { "title": "Primary action", "code": "<Button variant=\"primary\">…</Button>" }, … 11 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.

52 components across two tiers, plus 8 composition recipes for real-world UI patterns. Every single one ships with a COMPONENT_MANIFEST.

28 Atoms
24 Molecules
8 Recipes
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
FilterSearch molecule
FilterSelect molecule
FilterMultiSelect molecule
FilterDateRange molecule
Recipes Real-world compositions with working code and variants
Profile Card recipe
Settings Panel recipe
Stats Row recipe
Action Bar recipe
Form Layout recipe
Empty State Card recipe
Collapsible Card recipe
Search / Filter Bar recipe
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
Composition recipes
8 real-world UI patterns — profile cards, settings panels, filter bars — with working code and variants
Zero hallucinations
The AI only uses prop names and values that actually exist in the library