Install the package for the application you already have.
Keep the current framework and architecture. Lumen provides a native adapter for each web target; it does not require a migration to Astro.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-elementsCompose the smallest useful settings surface.
Start from structure and behavior. The product owns persistence and request state; Lumen owns the accessible presentation contract.
---
import '@santi020k/lumen-astro/styles.css'
import { Alert, Button, Card, Field, Input, Label, Switch } from '@santi020k/lumen-astro'
---
<Card as="section" aria-labelledby="profile-title">
<h2 id="profile-title">Profile</h2>
<form data-ui-form>
<Field>
<Label for="display-name">Display name</Label>
<Input id="display-name" name="displayName" required />
</Field>
<Switch name="productUpdates">Product updates</Switch>
<Button type="submit">Save changes</Button>
</form>
<Alert role="status">Changes are saved after a successful response.</Alert>
</Card>import '@santi020k/lumen-react/styles.css'
import { Alert, Button, Card, Field, Input, Label, Switch } from '@santi020k/lumen-react'
export function ProfileSettings() {
return (
<Card as="section" aria-labelledby="profile-title">
<h2 id="profile-title">Profile</h2>
<form>
<Field>
<Label htmlFor="display-name">Display name</Label>
<Input id="display-name" name="displayName" required />
</Field>
<Switch name="productUpdates">Product updates</Switch>
<Button type="submit">Save changes</Button>
</form>
<Alert role="status">Changes are saved after a successful response.</Alert>
</Card>
)
}import '@santi020k/lumen-elements/styles.css'
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
document.querySelector('#app').innerHTML = `<lumen-card aria-labelledby="profile-title">
<h2 id="profile-title">Profile</h2>
<form>
<label for="display-name">Display name</label>
<lumen-input id="display-name" name="displayName" required></lumen-input>
<lumen-switch name="productUpdates">Product updates</lumen-switch>
<lumen-button type="submit">Save changes</lumen-button>
</form>
<lumen-alert role="status">Changes are saved after a successful response.</lumen-alert>
</lumen-card>`Connect the states your users will actually encounter.
Submitting
Disable duplicate submission, retain field values, and expose a clear progress label.
Saved
Announce success through a status region without moving keyboard focus unexpectedly.
Failed
Keep the entered values, identify the problem, and leave a direct path to retry.
Verify behavior, not just appearance.
- Keyboard
Reach every control, see focus, submit the form, and recover from invalid input without a pointer.
- Screen reader
Confirm the section heading, labels, validation messages, switch state, and save result are announced.
- Product states
Exercise initial, dirty, submitting, success, error, disabled, and destructive states.
- Responsive layout
Test narrow content and text zoom without clipping actions or hiding validation feedback.