Saltar al contenido

NachUI

NachUI es un monorepo con primitivas de UI, un CLI, un agente de IA y un sitio de documentación. Nada está escondido detrás de un paquete npm que no podés modificar. Te llevás los componentes, los ajustás a tu proyecto y seguís.

Sitio webRepositorio

Problema

Las librerías de UI modernas suelen priorizar la conveniencia sobre el control, obligando a los desarrolladores a trabajar con abstracciones rígidas, dependencias pesadas y limitaciones en la personalización.

Esto genera:

  • dependencia de node_modules (lock-in)
  • dificultad para escalar y personalizar componentes
  • pérdida de control sobre el código
  • problemas de mantenibilidad a largo plazo

Solución

NachUI propone un enfoque que se esta viendo mucho últimamente: un sistema de diseño basado en copy-paste y sin dependencias, donde el desarrollador es dueño total del código que utiliza.

En lugar de instalar una librería:

  • se copia el código real de los componentes
  • se adapta según las necesidades del proyecto
  • se mantiene control total sobre la arquitectura

Además, NachUI incorpora una capa de IA que mejora la experiencia del desarrollador mediante asistencia contextual y acceso inteligente a documentación y código.

Cómo funciona

  • El proyecto está estructurado como un monorepo con Turborepo
  • Se divide en:
    • UI primitives (@repo/ui)
    • Capa de IA (@repo/ai)
    • Plataforma de documentación (apps/docs)
  • Los componentes están diseñados para ser copiados directamente en otros proyectos
  • La documentación se genera con un pipeline tipado usando Velite
  • Un agente de IA integrado permite consultar documentación y código en tiempo real

Stack tecnológico

  • Arquitectura: Turborepo + pnpm (monorepo)
  • Frontend: Next.js 16 (App Router, React 19)
  • UI: Tailwind CSS v4 + Motion
  • Contenido: Velite (MDX tipado)
  • IA: Vercel AI SDK + Google Gemini
  • Tipos y validación: TypeScript + Zod
  • Tooling: ESLint, Prettier, Husky, lint-staged

Decisiones técnicas

  • Arquitectura copy-paste: elimina el lock-in y garantiza control total del código
  • Monorepo modular: separa UI, IA y documentación, facilitando escalabilidad y reutilización
  • Tailwind CSS v4: permite un sistema sin runtime, basado en variables y altamente performante
  • Velite para contenido: asegura documentación tipada sin costo en runtime
  • Capa de IA integrada: mejora la DX con respuestas contextuales y acceso directo al código
  • Diseño de componentes independientes: cada componente es reutilizable, legible y fácil de adaptar
  • Tooling estricto: mantiene consistencia y calidad en todo el ecosistema

Desafíos y aprendizajes

  • Diseñar un sistema sin depender de distribución tradicional por npm
  • Mantener consistencia en una arquitectura basada en copy-paste
  • Escalar un monorepo con múltiples dominios (UI, IA, docs)
  • Integrar IA de forma útil y no superficial
  • Balancear rendimiento, flexibilidad y experiencia de desarrollo