Skip to content

NachUI

NachUI is a monorepo with UI primitives, a CLI, an AI agent, and a documentation site. Nothing is hidden behind an npm package you cannot modify. You take the components, adjust them to your project, and move on.

WebsiteRepository

Problem

Modern UI libraries often prioritize convenience over control, forcing developers into rigid abstractions, heavy dependencies, and limited customization.

This leads to:

  • dependency lock-in (node_modules bloat)
  • difficulty customizing components at scale
  • loss of control over the codebase
  • poor long-term maintainability

Solution

NachUI introduces a different approach: a copy-paste, dependency-free design system where developers fully own the code they use.

Instead of installing a library, developers:

  • copy real component code
  • adapt it to their needs
  • maintain full control over their UI architecture

Additionally, NachUI integrates an AI layer to enhance developer experience through contextual assistance and real-time guidance.

How It Works

  • The project is structured as a Turborepo monorepo
  • Core parts include:
    • UI primitives (@repo/ui)
    • AI agent layer (@repo/ai)
    • Documentation platform (apps/docs)
  • Components are designed to be copied directly into user projects
  • Documentation is generated using a type-safe MDX pipeline (Velite)
  • An integrated AI agent provides contextual help and code retrieval

Tech Stack

  • Architecture: Turborepo + pnpm (monorepo)
  • Frontend: Next.js 16 (App Router, React 19)
  • UI Layer: Tailwind CSS v4 + Motion
  • Content Engine: Velite (type-safe MDX)
  • AI Integration: Vercel AI SDK + Google Gemini
  • Validation & Types: TypeScript + Zod
  • Tooling: ESLint, Prettier, Husky, lint-staged

Technical Decisions

  • Copy-paste architecture: eliminates dependency lock-in and gives full ownership to developers
  • Monorepo structure: separates concerns (UI, AI, docs) while enabling shared logic and scalability
  • Tailwind CSS v4: leverages a zero-runtime, variable-driven styling system for maximum performance
  • Velite for content: ensures type-safe documentation with no runtime overhead
  • Integrated AI layer: enhances developer experience with context-aware assistance and code retrieval
  • Component-first design: each component is independent, readable, and optimized for customization
  • Strict tooling setup: enforces consistency and code quality across the entire workspace

Challenges & Learnings

  • Designing a system without relying on traditional package distribution
  • Maintaining consistency across a copy-paste architecture
  • Structuring a scalable monorepo with multiple domains (UI, AI, docs)
  • Integrating AI in a meaningful, non-gimmicky way
  • Balancing performance, flexibility, and developer experience
NachUI | Ignacio Figueroa