Change frameworks, not your design language.
One semantic class contract keeps Astro, React, and custom elements visually aligned.
AtlasPro
Thursday, July 23
Good morning, 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
123framework targets
3runtime lock-in
0ActionsFormsNavigationOverlaysData displayFeedbackLayoutBrand
Agent Skills
$
npx skills add santi020k/lumen --skill lumen-ui Detect framework Select primitives Apply tokens Verify behavior
pnpm
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astronpm
npm install @santi020k/lumen-astronpm install @santi020k/lumen-astroyarn
yarn add @santi020k/lumen-astroyarn add @santi020k/lumen-astroWith the stylesheet loaded globally, import components where you use them. Mount UIPrimitives once in your root layout only if you use interactive primitives; do not add it beside every component.
---
import { Button, Card, Input } from '@santi020k/lumen-astro'
---
<Card>
<label for="email">Email</label>
<Input id="email" type="email" placeholder="you@example.com" />
<Button>Subscribe</Button>
</Card>---
import { Button, Card, Input } from '@santi020k/lumen-astro'
---
<Card>
<label for="email">Email</label>
<Input id="email" type="email" placeholder="you@example.com" />
<Button>Subscribe</Button>
</Card>pnpm
pnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactnpm
npm install @santi020k/lumen-reactnpm install @santi020k/lumen-reactyarn
yarn add @santi020k/lumen-reactyarn add @santi020k/lumen-reactInstall the React package, load its stylesheet once, then import primitives directly. React ships the same styled markup and data contract, including data-display, overlay, form, rich text, and schedule attributes; use hooks for behavior-heavy primitives.
import { Button, Card, Input } from '@santi020k/lumen-react'
export function SubscribeForm() {
return (
<Card>
<label htmlFor="email">Email</label>
<Input id="email" type="email" placeholder="you@example.com" />
<Button>Subscribe</Button>
</Card>
)
}import { Button, Card, Input } from '@santi020k/lumen-react'
export function SubscribeForm() {
return (
<Card>
<label htmlFor="email">Email</label>
<Input id="email" type="email" placeholder="you@example.com" />
<Button>Subscribe</Button>
</Card>
)
}pnpm
pnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementsnpm
npm install @santi020k/lumen-elementsnpm install @santi020k/lumen-elementsyarn
yarn add @santi020k/lumen-elementsyarn add @santi020k/lumen-elementsInstall the Elements package, load its stylesheet once, register Lumen elements, and use lumen-* tags anywhere HTML is valid. Behavior-backed elements include overlays, context menus, select, forms, rich text, schedule, toast, DataTable, ThemeBuilder, and VirtualList.
<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-card>
<label for="email">Email</label>
<lumen-input id="email" type="email" placeholder="you@example.com"></lumen-input>
<lumen-button>Subscribe</lumen-button>
</lumen-card><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-card>
<label for="email">Email</label>
<lumen-input id="email" type="email" placeholder="you@example.com"></lumen-input>
<lumen-button>Subscribe</lumen-button>
</lumen-card>Build something considered
Your product deserves
better defaults.
Start with Lumen’s accessible primitives, then make the system unmistakably yours.