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="[email protected]" />
  <Button>Subscribe</Button>
</Card>

---
import { Button, Card, Input } from '@santi020k/lumen-astro'
---

<Card>
  <label for="email">Email</label>
  <Input id="email" type="email" placeholder="[email protected]" />
  <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>

Switch content

Try the tabs

Focus a tab and use the arrow keys to switch views.

Your workspace is ready.

No new activity today.

Tabs API and examples

Open an overlay

Try the dialog

Open help, press Escape to dismiss it, then check where focus returns.

Dialog API and examples

Native HTML behavior

Try the disclosure

Click the question or focus it and press Enter. This also works without JavaScript.

Does this need JavaScript?

Native details can open and close without the runtime.

Accordion API and examples

Copy a demo · Astro snippets assume styles and UIPrimitives are already mounted in your root layout.

---
import { Tabs, TabsList, TabsPanel, TabsTrigger } from '@santi020k/lumen-astro'
---

<Tabs initialValue="overview">
  <TabsList aria-label="Workspace view">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
  </TabsList>
  <TabsPanel value="overview">
    <p>Your workspace is ready.</p>
  </TabsPanel>
  <TabsPanel value="activity">
    <p>No new activity today.</p>
  </TabsPanel>
</Tabs>

---
import { Button, Dialog } from '@santi020k/lumen-astro'
---

<Button data-ui-dialog-trigger="workspace-help">Open workspace help</Button>
<Dialog id="workspace-help" aria-labelledby="workspace-help-title">
  <h2 id="workspace-help-title">Workspace help</h2>
  <p>Keep your team settings in one place.</p>
  <footer>
    <Button data-ui-dialog-close>Close help</Button>
  </footer>
</Dialog>

---
import { Accordion } from '@santi020k/lumen-astro'
---

<Accordion>
  <details>
    <summary>Does this need JavaScript?</summary>
    <p>Native details can open and close without the runtime.</p>
  </details>
</Accordion>