Formats & frameworks

one system, many destinations. the shared CSS contract is authored once, and each kit emits identical lucent- class names — so a designer and an engineer in any framework are reaching for the same value.

data_object Design tokens

CSS custom properties + the shared component CSS layer. the root format everything else is keyed to.

code React & Angular

typed component packages on npm. same props, same class contract, framework-idiomatic APIs.

webhook Web Components

framework-free custom elements (Lit, light DOM) for everywhere else — server-rendered apps, plain HTML.

deployed_code Blazor / Razor

a Razor Class Library on NuGet — the same lucent- classes, static-SSR friendly for ASP.NET Core.

Coverage across the system

expand_more Primitives 6 ReactAngularWeb C.BlazorTokens
Icon ✓✓✓✓✓
Tag ✓✓✓✓✓
Status tag ✓✓✓✓✓
Badge ✓✓✓✓✓
Divider ✓✓✓✓✓
Tooltip ✓✓✓✓✓
expand_more Actions 2 ReactAngularWeb C.BlazorTokens
Button ✓✓✓✓✓
Icon button ✓✓✓✓✓
expand_more Forms 9 ReactAngularWeb C.BlazorTokens
Input ✓✓✓✓✓
Inline input ✓✓✓✓✓
Checkbox ✓✓✓✓✓
Toggle ✓✓✓✓✓
Chip ✓✓✓✓✓
Select ✓✓✓✓✓
Radio group ✓✓✓✓✓
Textarea ✓✓✓✓✓
Segmented control ✓✓✓✓✓
expand_more Navigation 3 ReactAngularWeb C.BlazorTokens
Nav rail ✓✓✓✓✓
Activity bar ✓✓✓✓✓
Breadcrumbs ✓✓✓✓✓
expand_more Data display 3 ReactAngularWeb C.BlazorTokens
Avatar ✓✓✓✓✓
List ✓✓✓✓✓
Table ✓✓✓✓✓
expand_more Containers 4 ReactAngularWeb C.BlazorTokens
Card ✓✓✓✓✓
Tabs ✓✓✓✓✓
Menu ✓✓✓✓✓
Accordion ✓✓✓✓✓
expand_more Feedback 7 ReactAngularWeb C.BlazorTokens
Modal ✓✓✓✓✓
Toast ✓✓✓✓✓
Snackbar ✓✓✓✓✓
Spinner ✓✓✓✓✓
Skeleton ✓✓✓✓✓
Progress ✓✓✓✓✓
Inline notice ✓✓✓✓✓
expand_more Messaging 9 ReactAngularWeb C.BlazorTokens
Reference tag ✓✓✓✓✓
Message bubble ✓✓✓✓✓
Typing indicator ✓✓✓✓✓
Code block ✓✓✓✓✓
Prompt suggestion ✓✓✓✓✓
Composer ✓✓✓✓✓
Chat trigger ✓✓✓✓✓
Conversation row ✓✓✓✓✓
Jump to latest ✓✓✓✓✓
✓ stable β beta · planned