Skip to main content
196

Search Lumen

Find components, APIs, guides, and recipes.

Type at least two characters to search.

GitHub

Open source196 primitives

The UI library
built for AI.

Accessible components for web and native apps, with skills and precise API guidance for your coding agent. Designed to reduce repetitive UI code and unnecessary AI context.

Build with AI Try the playgrounds
shell
pnpm add @santi020k/lumen-astro
AtlasPro
SA

Example workspace · Illustrative data

Welcome back, Santi.

Monthly revenue
$48,290

+50.9% from last month

Illustrative revenue rose from $12,000 in February to $48,290 in July
Active projects
24

8 due this week

Team healthExcellent
94%

Across 4 squads

AKJMLR+8

Performance

Revenue across the last 6 months

Feb–Jul

1 series, 6 points. Values range from $12k to $48.29k.

View chart data
CategoryRevenue
Feb$12k
Mar$24k
Apr$21k
May$36k
Jun$32k
Jul$48.29k

Recent activity

Your workspace today

AKAda joined the workspace
JMNew theme published
LRAccessibility audit passed

One system. Every surface.

components
196
product platforms
4
runtime lock-in
0
ActionsFormsNavigationOverlaysData displayFeedbackLayoutBrand

Built for AI-assisted development

Give your agent the pieces.
Keep your focus on the product.

Compose existing components, retrieve only the API guidance you need, and follow a shared design language. The portable skill and MCP catalog guide your agent from a product request to implementation and verification.

Explore the AI skill Add live MCP context

AI token usage depends on your model and task. See how we measure efficiency.

shellAgent Skills
npx skills add santi020k/lumen --skill lumen-ui
Detect framework Select primitives Apply tokens Verify behavior

The Lumen playgrounds

Great UI.
In your hands.

Get a feel for your next app. Explore real components, switch themes, and discover the patterns you’ll want to build with.

Launch web playground Get the native apps

Free & open source. No account required.

Lumen Playground on Android, showing the component catalog in dark mode
Lumen Playground on iPhone, showing an interactive release form in light mode
Real apps. Built with Lumen.

Choose your playground

Try it today. Keep the source for your next build.

React Native & Expo

Browser preview · Local app

Start in the browser. Take the Expo reference app into your own project.

Try in browserGuide & source

Store apps follow their own release schedule. For the latest workspace examples, use the local setup in each guide.

Built for every surface

One design language.
Web and three native platforms.

Share semantic color, type, spacing, motion, and component intent—then let each platform render and behave the way its users expect.

Shared foundations. Platform-native behavior. Explore shared foundations
Web

A complete toolkit for the web.

Compose complete product interfaces with the same components, tokens, and accessible interactions in your favorite web framework.

AstroReactWeb Components
Build for Web
Lumen web workspace with navigation, metric cards, a revenue chart, and a quick-add form.
Web · Lumen component canvas View full size

Designed as a system

The pieces already know
how to work together.

Production-ready controls with consistent states, spacing, motion, and behavior—composed into real interface patterns.

Browse all 196 components
Actions7 variants

Buttons, links, groups, toggles, and toolbars share one visual rhythm.

FormsValid
Semantic tokensShared roles
brandaccentsuccesswarningdanger

Theme the meaning once. Every primitive follows.

Lumen in production

One system.
Very different products.

One shared foundation, three unmistakable identities. Explore real Lumen products across desktop and mobile—not component demos, but finished experiences.

Astro Doctor website on desktop
Astro Doctor website on mobile
Desktop + mobile
Developer toolingAstro

Astro Doctor

A documentation and product site for Astro quality, security, and accessibility checks.

Experience the project
PostLens website on desktop
PostLens website on mobile
Desktop + mobile
Photo studioAstro · SwiftUI

PostLens

A photo-editing product with a public Astro site and a native SwiftUI interface.

Experience the project
Coolstead website on desktop
Coolstead website on mobile
Desktop + mobile
Mac utilityAstro · SwiftUI

Coolstead

A native Mac utility whose public site demonstrates controls and historical charts.

Experience the project

Quietly rigorous

Craft you can see.
Details you don’t have to chase.

014 platforms

Change platforms, not your design language.

One semantic token and component contract keeps web and native products recognizably aligned.

02A11y first

The accessible path is the default path.

Keyboard paths, focus management, labels, and meaningful markup are part of the primitive.

03~4 KB

Keep the interaction. Lose the weight.

Interactive Astro primitives use a tiny progressive-enhancement layer, not an app runtime.