NachUI

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