v1.0 · Tailwind v4 pluginMIT licensedSSR-safe

A design system
teams ship with.

65 semantic components, 39 themes, motion and accessibility verified in CI. Built on a single Tailwind plugin so your bundle stays tree-shaken and your markup stays readable.

Browse 65 components Install in 2 lines

Status: WCAG AA verified in CI; Zero runtime CSS-in-JS; RTL + reduced motion built-in

API latency p95128ms

Atlas Finance

Compliance review · 7 min ago

Review

2 risk items pending

SLA expires Friday at 5 PM PT.

ALMKRS+5

Backup completed

128 GB encrypted to vault.

65Components

39Themes

41Tokens

AAWCAG

What's inside

Beyond a CSS kit. A design system you can trust.

Motion

Tactile animations baked in

Spring eases on overlays, ease-out on state changes, shimmer on skeletons. Auto-disabled under prefers-reduced-motion.

Accessibility

WCAG AA, verified in CI

Every theme passes the contrast suite. Every primitive ships keyboard states, focus rings, and ARIA semantics.

Theming

Multi-tenant from day one

41 tokens drive every surface. Switch the active theme with a single data attribute on <html>.

Surfaces

Glass, gradient, sunken

Three surface tiers and gradient variants give cards, navbars, and panels a single material language.

Enterprise primitives

What real apps need

Command palette, calendar, stepper, accordion, popover, dropzone, OTP, slider, segmented — out of the box.

Framework agnostic, typed wrappers

Plain Tailwind plugin. Optional React + Vue adapters emit the same lm-* classes with typed props.

39 production themes

One token contract. Every brand.

Switch the active theme with a single data-lm-theme attribute on <html>. Build per-tenant brands without forking your component code.

Lumora Lightlight

data-lm-theme="lumora-light"

Lumora Darkdark

data-lm-theme="lumora-dark"

Indigo Enterpriselight

data-lm-theme="indigo-enterprise"

Emerald Ledgerlight

data-lm-theme="emerald-ledger"

Rose Compliancelight

data-lm-theme="rose-compliance"

Amber Opslight

data-lm-theme="amber-ops"

Violet Suitelight

data-lm-theme="violet-suite"

Graphite Commandlight

data-lm-theme="graphite-command"

Oceanlight

data-lm-theme="ocean"

Berry Darkdark

data-lm-theme="berry-dark"

Carbondark

data-lm-theme="carbon"

Auroradark

data-lm-theme="aurora-dark"

Lumora Lightlight

data-lm-theme="lumora-light"

Lumora Darkdark

data-lm-theme="lumora-dark"

Indigo Enterpriselight

data-lm-theme="indigo-enterprise"

Emerald Ledgerlight

data-lm-theme="emerald-ledger"

Rose Compliancelight

data-lm-theme="rose-compliance"

Amber Opslight

data-lm-theme="amber-ops"

Violet Suitelight

data-lm-theme="violet-suite"

Graphite Commandlight

data-lm-theme="graphite-command"

Oceanlight

data-lm-theme="ocean"

Berry Darkdark

data-lm-theme="berry-dark"

Carbondark

data-lm-theme="carbon"

Auroradark

data-lm-theme="aurora-dark"

Browse all 39 themes →

Component map

65 primitives, 11 categories.

See the full catalog →

Action3

Button
Button group
Toggle group

Form14

Input
Textarea
Select
Checkbox & Radio
+ 10 more

Display5

Badge
Tag / Chip
Avatar
Kbd
+ 1 more

Feedback6

Alert
Toast
Banner
Progress
+ 2 more

Layout3

Card
App shell
Divider

Navigation7

Tabs
Segmented
Stepper
Breadcrumbs
+ 3 more

Overlay8

Modal
Drawer
Tooltip
Popover
+ 4 more

Disclosure2

Accordion
Tree

Data9

Table
Stat
Sparkline
Description list
+ 5 more

Media5

Carousel
Split pane
Chat
Mention
+ 1 more

Pattern3

Command bar
Filter bar
Bulk action bar

Install

Two lines. Any Tailwind v4 project.

Add the plugin to your CSS, install the package, and every lm-* class is available. No build config, no adapters required.

snippet

pnpm add @lumora-design/core
# or: npm install @lumora-design/core
# optional adapters
pnpm add @lumora-design/react   # React adapter
pnpm add @lumora-design/vue     # Vue adapter

Tailwind v4 strips unused classes — your CSS only ships what you use.

app/globals.css

/* app/globals.css */
@import "tailwindcss";
@plugin "@lumora-design/core";

app/billing/AccountCard.tsx

// app/billing/AccountCard.tsx
import { LumoraButton, LumoraCard } from "@lumora-design/react";

export function AccountCard() {
  return (
    <LumoraCard variant="glass">
      <LumoraCard.Header>
        <LumoraCard.Title>Account settings</LumoraCard.Title>
      </LumoraCard.Header>
      <LumoraCard.Body>
        <LumoraButton variant="primary">Save changes</LumoraButton>
      </LumoraCard.Body>
    </LumoraCard>
  );
}

Honest comparison

Where Lumora stands vs. the usual options.

	Lumora UI	daisyUI	shadcn/ui	Tailwind UI	Mantine
Components (CSS)	65	61	—	500+ blocks	100+
Themes	39	35	1	1	2
Typed React adapter	126 components	—	Yes	Paid	Yes
Typed Vue adapter	131 components	—	—	—	—
Motion + spring tokens	Yes	—	—	—	Yes
WCAG AA verified in CI	Yes	—	—	—	Partial
Multi-tenant theme runtime	Yes	Partial	—	—	Partial
Page-level templates	6 ready	—	Several	500+ blocks	—
License	MIT	MIT	MIT	Paid	MIT

Numbers verified against each project's documentation as of April 2026. Lumora components/themes counts come from the live exports — they update on every release.

Templates