Practical guides

Start with a product problem, not a component list.

Follow focused paths that combine Lumen primitives into real workflows, with setup, accessibility, and verification included.

Recommended first

Evaluate Lumen on one representative screen.

Forms, feedback, layout, tokens, and keyboard behavior in one bounded exercise.

Choose an outcome

15 minute build

Build and verify an accessible notification panel in Astro or React with AI coding agents, Lumen components, and focused MCP context.

Benchmark method

Measure AI token usage, tool context, retries, and accessible UI quality when comparing a component library with building from scratch.

20 minute build

Evaluate Lumen with a production-shaped account surface that includes forms, states, theming, and accessibility checks.

Interactive recipe

Compose a responsive media editor with selection, inspection, adjustments and host-owned processing states.

Integration guide

Choose the right form integration for Astro Actions, React Hook Form, or standards-based custom elements.

AI workflow

Install the portable skill and connect the MCP catalog so coding agents use real Lumen contracts.

Interactive lab

Adjust semantic roles in the browser and export a theme without creating a second component palette.

Teach with Lumen

Propose a guide or share the finished project. Specific lessons from real products make the library easier to adopt than generic announcements do.