Skip to main content
161

Search Lumen

Find components, APIs, guides, and recipes.

Type at least two characters to search.

GitHub

Open source161 crafted primitives

Build interfaces
people want to use.

A cross-platform UI system for Web, React Native, Apple platforms, and Android. Accessible by default, beautifully tokenized, and native to every environment.

Start buildingExplore components
Web quick install
AtlasPro
SA

Example product workspace

Welcome back, Santi.

Monthly revenue
+12.4% from last month
$48,290
Active projects
8 due this week
24
Team healthExcellent
Across 4 squads
94%
AKJMLR+8

Performance

Revenue across the last 6 months

$50k$25k$0

Recent activity

Your workspace today

AKAda joined the workspace
JMNew theme published
LRAccessibility audit passed

One system. Every surface.

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

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.

Native adapters are supported for Lumen 2Explore shared foundations
Astro · React · Web Components
Full catalog

Web

Build accessible interfaces with Astro, React, or Web Components using one stylesheet, token system, and component contract.

@santi020k/lumen-{astro,react,elements}Build for Web
React Native Lumen component gallery
React Native · Expo ready
Native primitives

React Native

Use Lumen foundations and native primitives in React Native without depending on CSS, DOM behavior, or the web runtime.

@santi020k/lumen-react-nativeBuild for React Native
Apple / SwiftUI Lumen component gallery
SwiftUI · five Apple platforms
SwiftUI package

Apple / SwiftUI

Share a Lumen design language across iPhone, iPad, Mac, Apple TV, and Apple Watch while keeping SwiftUI behavior native.

LumenUIBuild for Apple
Android / Compose Lumen component gallery
Jetpack Compose · Material 3
Compose module

Android / Compose

Use the shared Lumen foundations through Jetpack Compose and Material 3 while preserving Android interaction and accessibility conventions.

com.santi020k:lumen-composeBuild for Android

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 161 components
Actions7 variants

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

FormsValid
Semantic tokens
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 qualityAstro · TypeScript

Astro Doctor

A deterministic Astro health-check toolkit spanning a CLI, ESLint plugin, editor extension, GitHub Action, docs, and agent skills.

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

PostLens

An iPhone-first visual content studio with a cinematic product story for private, on-device photo selection, enhancement, and composition.

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

Coolstead

A safety-minded native Mac utility with a calm product surface for thermal monitoring and gradual, bounded fan control.

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.

AI-native UI

Give your coding agent
the Lumen design system.

Install one portable skill for Codex, Claude Code, Cursor, Windsurf, and other Agent Skills clients. It teaches your AI to choose real Lumen primitives, respect the current framework, use semantic tokens, and verify accessible interactions.

Explore the AI skillAdd live MCP context
Agent Skills
$npx skills add santi020k/lumen --skill lumen-ui
Detect framework Select primitives Apply tokens Verify behavior