The UI kit that doesn't
cost a megabyte.
46 production-ready components. Native dark mode. Theme-able with one variable. 12KB total — gzipped. Built to beat shadcn on size, not features.
Built for teams shipping at startup speed
Design language inspired by — these companies don't use Lux. Yet.
Capabilities
Everything a modern SaaS needs.
From the moment a user lands to the moment they cancel — Lux covers every screen between.
The Problem
Modern SaaS is drowning
in JavaScript.
Every UI library decision compounds. shadcn ships 200KB+ of components you copy-paste and own. Bootstrap needs class overrides. Tailwind UI requires a build pipeline. The bill gets paid by your users — in load time, bundle weight, and maintenance hell.
shadcn/ui bundle cost
Beautiful, but you're copy-pasting raw React components into your codebase. Every component you add is code you own, maintain, and debug. Your bundle grows with every checkbox you add.
Tailwind class soup
className="flex items-center justify-between px-4 py-2 rounded-lg bg-gray-50 border border-gray-200 hover:bg-gray-100 text-sm font-medium..." — this is not maintainable at scale.
Framework lock-in
Most component libraries are React-only. If you ever want to move to a different stack, or use a different tool, you're starting over. Your UI shouldn't be coupled to your framework.
Bootstrap: dead weight
Bootstrap gzips to ~22KB just for CSS — and that's before you add any JS. It's opinionated, hard to customize without fighting specificity wars, and feels dated for modern AI SaaS.
The Solution
Lux does more with less.
Much less.
Pure CSS, semantic HTML, and tiny Web Components where needed. No framework. No build step. One CDN link. Done.
| Library | Gzipped size | Bundle size | Dependencies | Build step | Framework-free | Dark mode |
|---|---|---|---|---|---|---|
| Lux ⚡ | ~37KB raw | ✓ 0 | ✓ None | ✓ Yes | ✓ CSS native | |
| shadcn/ui | 800KB+ raw | ✗ 50+ | ✗ Required | ✗ React only | ✓ Class toggle | |
| Bootstrap 5 | ~150KB raw | ✗ Popper.js | Optional | ✓ Yes | ✗ Manual | |
| Tailwind UI | Varies | ✗ Tailwind | ✗ Required | Partial | ✓ Via class | |
| MUI | ~300KB raw | ✗ 30+ | ✗ Required | ✗ React only | ✓ Theme |
Real SaaS UI
A full dashboard.
Just HTML + Lux.
Everything you see below is built with Lux components. No custom CSS needed beyond a --brand color. This is what ships in production.
All of the above: native HTML + one lux.min.css import.
Why Lux
Everything your SaaS needs.
Nothing it doesn't.
Lux is purpose-built for the SaaS products people actually ship — dashboards, admin panels, AI tools — where load time and maintainability are a first-class concern.
Semantic-first HTML
Style native <button>, <input>, <dialog>. No div soup. No class overload. Write correct HTML, get beautiful UI.
Zero runtime overhead
Pure CSS does 95% of the work. The 5KB JS handles only what CSS can't — dialogs, dropdowns, toast. No VDOM. No hydration. No cost.
Dark mode, natively
Uses CSS light-dark() — the modern standard. Follows system preference with zero JS. No .dark class thrashing, no flash of unstyled content.
Token-driven design system
Every value is a CSS custom property. Override --brand once, and the entire system — buttons, focus rings, badges, badges, alerts — recolors instantly.
Accessible by design
ARIA roles, keyboard navigation, focus management built in. Not bolted on. Tab through every component — it just works. Passes WCAG AA out of the box.
Framework agnostic
Works in plain HTML, React, Vue, Svelte, Astro, and any SSR framework. Drop in the CSS link, start writing HTML. No adapters, no wrappers, no magic.
Modular CSS layers
Built on CSS @layer — the cascade is intentional, not accidental. Customize without specificity wars. Override exactly what you need, nothing more.
AI SaaS aesthetic
Zinc palette, glass surfaces, subtle gradients — the design language of Linear, Vercel, and Raycast. Ships production-quality UI without a design team.
Components
30+ components.
One 9KB file.
Every component you need for a production SaaS. Buttons, forms, tables, dialogs, toasts, and more. All styled, all accessible, all in a single import.
feat/auth.| Model | Provider | Latency | Tokens/s | Status |
|---|---|---|---|---|
| claude-sonnet-4-6 | Anthropic | 320ms | 94 | Live |
| gpt-4o | OpenAI | 410ms | 78 | Live |
| llama-3.3-70b | Groq | 95ms | 312 | Beta |
Usage graphs here.
Configure your project.
Theming
One variable.
Entire system reacts.
Override --brand in your :root and every interactive element — buttons, focus rings, tabs, badges, alerts, progress bars — updates instantly. No config files, no theme generators.
:root { --brand: #6366f1; }
Advanced: also override --font-sans, --r (border-radius), --ease, and 30+ spacing tokens.
--brand:#7c3aed--brand:#0d9488Install
Two lines. Ship it.
CDN or npm — your call. No config file, no build step, no peer dependencies. Works in any HTML page from line one.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@suryanandx/lux/dist/lux.min.css">
<script src="https://cdn.jsdelivr.net/npm/@suryanandx/lux/dist/lux.min.js"></script>