December 14, 2024
NachUI
My design system and open-source component kit for the React ecosystem.
Posted by:
figueroaignacioFullstack Developer & Pogramming Student
After months of refining patterns, composing interfaces, and reusing ideas from my own projects… I wanted to turn all that creative chaos into something clearer, more organized, and scalable.
That’s how NachUI was born:
an open design system and an open source / open code component kit — inspired by tools like shadcn/ui, Base UI, Radix UI, and Hero UI — built with Tailwind + Framer Motion and designed specifically for React and Next.js.
an open design system and an open source / open code component kit — inspired by tools like shadcn/ui, Base UI, Radix UI, and Hero UI — built with Tailwind + Framer Motion and designed specifically for React and Next.js.
It’s not a library.
It’s not an npm package.
It’s not magic.
It’s not an npm package.
It’s not magic.
It’s real code. For you to copy, paste, modify, and own.
What makes NachUI different?
Full Ownership
You don’t install a package or rely on black-box abstractions.
Every component lives inside your codebase.
You see it, touch it, and modify it.
Every component lives inside your codebase.
You see it, touch it, and modify it.
If something doesn’t fit your needs, you simply change it — without fighting someone else’s constraints.
A Unified Design Language
All components share the same visual and technical foundations:
- consistent APIs
- cohesive styles
- predictable patterns
No more mixing pieces that don’t truly fit together.
Copy, paste, and build
It uses tools we all rely on:
- clsx
- class-variance-authority
- tailwind-merge
Integrating a component is as easy as copying a file and using it.
A Structure That Scales
Components are organized to grow alongside your project:
clean, modular, and designed to work together without friction.
clean, modular, and designed to work together without friction.
Production-ready Animations with Framer Motion
Each component includes refined animations: smooth, elegant, and performant.
An Indie Project
NachUI isn’t trying to be “the next big library.”
It’s an independent, honest project built out of love for frontend development.
It’s an independent, honest project built out of love for frontend development.
No company behind it. No marketing.
Just code, design, and the desire to share something useful.
Just code, design, and the desire to share something useful.
AI-Friendly by Design
The codebase is clear, consistent, and structured — perfect for any AI tool to:
- generate variations,
- suggest improvements,
- or create new components that follow the same system.
Why did I build it?
First, because it was fun.
Second, because I was tired of reinventing buttons, modals, and layouts from scratch.
Third, because I wanted speed, consistency, and a visual identity of my own.
And finally, because I prefer a system I control, rather than depending on another package living on npm.
NachUI is my way of creating a real, flexible, accessible, and fully open design system.
If you want to follow the progress, give feedback, or collaborate, you’re more than welcome.
This is just the beginning. ✨
This is just the beginning. ✨