Lume

A frosted-glass React design system — components for layout, forms, overlays, data, diagnostics, agentic UI, and Dataverse / Power Platform tooling.

---

This repo contains two things — pick the right one for what you want:

	path	for
The library	src/lib/	The publishable design system. 60+ components, themable accent, focus-trapped overlays, jest-axe-asserted a11y, virtualized data tables, agentic UI surfaces. See src/lib/README.md.
The showroom	src/	A live demo site that renders every component side-by-side. Used for design + reference. Not published. Run npm run dev to open it.

Install (from npm)

npm install @allandecastro/lume react react-dom lucide-react

import "@allandecastro/lume/styles";
import { Button, LumeProvider, notify, Toaster } from "@allandecastro/lume";

export function App() {
  return (
    <LumeProvider>
      <Button variant="primary" onClick={() => notify.success("Saved")}>
        Save changes
      </Button>
      <Toaster />
    </LumeProvider>
  );
}

The lib README has the full surface: theming with two CSS variables, localization via LumeProvider, the component catalog, and the a11y / SSR / performance contracts.

Local development (this repo)

npm install
npm run dev          # showroom on http://localhost:5173 — every component live
npm test             # Vitest smoke tests (jest-axe a11y assertions included)
npm run lint         # ESLint flat config
npm run build:lib    # build the publishable library → src/lib/dist/
npm run size         # bundle-size budgets

For deeper contributor info (repo layout, lib conventions, adding a component, release flow), see CONTRIBUTING.md.

Repo layout

.
├── .github/
│   ├── workflows/             ← ci.yml (PR checks) + publish.yml (tag → npm)
│   ├── ISSUE_TEMPLATE/        ← bug + feature forms
│   └── PULL_REQUEST_TEMPLATE.md
├── src/
│   ├── lib/                   ← the publishable design system (npm-page docs here)
│   │   ├── *.tsx              ← components — one per file, named exports
│   │   ├── styles/            ← tokens.css + base.css + showroom.css (wrapped in @layer lume)
│   │   ├── __tests__/         ← Vitest + jest-axe smoke tests
│   │   ├── index.ts           ← public barrel
│   │   ├── package.json       ← name, version, peers, exports map
│   │   └── README.md          ← what npm displays
│   └── components/            ← showroom shell + sample pages
├── CHANGELOG.md
├── CONTRIBUTING.md
├── eslint.config.js
├── vite.config.ts             ← showroom dev/build config
├── vite.lib.config.ts         ← library-mode build config
└── vitest.config.ts

Publishing flow

Releases are tag-driven:

# 1. Bump src/lib/package.json#version (e.g. 0.2.0 → 0.2.1)
# 2. Move CHANGELOG.md "## [Unreleased]" → "## [0.2.1] — YYYY-MM-DD"
# 3. Commit + tag
git commit -am "release: 0.2.1"
git tag v0.2.1
git push origin main --tags

The .github/workflows/publish.yml workflow then:

1. Asserts the tag matches src/lib/package.json#version.
2. Runs the tests.
3. Builds the library.
4. Publishes @allandecastro/lume@<version> to npm with provenance.

One-time setup: an NPM_TOKEN repo secret (npm Profile → Access Tokens → Automation). Repo must be public for npm provenance to attest.

Contributing

See CONTRIBUTING.md. The short version:

• Branch off main, one concern per PR
• npm test && npm run lint && npm run build:lib && npm run size must all pass
• New components add a smoke test with axe(container) and a showroom demo
• Breaking changes get major-version bumps + a CHANGELOG.md migration note

Issues use forms:

• 🐛 Bug report
• 💡 Feature request

License

MIT — free for commercial and personal use.