Framework guide

Astro

The reference implementation for Lumen UI, with the complete component catalog, standalone CSS, and a tiny progressive-enhancement runtime.

Install for Astro Browse components

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-astro

pnpm add @santi020k/lumen-astro

npm

npm install @santi020k/lumen-astro

npm install @santi020k/lumen-astro

yarn

yarn add @santi020k/lumen-astro

yarn add @santi020k/lumen-astro

Usage 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 } from '@santi020k/lumen-astro'
import UIPrimitives from '@santi020k/lumen-astro/runtime'
import '@santi020k/lumen-astro/styles.css'
---

<UIPrimitives />
<Card><Button>Save</Button></Card>

---
import { Button, Card } from '@santi020k/lumen-astro'
import UIPrimitives from '@santi020k/lumen-astro/runtime'
import '@santi020k/lumen-astro/styles.css'
---

<UIPrimitives />
<Card><Button>Save</Button></Card>