Introduction

Welcome to the official NachUI documentation.

Info

NachUI is not just a set of components. It is your own Design System—open, transparent, and fully under your control.

Unlike traditional libraries that rely on closed packages or hidden abstractions, NachUI is Open Source and Open Code. This means the code is yours from the very first moment: visible, editable, and free of artificial barriers.

An Indie Project, Built from Scratch

NachUI is an independent project developed from the ground up by Ignacio "Nacho" Figueroa. It's not backed by a large company or team—it's a personal endeavor driven by a passion for creating accessible, beautiful, and truly open design systems.
Inspired by the best:
NachUI draws inspiration from exceptional projects in the ecosystem:
  • shadcn/ui — For pioneering the "copy-paste components" philosophy and proving that developers want ownership over their code
  • Base UI — For demonstrating how unstyled, accessible primitives can empower developers
  • Hero UI — For showing how modern design systems can be both beautiful and functional
While inspired by these projects, NachUI is built entirely from scratch with its own vision: a design system that's not just open source, but truly open code—where every component, token, and pattern is yours to own, modify, and extend without limits.

Why NachUI Exists

Conventional libraries work… until you need something different. Then come the wrappers, style overrides, and hacks that break consistency.
NachUI removes that pain by giving you the actual source code, along with design tokens and design patterns you can extend without limits.
The Design System is built on these fundamental principles:
  • Full Ownership: The code, tokens, and patterns live inside your project. Nothing is hidden.
  • Open Source — Open Code: Every line is transparent, editable, and auditable.
  • Unified Design Language: All components follow the same visual and compositional rules.
  • Simple Distribution: A CLI and a structured schema system make adding or creating components effortless.
  • Compound Components: Intuitive API design that gives you semantic control over every piece of a component via dot-notation (e.g., <Card.Header>).
  • Production-Ready: Modern, accessible, and cohesive values from day one.
  • AI-Native: Clear patterns, standardized code, and structured documentation built for AI tools.

Full Ownership

When you add a component from NachUI, the source code becomes part of your project.
This means:
  • Absolute Transparency: You can inspect, audit, and modify everything.
  • Total Freedom to Modify: Change APIs, styles, or internal structures without restrictions.
  • AI Integration: Since it’s Open Code, your models can understand, optimize, or extend components without barriers.
Instead of adapting to another library’s limitations, you work directly with the code you actually need.

Unified Design Language

NachUI defines a solid foundation of design tokens, composition patterns, and visual rules that apply across the system.
This ensures:
  • coherent APIs
  • consistent styles
  • uniform accessibility
  • predictable behavior
Even external integrations follow the same design language, ensuring true cohesion across your interface.
Your team learns one system.
Your AI learns one pattern.
Everything works together.

Compound Components Pattern

NachUI embraces the Compound Component pattern to provide maximum flexibility and highly readable, intuitive APIs.
Instead of configuring components by passing endless boolean flags or objects into a single monolithic component, you compose your UI using semantic, interconnected elements nested beneath a parent component.
// ❌ Monolithic approach (rigid, hard to override specific parts)
<Card title="Hello" description="World" content="This is content" />
 
// ✅ Compound Component approach (highly flexible and readable)
<Card>
  <Card.Header>
    <Card.Title>Hello</Card.Title>
    <Card.Description>World</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>This is content</p>
  </Card.Content>
</Card>
Why Compound Components?
  • Intrusive-free Customization: You can inject wrappers, adjust ordering, or add custom elements directly into the structure without needing complex renderProp overrides.
  • Clear Code Structure: Your JSX visually represents the exact DOM structure and hierarchy of the rendered component.
  • Focused Typings: Each sub-component has its own specific props, keeping your TypeScript autocomplete clean and relevant locally.
  • Shared State without Prop Drilling: The parent component implicitly shares state and context with its children, letting you focus on layout rather than state wiring.

Simple Distribution

NachUI includes a system designed to scale with your projects:
  • Component Schema: Defines dependencies, tokens, and internal structure.
  • Smart CLI: Install components with a single command. The code is copied directly into your project.
  • Extensible: Create your own collections and maintain your own visual ecosystem.
Whether using manual workflows or AI-assisted flows, everything naturally fits your Design System.

Production-Ready

Components come ready to use from day one:
  • Professional Aesthetic: Minimal, modern, and highly adaptable.
  • True Visual Consistency: Everything is designed as a system—not as isolated pieces.
  • Easy Customization: Modify tokens, styles, or props without fighting the library.
You get a solid foundation without starting from scratch, but with the full control only an Open Source project can offer.

AI-Native

NachUI is built for the era of assisted development:
  • Open, readable, standardized code
  • Repeatable patterns that AI can follow with zero ambiguity
  • Documentation tailored for both humans and models
  • Natural workflow to generate new components based on your style
By being Open Code, AI can extend your Design System without breaking its coherence.
NextComponents