Components

Luna provides accessible UI components following WAI-ARIA Authoring Practices Guide (APG) patterns.

Each component includes:

Semantic HTML with proper ARIA attributes
Keyboard navigation following APG recommendations
BEM class names for consistent styling
CSS variables for theming (light/dark mode)

Component Variants

Variant	Description
Headless	Behavior + attributes only, bring your own DOM
Styled	Complete UI with BEM classes and theme CSS

Interactive Demos

Component	Description
Accordion	Expandable sections
Alert	Status messages with severity levels
Checkbox	Checkbox with check/unchecked/indeterminate
Disclosure	Show/hide content toggle
Meter	Value display in range
Radio	Single selection from options
Spinbutton	Numeric input with buttons
Switch	Toggle switches with on/off states
Table	Sortable data table
Tabs	Tabbed content interface
Toolbar	Action button toolbar
Tree View	Hierarchical list navigation

All Components

Styled Components

Complete UI with BEM classes and theme CSS.

Component	APG Pattern	Description
Accordion	Accordion	Expandable sections
Alert	Alert	Status messages
Checkbox	Checkbox	Tri-state checkbox
Disclosure	Disclosure	Show/hide content
Meter	Meter	Value in range
Radio Group	Radio Group	Single selection
Spinbutton	Spinbutton	Numeric input
Switch	Switch	Toggle switch
Table	Table	Data table
Tabs	Tabs	Tabbed interface
Toolbar	Toolbar	Action toolbar
Tree View	Tree View	Hierarchical data

Headless Components

Behavior + ARIA attributes only. Bring your own styles.

Component	APG Pattern	Description
Accordion	Accordion	Expandable sections
Alert	Alert	Status messages
Breadcrumb	Breadcrumb	Navigation trail
Button	Button	Click actions
Checkbox	Checkbox	Tri-state checkbox
Combobox	Combobox	Autocomplete input
Dialog	Dialog	Modal dialogs
Disclosure	Disclosure	Show/hide content
Landmarks	Landmarks	Page regions
Link	Link	Navigation links
Listbox	Listbox	Selectable list
Menu Button	Menu Button	Dropdown menu
Meter	Meter	Value in range
Radio Group	Radio Group	Single selection
Slider	Slider	Range input
Spinbutton	Spinbutton	Numeric input
Switch	Switch	Toggle switch
Table	Table	Data table
Tabs	Tabs	Tabbed interface
Toolbar	Toolbar	Action toolbar
Tooltip	Tooltip	Hover info
Tree View	Tree View	Hierarchical data

CSS Variables

All components use these CSS variables for theming:

:root {
  --background: #ffffff;
  --foreground: #1a1a1a;
  --muted: #f7f7f8;
  --muted-foreground: #666666;
  --border: #e5e5e5;
  --accent: #6366f1;
  --accent-foreground: #ffffff;
  --destructive: #ef4444;
  --warning: #f59e0b;
  --success: #10b981;
}

See Theme Variables for dark mode and customization.