Lux vs the rest

An honest comparison. Lux isn't trying to do everything — it does the SaaS UI essentials in a fraction of the size.

Bundle size

LibraryGzippedNotes
Lux
12KB
Complete CSS + JS for 40+ components
Bootstrap 5
~30KB
CSS + JS, needs Popper.js
HeroUI
~85KB
React + Tailwind required
shadcn/ui
200KB+
Per-component install, adds up fast
MUI
~90KB
Emotion + 30+ deps
Chakra UI
~65KB
Emotion + framer-motion

Feature matrix

FeatureLuxshadcnHeroUIMUIBootstrap
Zero dependencies✓CLI✗✗Popper
No build step✓✗✗✗✓
Framework-free✓ReactReactReact✓
Native dark modelight-dark()classclassthemeattr
Semantic HTML✓divdivdivpartial
CDN-ready2 lines✗✗✗✓
AccessibilityAAAAAAAA+AAAA
Component themingCSS varsCSS varsThemeThemeSass
Command palette✓cmdk pkg✗✗✗
SSR support✓✓✓complex✓
Tree-shakablePer-file✓✓✓module

When to pick Lux

✓ Pick Lux if

  • Bundle size is a real constraint
  • You're building a marketing site, landing page, or admin panel
  • You want one consistent design across multi-stack projects
  • You're sick of fighting Tailwind's class soup
  • You want native HTML elements that just look good
  • You need to ship the same UI to React, Vue, Astro, plain HTML

✗ Pick something else if

  • You need 100+ pre-built React components today
  • Your team is committed to a specific framework's ecosystem
  • You need date pickers and complex grids out of the box (use AG Grid, etc.)
  • You want to deeply customize every render — copy-paste from shadcn instead

Migration guides

Coming from another library? Here's the rough mental model:

From shadcn/ui

Replace JSX wrappers with raw HTML + data-variant. Drop your components/ui/* folder. ~80% size reduction.

From Tailwind UI

Replace 15-class strings with semantic class names or pure HTML. Keep Tailwind for layout if you want — Lux doesn't conflict.

From Bootstrap

Class names are different but the mental model is similar. Lux is half the size with native dark mode and modern aesthetics.