Build real interfaces,
own the source.
SUI is a source-first component library. Preview components, install via CLI, and get the actual source file in your project — no black-box packages, no hidden deps.
$ npx sui add button
✓ button.tsx → components/ui/
$ npx sui add data-table
✓ data-table.tsx → components/ui/
$ npx sui add kanban-board
✓ kanban-board.tsx → components/ui/
Button
Badge
Input
Progress
68+
Components
8
Doc pages
8
Categories
What's included
Everything in one place
Primitives
Low-level UI pieces with composable APIs and full source.
Blocks
Production section templates for landing pages and dashboards.
Setups
Next.js starter kits — CRM, ERP, SaaS. One command scaffold.
Schemes
One-page site structures for agencies, portfolios, and sectors.
Theme Creator
Design tokens editor with live preview and Tailwind export.
Docs
Markdown docs that render as full pages, synced to source.
Why SUI
Built for real projects
Not a demo site — a system designed for shipping production interfaces with source control you actually own.
Browse all componentsSource-first registry
Every component ships with its real source file. No black-box package, no surprise abstractions.
CLI installer
`npx sui add <component>` copies the file directly into your project. Zero added dependencies.
Zero config
Works with Next.js, Vite, Remix, and Astro out of the box.
48+ components
From primitives to kanban boards, data grids, and notification centers.
Markdown docs
Documentation lives next to the component and renders as a full, navigable page.
Open source
Full source access. Fork it, extend it, ship it under your brand — MIT licensed.
How it works
01
Find
Open any component in the catalog — preview, source, and docs all in one view.
02
Install
Run `npx sui add <name>`. The source file lands directly in your project.
03
Ship
You own the file. Customize it, extend it, commit it. No upstream surprises.
Start building today
Browse the registry, grab what you need, and ship with confidence. Full source included — always.