Every class. Every token.
Searchable reference for the Lumora design system contract. 202+ classes, 102+ React props, 41 tokens, and 39 themes.
65 components202 classes102 props41 design tokens39 themes
Theme tokens · 41
Every token is exposed as a CSS variable on [data-lm-theme="…"]. Override per-tenant by setting the data attribute on any ancestor.
| Token | CSS variable | Type |
|---|---|---|
| color-bg | --lm-color-bg | color |
| color-surface | --lm-color-surface | color |
| color-surface-raised | --lm-color-surface-raised | color |
| color-surface-sunken | --lm-color-surface-sunken | color |
| color-text | --lm-color-text | color |
| color-muted | --lm-color-muted | color |
| color-border | --lm-color-border | color |
| color-border-strong | --lm-color-border-strong | color |
| color-primary | --lm-color-primary | color |
| color-primary-fg | --lm-color-primary-fg | color |
| color-primary-soft | --lm-color-primary-soft | color |
| color-secondary | --lm-color-secondary | color |
| color-secondary-fg | --lm-color-secondary-fg | color |
| color-accent | --lm-color-accent | color |
| color-accent-fg | --lm-color-accent-fg | color |
| color-success | --lm-color-success | color |
| color-success-fg | --lm-color-success-fg | color |
| color-warning | --lm-color-warning | color |
| color-warning-fg | --lm-color-warning-fg | color |
| color-danger | --lm-color-danger | color |
| color-danger-fg | --lm-color-danger-fg | color |
| color-info | --lm-color-info | color |
| color-info-fg | --lm-color-info-fg | color |
| color-overlay | --lm-color-overlay | color |
| color-focus-ring | --lm-color-focus-ring | color |
| radius-sm | --lm-radius-sm | radius |
| radius-md | --lm-radius-md | radius |
| radius-lg | --lm-radius-lg | radius |
| radius-xl | --lm-radius-xl | radius |
| radius-2xl | --lm-radius-2xl | radius |
| shadow-sm | --lm-shadow-sm | shadow |
| shadow-md | --lm-shadow-md | shadow |
| shadow-lg | --lm-shadow-lg | shadow |
| shadow-xl | --lm-shadow-xl | shadow |
| shadow-glow | --lm-shadow-glow | shadow |
| ease-out | --lm-ease-out | motion |
| ease-spring | --lm-ease-spring | motion |
| duration-fast | --lm-duration-fast | motion |
| duration-base | --lm-duration-base | motion |
| duration-slow | --lm-duration-slow | motion |
| density | --lm-density | scalar |
Built-in themes · 39
Lumora Lightlight
data-lm-theme="lumora-light"Lumora Darkdark
data-lm-theme="lumora-dark"Slate Boardroomlight
data-lm-theme="slate-boardroom"Slate Boardroom Darkdark
data-lm-theme="slate-boardroom-dark"Cobalt Officelight
data-lm-theme="cobalt-office"Cobalt Office Darkdark
data-lm-theme="cobalt-office-dark"Emerald Ledgerlight
data-lm-theme="emerald-ledger"Emerald Ledger Darkdark
data-lm-theme="emerald-ledger-dark"Indigo Enterpriselight
data-lm-theme="indigo-enterprise"Indigo Enterprise Darkdark
data-lm-theme="indigo-enterprise-dark"Rose Compliancelight
data-lm-theme="rose-compliance"Rose Compliance Darkdark
data-lm-theme="rose-compliance-dark"Amber Opslight
data-lm-theme="amber-ops"Amber Ops Darkdark
data-lm-theme="amber-ops-dark"Teal Systemslight
data-lm-theme="teal-systems"Teal Systems Darkdark
data-lm-theme="teal-systems-dark"Graphite Commandlight
data-lm-theme="graphite-command"Graphite Command Darkdark
data-lm-theme="graphite-command-dark"Violet Suitelight
data-lm-theme="violet-suite"Violet Suite Darkdark
data-lm-theme="violet-suite-dark"Sky Analyticslight
data-lm-theme="sky-analytics"Sky Analytics Darkdark
data-lm-theme="sky-analytics-dark"Neutral Densitylight
data-lm-theme="neutral-density"Neutral Density Darkdark
data-lm-theme="neutral-density-dark"Sunsetlight
data-lm-theme="sunset"Sunset Darkdark
data-lm-theme="sunset-dark"Mintlight
data-lm-theme="mint"Mint Darkdark
data-lm-theme="mint-dark"Berrylight
data-lm-theme="berry"Berry Darkdark
data-lm-theme="berry-dark"Oceanlight
data-lm-theme="ocean"Ocean Darkdark
data-lm-theme="ocean-dark"Mochalight
data-lm-theme="mocha"Mocha Darkdark
data-lm-theme="mocha-dark"Pastellight
data-lm-theme="pastel"Pastel Darkdark
data-lm-theme="pastel-dark"Carbondark
data-lm-theme="carbon"Solarlight
data-lm-theme="solar"Auroradark
data-lm-theme="aurora-dark"CSS classes · 202
Every class organized by component category. Click a component for full details.
Action · 3 components
| Component | Class | Description |
|---|---|---|
| Button | lm-btn | Base class — required on every button |
| Button | lm-btn-{variant} | primary | secondary | accent | success | warning | danger | info | outline | ghost | link |
| Button | lm-btn-{size} | xs | sm | md | lg | xl |
| Button | lm-btn-icon | Square icon-only button |
| Button | lm-btn-block | Full-width button |
| Button | lm-btn-loading | Show inline spinner; pairs with aria-busy |
| Button | lm-btn-group | Wrapper for adjacent buttons with shared borders |
| Button group | lm-btn-group | Inline-flex wrapper that joins .lm-btn children |
| Toggle group | lm-toggle-group | Wrapper with shared border |
| Toggle group | lm-toggle-group-item | Each pill; aria-pressed='true' = selected |
Form · 14 components
| Component | Class | Description |
|---|---|---|
| Input | lm-input | Base input |
| Input | lm-input-{size} | sm | md | lg |
| Input | lm-input-group | Joined input + addons wrapper |
| Input | lm-input-addon | Prefix or suffix slot |
| Input | lm-input-{state} | success | warning | danger |
| Textarea | lm-textarea | Multi-line input |
| Select | lm-select | Native <select> styling |
| Select | lm-select-{size} | sm | md | lg |
| Checkbox & Radio | lm-checkbox | Native checkbox |
| Checkbox & Radio | lm-radio | Native radio |
| Checkbox & Radio | lm-{control}-{size} | sm | md | lg |
| Switch | lm-switch | Native checkbox styled as switch |
| Switch | lm-switch-{size} | sm | md | lg |
| Slider | lm-slider | Native range input |
| Rating | lm-rating | Inline-flex container |
| Rating | lm-rating-star | Each star button; aria-checked='true' = filled |
| OTP / PIN | lm-otp | Inline-flex slot wrapper |
| OTP / PIN | lm-otp-slot | Single character input |
| OTP / PIN | lm-otp-separator | Visual divider between groups |
| Number input | lm-number-input | Wrapper with steppers + input |
| Tag input | lm-tag-input | Wrapper that hosts tags + an inline input |
| Dropzone | lm-dropzone | Dashed bordered drop region |
| Dropzone | lm-dropzone-title | Bold title |
| Combobox | lm-combobox | Position-relative wrapper |
| Combobox | lm-combobox-listbox | Floating options list |
| Combobox | lm-combobox-option | Each option |
| Combobox | lm-combobox-option-meta | Right-aligned meta text |
| Calendar | lm-calendar | Wrapper card |
| Calendar | lm-calendar-header | Month nav row |
| Calendar | lm-calendar-grid | 7-column day grid |
| Calendar | lm-calendar-day | Day button; data-today, data-outside, data-range |
| Date picker | lm-datepicker | Position-relative wrapper |
| Date picker | lm-datepicker-trigger | Input-like button |
| Date picker | lm-datepicker-panel | Floating calendar panel |
Display · 5 components
| Component | Class | Description |
|---|---|---|
| Badge | lm-badge | Base pill |
| Badge | lm-badge-{variant} | primary | secondary | accent | success | warning | danger | info |
| Badge | lm-badge-soft | Muted primary tint |
| Badge | lm-badge-outline | Transparent with stronger border |
| Badge | lm-badge-dot | Adds a leading colored dot |
| Badge | lm-badge-{size} | sm | md | lg |
| Tag / Chip | lm-tag | Base chip |
| Tag / Chip | lm-tag-removable | Adjusts padding for the remove button |
| Tag / Chip | lm-tag-remove | Circular dismiss button |
| Tag / Chip | lm-tag-input | Input field that hosts tags + a typeahead input |
| Avatar | lm-avatar | Base circle |
| Avatar | lm-avatar-{size} | xs | sm | md | lg | xl |
| Avatar | lm-avatar-group | Inline-flex wrapper with overlapping margins |
| Avatar | lm-avatar-stack-more | Overflow chip ('+5') |
| Avatar | lm-avatar-status | Bottom-right colored dot |
| Kbd | lm-kbd | Single key indicator |
| Code & Code block | lm-code | Inline code span |
| Code & Code block | lm-code-block | Multi-line code container |
Feedback · 6 components
| Component | Class | Description |
|---|---|---|
| Alert | lm-alert | Base callout |
| Alert | lm-alert-{tone} | info | success | warning | danger |
| Alert | lm-alert-title | Bold title row |
| Toast | lm-toast | Base toast card |
| Toast | lm-toast-{tone} | info | success | warning | danger |
| Toast | lm-toast-title | Bold title row |
| Toast | lm-toaster | Fixed bottom-right region for stacking toasts |
| Banner | lm-banner | Base banner |
| Banner | lm-banner-{tone} | info | success | warning | danger |
| Progress | lm-progress | Base track |
| Progress | lm-progress-{size} | sm | md | lg |
| Spinner | lm-spinner | Base spinner |
| Spinner | lm-spinner-{size} | sm | md | lg |
| Skeleton | lm-skeleton | Base shimmer block |
| Skeleton | lm-skeleton-text | 1em high, ideal for line text |
| Skeleton | lm-skeleton-circle | Round, for avatars |
Layout · 3 components
| Component | Class | Description |
|---|---|---|
| Card | lm-card | Base container |
| Card | lm-card-raised | Larger elevated shadow |
| Card | lm-card-flat | No shadow |
| Card | lm-card-glass | Backdrop blur surface |
| Card | lm-card-gradient | Soft primary→surface gradient |
| Card | lm-card-interactive | Hover lift + primary border |
| Card | lm-card-header / -body / -footer | Padded slot regions |
| Card | lm-card-title / -subtitle | Typography helpers |
| App shell | lm-app-shell | Top-level grid container |
| App shell | lm-app-shell-sidebar | Two-column variant |
| App shell | lm-app-main | Inner content region |
| App shell | lm-page-header | Title + actions row |
| App shell | lm-page-title / -description | Page heading typography |
| Divider | lm-divider | Horizontal line with optional centered text |
| Divider | lm-divider-vertical | 1px vertical separator |
Navigation · 7 components
| Component | Class | Description |
|---|---|---|
| Tabs | lm-tabs | Tab list container |
| Tabs | lm-tabs-pills | Rounded segmented variant |
| Tabs | lm-tab | Each tab button |
| Tabs | lm-tab-{size} | sm | md | lg |
| Segmented | lm-segmented | Sunken background container |
| Segmented | lm-segmented-item | Each option; aria-pressed='true' = active |
| Stepper | lm-stepper | Ordered list with auto counter-reset |
| Stepper | lm-step | Each step; aria-current='step' = active |
| Stepper | lm-step-complete | Renders ✓ instead of number |
| Stepper | lm-step-marker | Numbered/checked circle |
| Breadcrumbs | lm-breadcrumbs | Inline-flex trail |
| Pagination | lm-pagination | Inline-flex container |
| Pagination | lm-pagination-item | Each page link/button |
| Pagination | lm-pagination-{size} | sm | md | lg |
| Navbar | lm-navbar | Sticky top bar |
| Navbar | lm-navbar-brand | Logo + name slot |
| Sidebar | lm-sidebar | Vertical nav |
| Sidebar | lm-sidebar-section | Uppercase section header |
| Sidebar | lm-sidebar-item | Each link/button |
| Sidebar | lm-sidebar-compact | Narrow icon-only variant |
Overlay · 8 components
| Component | Class | Description |
|---|---|---|
| Modal | lm-modal | Backdrop + grid container |
| Modal | lm-modal-panel | Centered card |
| Modal | lm-modal-{size} | sm | md | lg | xl |
| Modal | lm-modal-header / -body / -footer | Slots |
| Modal | lm-modal-title | Heading typography |
| Drawer | lm-drawer | Side panel (right by default) |
| Drawer | lm-drawer-left | Anchor to left edge |
| Drawer | lm-drawer-{size} | sm | md | lg |
| Tooltip | lm-tooltip | Inline-flex anchor |
| Tooltip | lm-tooltip-content | Floating content (data-side='top|right|bottom|left') |
| Popover | lm-popover | Anchor wrapper |
| Popover | lm-popover-content | Floating card |
| Popover | lm-popover-arrow | Pointer arrow |
| Hover card | lm-hover-card | Anchor wrapper |
| Hover card | lm-hover-card-content | Preview panel |
| Dropdown | lm-dropdown | Position-relative anchor |
| Dropdown | lm-dropdown-menu | Floating menu |
| Dropdown | lm-dropdown-item | Each menu item |
| Dropdown | lm-dropdown-label | Section header |
| Dropdown | lm-dropdown-separator | 1px divider |
| Dropdown | lm-dropdown-shortcut | Right-aligned key hint |
| Context menu | lm-context-menu | Fixed-positioned menu |
| Context menu | lm-context-menu-item | Each item |
| Context menu | lm-context-menu-item-danger | Red hover |
| Context menu | lm-context-menu-shortcut | Right-aligned key |
| Command palette | lm-command | Outer card |
| Command palette | lm-command-input | Search input |
| Command palette | lm-command-list | Scrollable result list |
| Command palette | lm-command-item | Each row |
| Command palette | lm-command-group-label | Section header |
| Command palette | lm-command-empty | No-results state |
| Command palette | lm-command-footer | Keyboard hint footer |
Disclosure · 2 components
| Component | Class | Description |
|---|---|---|
| Accordion | lm-accordion | Card-styled wrapper |
| Accordion | lm-accordion-item | Each section |
| Accordion | lm-accordion-trigger | Header button (rotates ›) |
| Accordion | lm-accordion-content | Collapsible body |
| Tree | lm-tree | Root <ul> |
| Tree | lm-tree-item | Each row; aria-selected for active |
Data · 9 components
| Component | Class | Description |
|---|---|---|
| Table | lm-table | Native <table> |
| Table | lm-table-striped | Zebra rows |
| Table | lm-table-compact | Smaller padding |
| Table | lm-table-spacious | Larger padding |
| Table | lm-table-toolbar | Title + actions row |
| Table | lm-table-sort | Header sort button (aria-sort) |
| Stat | lm-stat | Tile |
| Stat | lm-stat-grid | Auto-fit grid |
| Stat | lm-stat-label / -value / -trend | Slot typography |
| Stat | lm-stat-trend-up / -down | Semantic green/red |
| Sparkline | lm-sparkline | <svg> wrapper sized to inherit currentColor |
| Sparkline | lm-sparkline-line | Stroked line path |
| Sparkline | lm-sparkline-area | Filled area path |
| Description list | lm-description-list | Two-column dl |
| Activity feed | lm-activity-feed | <ul> root |
| Activity feed | lm-activity-item | Each row |
| Activity feed | lm-activity-content | Text region |
| Activity feed | lm-activity-meta | Timestamp text |
| Timeline | lm-timeline | <ul> root |
| Timeline | lm-timeline-item | Each event row |
| Timeline | lm-timeline-dot | Glowing event marker |
| Diff | lm-diff | Bordered container |
| Diff | lm-diff-line | Single line row |
| Diff | lm-diff-line-add | Green + line |
| Diff | lm-diff-line-remove | Red − line |
| Diff | lm-diff-line-meta | @ context line |
| Inbox | lm-inbox | Outer card |
| Inbox | lm-inbox-header | Title row |
| Inbox | lm-inbox-list | Scroll region |
| Inbox | lm-inbox-item | Each notification |
| Empty state | lm-empty-state | Dashed-border centered region |
| Empty state | lm-empty-state-title | Bold title |
Media · 5 components
| Component | Class | Description |
|---|---|---|
| Carousel | lm-carousel | Wrapper |
| Carousel | lm-carousel-track | Scroll-snap row |
| Carousel | lm-carousel-item | Each slide |
| Carousel | lm-carousel-dots / -dot | Active-indicator pills |
| Split pane | lm-split | Grid wrapper |
| Split pane | lm-split-vertical | Stack vertically |
| Split pane | lm-split-handle | Drag handle |
| Chat | lm-chat | List wrapper |
| Chat | lm-chat-message | Single message row |
| Chat | lm-chat-message-self | Right-aligned (own message) |
| Chat | lm-chat-bubble | Speech bubble |
| Chat | lm-chat-meta | Timestamp + author line |
| Mention | lm-mention | @user chip with primary tint |
| Rich text toolbar | lm-rt-toolbar | Wrapper bar |
| Rich text toolbar | lm-rt-button | Each formatting button |
| Rich text toolbar | lm-rt-divider | 1px vertical divider |
Pattern · 3 components
| Component | Class | Description |
|---|---|---|
| Command bar | lm-command-bar | Title + actions toolbar |
| Filter bar | lm-filter-bar | Auto-fit input grid |
| Bulk action bar | lm-bulk-bar | Primary-tinted action ribbon |
React props · 102
| Component | Prop | Type | Default |
|---|---|---|---|
| Button | variant | Variant | default |
| Button | size | Size | md |
| Button | loading | boolean | false |
| Button | pressed | boolean | — |
| Button | iconOnly | boolean | — |
| Button | block | boolean | — |
| Button | as | ElementType | button |
| Button group | orientation | horizontal | vertical | horizontal |
| Toggle group | value | string | — |
| Toggle group | onValueChange | (value: string) => void | — |
| Badge | variant | Variant | default |
| Badge | tone | solid | soft | outline | solid |
| Badge | dot | boolean | — |
| Tag / Chip | removable | boolean | — |
| Tag / Chip | onRemove | () => void | — |
| Avatar | size | Size | md |
| Avatar | src | string | — |
| Avatar | alt | string | — |
| Avatar | fallback | string | — |
| Alert | tone | Tone | info |
| Alert | title | string | — |
| Alert | icon | ReactNode | — |
| Toast | tone | Tone | info |
| Toast | duration | number | 5000 |
| Banner | tone | Tone | info |
| Progress | value | number | — |
| Progress | max | number | 100 |
| Spinner | size | Size | md |
| Card | variant | default | raised | flat | glass | gradient | — |
| Card | interactive | boolean | — |
| Divider | orientation | horizontal | vertical | horizontal |
| Input | size | Size | md |
| Input | state | default | success | warning | danger | — |
| Input | addonStart / addonEnd | ReactNode | — |
| Textarea | rows | number | 3 |
| Textarea | resize | vertical | none | vertical |
| Select | size | Size | md |
| Checkbox & Radio | size | Size | md |
| Switch | size | Size | md |
| Slider | min | number | — |
| Slider | max | number | — |
| Slider | step | number | — |
| Slider | value | number | — |
| Rating | value | number | — |
| Rating | max | number | 5 |
| OTP / PIN | length | number | 6 |
| OTP / PIN | groups | number[] | — |
| Number input | value | number | — |
| Number input | min / max / step | number | — |
| Tag input | value | string[] | — |
| Tag input | onValueChange | (values: string[]) => void | — |
| Dropzone | accept | string | — |
| Dropzone | maxSize | number | — |
| Dropzone | multiple | boolean | — |
| Combobox | options | Option[] | — |
| Combobox | value | string | — |
| Combobox | onValueChange | (value: string) => void | — |
| Calendar | value | Date | DateRange | — |
| Calendar | mode | single | range | multiple | single |
| Date picker | value | Date | DateRange | — |
| Date picker | mode | single | range | — |
| Tabs | value | string | — |
| Tabs | size | Size | md |
| Segmented | value | string | — |
| Stepper | current | number | — |
| Stepper | orientation | horizontal | vertical | — |
| Pagination | page | number | — |
| Pagination | total | number | — |
| Pagination | size | Size | — |
| Sidebar | compact | boolean | — |
| Modal | open | boolean | — |
| Modal | size | sm | md | lg | xl | — |
| Modal | onOpenChange | (open: boolean) => void | — |
| Drawer | side | left | right | — |
| Drawer | size | sm | md | lg | — |
| Tooltip | side | top | right | bottom | left | top |
| Tooltip | delay | number | 300 |
| Popover | side | top | right | bottom | left | — |
| Popover | align | start | center | end | — |
| Hover card | openDelay | number | 700 |
| Hover card | closeDelay | number | 300 |
| Dropdown | side | top | right | bottom | left | — |
| Dropdown | align | start | center | end | — |
| Context menu | anchor | {x: number; y: number} | — |
| Command palette | open | boolean | — |
| Command palette | shortcut | string | cmd+k |
| Accordion | type | single | multiple | single |
| Accordion | defaultValue | string | string[] | — |
| Tree | data | TreeNode[] | — |
| Table | striped | boolean | — |
| Table | density | compact | comfortable | spacious | — |
| Stat | label | string | — |
| Stat | value | string | number | — |
| Stat | trend | { direction: 'up' | 'down'; label: string } | — |
| Sparkline | data | number[] | — |
| Sparkline | color | string | — |
| Inbox | items | Notification[] | — |
| Carousel | autoplay | boolean | — |
| Carousel | interval | number | — |
| Split pane | sizes | [number, number] | — |
| Split pane | minSize | number | — |
| Bulk action bar | count | number | — |