Lucent UI

Stop teaching Al your component library by hand. Lucent UI MCP server for design systems

[Lucent UI @lucentuicom]

$LUCENT is launching now on @ponsdotfamily

CA : 0xb2ce93e75e348c9c8aabc7d26ba2e6bf2c8adb17

Start building with Lucent UI.

Wrap your app in LucentProvider with your brand colors and drop in a Button. createTheme() derives 40+ tokens from 9 brand-color anchors.

[Lucent UI @lucentuicom]

One import, all the context.

npm install lucent-ui

Docs: https://t.co/Br04QJmo0r
Code: https://t.co/rKCND93eUu

[Lucent UI @lucentuicom]

Why does your AI keep inventing props that don't exist?

Because it reads source code and guesses.

Lucent UI gives it a spec instead. Here's how COMPONENT_MANIFEST works 🧵

[Lucent UI @lucentuicom]

Star it, try it, break it:
https://t.co/rKCND93eUu

npm install lucent-ui

[Lucent UI @lucentuicom]

Your AI already knows your design system.

Lucent UI is an open-source React library where every component ships a machine-readable COMPONENT_MANIFEST.

So Claude, Cursor & Copilot write correct, on-brand UI the first time.

https://t.co/7V335csnz3

[Lucent UI @lucentuicom]

Docs and playground: https://t.co/Br04QJmo0r
Source: https://t.co/rKCND93eUu

[Lucent UI @lucentuicom]

your AI can write the code, but does it understand your design system?

that’s the problem lucent is trying to solve.

with machine-readable component specs, design rules, reusable patterns, and an MCP server, lucent helps AI coding tools build that actually follow your system.

[Lucent UI @lucentuicom]

building with AI should feel less complicated.

Lucent is an AI-first React component library designed to make building interfaces faster and more accessible, with 53+ components, and presets.

open source. MIT licensed. built for developers.

https://t.co/sHyiGAA2MC

[Lucent UI @lucentuicom]

3. Override exactly the tokens you want, like accentDefault and accentHover. Your AI can write any of these from the manifest.

[Lucent UI @lucentuicom]

Four ways to theme Lucent UI 🧵

[Lucent UI @lucentuicom]

2. Use a preset or the built-in gold accent with brandTokens. Or generate a full light and dark theme from one color: createTheme({ accent: '#6366f1' }).

[Lucent UI @lucentuicom]

Press Cmd+Shift+D.

LucentDevTools opens a live token editor on top of your app. Switch presets, change shape from sharp to pill, density from compact to comfortable, and watch every component follow.

[Lucent UI @lucentuicom]

Search and filter bars, solved: FilterSearch, FilterSelect, FilterMultiSelect and FilterDateRange.

[Lucent UI @lucentuicom]

Lucent UI ships fast.

v0.30 redesigned Timeline and added four Filter molecules. v0.31 brought Stepper and golden compositions. v0.34 added four new patterns and MCP design rules. Now v0.46.0 is on npm.

[Lucent UI @lucentuicom]

2nd dev buy and burned

https://t.co/jQp66OoD8T

[Lucent UI @lucentuicom]

One component library, multiple design personalities.

Lucent UI makes it easier to build consistent, customizable interfaces while helping AI coding assistants understand your design system from the start.

https://t.co/sHyiGAA2MC

[Lucent UI @lucentuicom]

Not just buttons.

CommandPalette for keyboard-driven commands. DataTable that sorts, paginates and filters. DateRangePicker, FileUpload with drag-and-drop, Timeline and Stepper. All with manifests your AI can read.

[Lucent UI @lucentuicom]

The judgment: designIntent explains when to use it, like "primary" for the single most important action, and a compositionGraph maps what it is built from.

[Lucent UI @lucentuicom]

What does your AI actually read when it imports a Lucent component? The COMPONENT_MANIFEST ↓

[Lucent UI @lucentuicom]

The API: every prop with its type, enum values and default, plus usage examples with working code.