Visual guides / Product recipes

Start with an interaction that works.

Install pricing, feature previews, onboarding, or command search. Adapt their state and callbacks to your product.

Choose a recipe when you need a complete starting point. Install its source, then connect application behavior.

Loading the interactive workbench…

Start building

Load your adapter stylesheet once. Astro needs its client runtime for enhanced interactions; React manages its own lifecycle; Elements needs client registration.

---
// pnpm add @santi020k/lumen-astro
// In your root layout:
import '@santi020k/lumen-astro/styles.css'
import UIPrimitives from '@santi020k/lumen-astro/runtime'
---
<slot />
<UIPrimitives />

// pnpm add @santi020k/lumen-react
// In your application entry:
import '@santi020k/lumen-react/styles.css'

// Import components from the public package:
import { MotionGroup, VisualEffect, PromptComposer } from '@santi020k/lumen-react'

// pnpm add @santi020k/lumen-elements
// In your client entry, processed by a bundler:
import '@santi020k/lumen-elements/styles.css'
import { defineLumenElements } from '@santi020k/lumen-elements'

defineLumenElements(['MotionGroup', 'VisualEffect', 'PromptComposer'])

lumen add interactive-pricing --target astro
lumen add feature-preview --target astro
lumen add guided-onboarding --target astro
lumen add command-center --target astro

lumen add interactive-pricing --target react
lumen add feature-preview --target react
lumen add guided-onboarding --target react
lumen add command-center --target react

lumen add interactive-pricing --target elements
lumen add feature-preview --target elements
lumen add guided-onboarding --target elements
lumen add command-center --target elements

Adapter setup: Astro · React · Elements.

Before you ship

All four recipes support Astro, React, and Elements. The preview uses fictional local state.
Pricing requests a plan selection; your application owns checkout. Onboarding preserves a draft; your application owns saving it.
Command search supports Arrow keys, Home, End, Enter, and Escape. Preserve this keyboard path when adapting commands.
Astro recipes clean up before a view swap. Elements recipe modules require a bundler.
Installed recipe files are yours to edit. Keep component imports public and reuse semantic tokens.

Component reference

Find props, events, keyboard behavior, and Astro, React, and Elements examples for each primitive.

Next: Motion