Building interfaces should feel like creating.
Not repeating.
Every new project started with the same problem.
Navbar. Cards. Buttons. Dialogs. Animations.
We weren't building products.
We were rebuilding components. Again. Again. Again.
How it started
The Beginning
Learning, experimenting, and building every project from scratch.
Real-World Experience
Working with startups and clients taught me how products are actually built under deadlines.
The Repetition
Every project looked different, but every project started with the same components and the same repetitive work.
Spectrum UI
A simple idea: build beautiful components once, so developers can focus on building ideas instead of rebuilding interfaces.
The Mission
Creating an open-source ecosystem of world-class components and tools that developers can trust to start every project with.
Every project looked different.
The work didn't.
SaaS Application
User lists, billing portals, control panels.
Subscription
Enterprise Scale Plan
We weren't lacking creativity.
We were wasting it.
The Before (Tab Hell)
How to override layout boundary component tailwind overrides...
Configuring border beam anim colors manually...
AnimatePresence layoutId mismatch inside router layouts...
How to build the ultimate responsive modal dialog...
Warning: React has detected a layout shift inside Server Components...
Hover to trigger workflow fatigue.
The After (Spectrum UI)
Beautiful defaults. Zero NPM bloat. Copy, paste, customize.
The Philosophy
Build once.
Reuse forever.
Animation should communicate.
Not distract.
Developers deserve
beautiful defaults.
Open source should compete
with premium products.
The best components disappear
into your product.
What is Spectrum UI
A design engineering library built around the core values of speed, clarity, and control.
export function Button({ children }) {
return (
<motion.button whileTap={{ scale: 0.98 }}>
{children}
</motion.button>
)
}Zero NPM Bloat
Copy raw TypeScript code directly. Complete ownership over dependencies.
Spring Physics
Pre-tuned animations that feel native.
$npx spectrum-ui add button
✔ Added button.tsx to components/ui
CLI First
Add elements with a single terminal command.
Monochrome Palette
Clean contrast levels and beautiful dark modes by default.
Extensible styling
No vendor lock-in. Custom overrides using tailwind utilities.
<div className='border border-neutral-200 bg-white ...' />Built for AI Pairing
Structured TypeScript shapes that LLMs generate and edit flawlessly.
The Roadmap
"When I started building products, I thought the difficult part would be solving problems.
Instead, I spent years rebuilding buttons, cards, dialogs, and layouts.
The internet has millions of components. But very few feel thoughtfully crafted.
Spectrum UI exists because developers deserve better defaults.
I don't want another component library. I want a library that developers trust enough to start every project with."