Framework guide

React

React components that preserve Lumen’s shared visual contract, paired with focused hooks for dialogs, menus, selects, and other interactive patterns.

Install for React Explore hooks

Try the adapter

A working React example

React state updates the progress and feedback. Try Advance, then switch tabs with the arrow keys.

Loading the React example…

Installation

Install the React package, load its stylesheet once, then import primitives directly. React ships the same styled markup and data contract, including data-display, overlay, form, rich text, and schedule attributes; use hooks for behavior-heavy primitives.

pnpm add @santi020k/lumen-react

npm install @santi020k/lumen-react

yarn add @santi020k/lumen-react

Usage Example

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

export function SubscribeForm() {
  return (
    <Card>
      <label htmlFor="email">Email</label>
      <Input id="email" type="email" placeholder="[email protected]" />
      <Button>Subscribe</Button>
    </Card>
  )
}

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

export function SubscribeForm() {
  return (
    <Card>
      <label htmlFor="email">Email</label>
      <Input id="email" type="email" placeholder="[email protected]" />
      <Button>Subscribe</Button>
    </Card>
  )
}

Overview

React components mirror the same ui-* classes, data attributes, and prop names where React naming allows it.
DataTable renders the same structured row contract and VirtualList provides built-in fixed-height windowing.
Use React hooks such as useDialog, usePopover, useDropdownMenu, useContextMenu, useTabs, useSelect, useFormValidation, useCalendar, useInputOTP, useDateRangePicker, useRichTextEditor, useSchedule, useKanban, useResizable, useThemeBuilder, useThemeToggle, useToast, and useTooltip for behavior-heavy primitives.
Use lumen add Component --target react or lumen add recipe-name --target react when you want local .tsx starter files.

In an application with React Server Components, add 'use client' to modules that call Lumen hooks. Import the stylesheet once at the application boundary. React hooks own interactive behavior; the Astro UIPrimitives runtime is for Astro markup.

Find the behavior you need

Each hook now has a focused page with a live component preview, a copyable React example, options, and return values.

Browse all 19 React hooks