Documentation
Framework guide
Astro
The reference implementation for Lumen UI, with the complete component catalog, standalone CSS, and a tiny progressive-enhancement runtime.
- Surface
- Full
- Runtime
- ~4 KB
- Package
- Astro
Installation
With 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.
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-astroUsage Example
---
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>Overview
- Reference implementation for markup, props, standalone CSS, and progressive enhancement.
- Mount UIPrimitives once in the root layout for interactive primitives and CustomEvents.
- Use lumen add Component or lumen add recipe-name --target astro when you want local .astro starter files.
Progressive Enhancement Runtime
Interactive components like Dialogs, Popovers, Tabs, and Selects rely on a lightweight, vanilla JavaScript runtime. Mount <UIPrimitives /> once in your Astro root layout to wire up keyboard navigation, focus trapping, and disclosure state globally.
---
import { Button, Card, UIPrimitives } from '@santi020k/lumen-astro'
import '@santi020k/lumen-astro/styles.css'
---
<UIPrimitives />
<Card><Button>Save</Button></Card>---
import { Button, Card, UIPrimitives } from '@santi020k/lumen-astro'
import '@santi020k/lumen-astro/styles.css'
---
<UIPrimitives />
<Card><Button>Save</Button></Card>