FOR SHADCN/UI · REACT · BASE UI OR RADIX
Design systems derived from serious technical visual languages. Every component, story chart, block, motion and sound follows one source. Installed with the shadcn CLI, owned in your repo.
npx shadcn@latest add https://beautiful-ui.dev/r/lumen.jsonCOMPONENTS
The shadcn components you know, installed and composed the shadcn way, drawn in each system's own light, motion and sound. Where an API goes beyond shadcn's, its page says so.
STORY CHARTS
Orbit, Breadth, Swarm, Funnel. Each one built to make a number understood in seconds and remembered after.
SYSTEMS
Each system is derived from a serious technical visual language and carried through every component, chart, block, motion and sound. Pick the one built for what you’re making.
1 system
SYSTEM · LUMEN HALOEARLY
Derived from the lit front panel of 1980s hi-fi
Customer Swarm and the system around it. Built for SaaS analytics, AI products and developer platforms.
121 pieces · 42 free
Open the systemINSTALL
One command via the shadcn CLI or MCP, and the source lands in your repo: no wrapper package, nothing phones home. Every piece ships with docs your AI reads, keyboard and screen-reader support, and motion that respects reduced-motion settings.
01ADD THE SYSTEM THEME (TOKENS AND FONTS)
npx shadcn@latest add https://beautiful-ui.dev/r/lumen.json02ADD THE CHART
npx shadcn@latest add https://beautiful-ui.dev/r/lumen-customer-swarm.jsonRadix project (a radix-*, new-york or default style)? Use this instead:
npx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-customer-swarm.json03IMPORT IT AND PASS YOUR DATA
import { CustomerSwarm } from "@/components/ui/lumen/customer-swarm";Free
42
pieces
The core components and a story chart, with no account.
Browse freeAll-Access LifetimeYour whole team
$79
for the first 20 members, then it rises
Every system and pack we ship, once, for up to 10 developers. Every component, story chart, block and template, and every system after this one.
Compare plans