Copy-paste design system. Base UI for behavior. Warm paper chrome in your repo.
Getting started · Components · Changelog
You do not consume a package. You copy the file. Base UI handles focus, keyboard, and portals. Lumen handles style: ink on paper, pills, Inter, Fraunces on the wordmark.
Architecture follows the shadcn/ui model (CVA, tokens, cn()) without its CLI or chrome. Visual language from the portfolio.
- 50+ components — forms, overlays, navigation, and native pieces (Table, Stepper, Command, Timeline…)
- Copy-paste — the source lives in
src/components/ui/ - Tokens — semantic CSS variables, light and dark, no interactive blue
- Docs — Polar / Medusa layout, API tabs, live previews, changelog
| Layer | Choice |
|---|---|
| App | Next.js 16, React 19 |
| Style | Tailwind CSS 4, CVA, cn() |
| Behavior | Base UI 1.8 |
| Theme | next-themes |
| Type | TypeScript |
git clone https://github.com/AloneDay-91/LumenUI.git
cd LumenUI
npm install
npm run devOpen http://localhost:3000. Docs live at /docs.
Node 22 is required (engines in package.json).
- Install the shared dependencies:
npm install @base-ui/react class-variance-authority clsx tailwind-merge
npm install -D tailwindcss @tailwindcss/postcss tw-animate-css- Paste the tokens from
src/app/globals.css(or the sheet on the Styles docs page). - Copy
src/lib/utils.ts. - Copy the file you need from
src/components/ui/.
| Page | What it is |
|---|---|
/docs |
Introduction |
/docs/installation |
Dependencies, tokens, cn() |
/docs/styles |
Palette, type, theming |
/docs/components/button |
First component to copy |
/docs/changelog |
Release notes |
/examples |
Composed usages, outside the docs chrome |
Latest: v0.5.0 — native components, logo favicon, full-width previews.
See src/lib/changelog.ts or the v0.5.0 tag.
github.com/AloneDay-91/LumenUI — clone it, copy what you need.