Disponible para trabajar

NachUI - Open Design System for Modern Frontend Development

NachUI is a fully open design system built as a monorepo, combining UI primitives, AI-powered tooling, and a high-performance documentation platform to deliver a complete developer experience without dependency lock-in.

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