Build beautiful React apps. AI-ready from day one.
Lucent UI ships every component with a machine-readable manifest and an MCP server — so your AI agents understand your design system as well as your developers do.
AI-first manifests
Every component ships with a COMPONENT_MANIFEST — a machine-readable schema of props, variants, and usage examples.
MCP server
Run lucent-mcp and let AI assistants discover, inspect, and compose components via the Model Context Protocol.
Design tokens
Fully customizable via CSS custom properties. Override any token per-provider without touching component source.
Design personalities. One prop.
Each preset bundles palette, shape, density, shadow, and typography into a singlepresetprop. Click to preview.
4 New Patterns & MCP Design Rules
4 new patterns — ProductCard (article & team member variants), AnnouncementCard (media, system notice, promo), ConfirmationDialog (typed confirmation), BulkActionBar (minimal & extended).
MCP design rules — layout guidelines injected into the MCP system prompt with a new get_design_rules tool. DevTools presets now apply full color palettes with theme-aware light/dark variants.
Stepper & Golden Compositions
Stepper molecule — step indicator for onboarding wizards, checkout funnels, and setup sequences. Horizontal + vertical, animated checkmark, numbered steps, status badges, custom icons.
4 new patterns — PricingTable, NotificationFeed, OnboardingFlow, DashboardHeader.
6 golden compositions — interactive proof that the component system produces polished, real-world UI. Recipes tier renamed to Patterns.
Timeline Redesign & Filter Molecules
Timeline redesigned — modern activity-feed pattern with compact filled dots, inline title + date, and a new content prop for embedding rich nested blocks like Cards.
4 Filter molecules — FilterSearch (collapsible icon → input), FilterSelect (single-select button + menu), FilterMultiSelect (multi-select with chip count), FilterDateRange (date range button + calendar).
New SearchFilterBar pattern composes the Filter family into a compact toolbar with three variants: Default, Minimal, and Pipeline.
DevTools & Design Personalities
LucentDevTools — a floating panel from lucent-ui/devtools for real-time design system manipulation. Three tabs: Design, Typography, Tokens.
10 design presets via a single preset prop — Liquid Glass, Bento, Brutalist, Terminal, Soft UI, Bloom, Minimal, and more. Each bundles palette, shape, density, shadow, and font.
8 shadow presets with dark-mode-native variants that simulate light sources instead of darkening.
Composition Patterns
Ready-to-use patterns showing how components compose into production UIs — ProfileCard, SettingsPanel, StatsRow, ActionBar, FormLayout, EmptyStateCard, CollapsibleCard. Each pattern ships with working JSX, variants, and design notes.
Card & Collapsible Polish
Card gets hoverable prop for lift + glow without onClick. Collapsible adds smooth 180ms height animation, CSS hover feedback, focus-visible ring, disabled and padded props. New CollapsibleCard pattern composes both.
NavMenu
Compound API with Item, Group, Sub, Separator. Sliding highlight pill, 3 highlight states, inverse mode, hasIcons, 3 sizes.
SplitButton & ButtonGroup
SplitButton — primary action + chevron dropdown, all 7 variants, 5 sizes, composes Menu. ButtonGroup — visual grouping with flattened inner radius. Button also gets wider padding, icon-only auto-sizing, transparent outline backgrounds.