Introducción

Bienvenido a la documentación oficial de NachUI.

Info

NachUI no es solo un conjunto de componentes. Es tu propio sistema de diseño, abierto, transparente y completamente bajo tu control.

A diferencia de las bibliotecas tradicionales que dependen de paquetes cerrados o abstracciones internas, NachUI es Open Source y Open Code. Eso significa que el código es tuyo desde el primer instante: visible, editable y sin barreras artificiales.

Un Proyecto Indie, Construido desde Cero

NachUI es un proyecto independiente desarrollado desde cero por Ignacio "Nacho" Figueroa. No está respaldado por una gran empresa o equipo—es un esfuerzo personal impulsado por la pasión de crear sistemas de diseño accesibles, hermosos y verdaderamente abiertos.
Inspirado por los mejores:
NachUI se inspira en proyectos excepcionales del ecosistema:
  • shadcn/ui — Por ser pionero en la filosofía de "componentes copy-paste" y demostrar que los desarrolladores quieren ser dueños de su código
  • Base UI — Por demostrar cómo los primitivos accesibles y sin estilos pueden empoderar a los desarrolladores
  • Hero UI — Por mostrar cómo los sistemas de diseño modernos pueden ser hermosos y funcionales a la vez
Aunque inspirado en estos proyectos, NachUI está construido completamente desde cero con su propia visión: un sistema de diseño que no solo es open source, sino verdaderamente open code—donde cada componente, token y patrón es tuyo para poseer, modificar y extender sin límites.

Por Qué Existe NachUI

Las librerías convencionales funcionan… hasta que necesitás algo diferente. Ahí aparecen los wrappers, los overrides de estilos y los hacks que rompen la consistencia.
NachUI elimina ese problema entregándote el código real, junto con design tokens y patrones de diseño que podés extender sin límites.
El Design System se sostiene sobre estos principios fundamentales:
  • Propiedad Total: El código, los tokens y los patrones viven en tu proyecto. Nada está oculto.
  • Open Source — Open Code: Cada línea es transparente, modificable y auditable.
  • Lenguaje de Diseño Unificado: Todos los componentes siguen las mismas reglas visuales y de composición.
  • Distribución Simple: Un CLI y un sistema de esquemas facilitan agregar o crear componentes.
  • Patrón 'Compound Components': API de diseño intuitiva que te da control semántico de cada pieza de un componente (ej. <Card.Header>).
  • Listo para Producción: Valores modernos, accesibles y coherentes desde el primer día.
  • Nativo para IA: Patrones claros, código estandarizado y documentación estructurada para herramientas de IA.

Propiedad Total

Cuando agregás un componente de NachUI, el código fuente pasa a ser parte de tu proyecto.
Esto significa:
  • Transparencia Absoluta: Podés ver, auditar y modificar todo.
  • Libertad Total de Modificación: Cambiá APIs, estilos o estructuras sin restricciones.
  • Integración con IA: Al ser Open Code, tus modelos pueden entender, optimizar o extender los componentes sin bloqueos.
En lugar de adaptarte a los límites de otra biblioteca, trabajás directamente con el código que necesitás.

Lenguaje de Diseño Unificado

NachUI define una base sólida de design tokens, patrones de composición y reglas visuales que se aplican a todo el sistema.
Esto garantiza:
  • APIs coherentes
  • estilos consistentes
  • accesibilidad uniforme
  • comportamientos previsibles
Incluso las integraciones externas se adaptan al mismo lenguaje visual, garantizando cohesión en toda tu interfaz.
Tu equipo aprende un solo sistema.
Tu IA aprende un solo patrón.
Todo funciona en conjunto.

El Patrón 'Compound Components'

NachUI adopta el patrón de Compound Components (Componentes Compuestos) para proporcionar la máxima flexibilidad y APIs altamente legibles e intuitivas.
En lugar de configurar los componentes pasando infinitos flags booleanos u objetos a un solo componente monolítico, construyes tu interfaz componiendo elementos semánticos interconectados debajó de un componente principal a través de la notación de punto (dot-notation).
// ❌ Enfoque monolítico (rígido, difícil de sobreescribir partes específicas)
<Card title="Hola" description="Mundo" content="Este es el contenido" />
 
// ✅ Enfoque Compound Component (altamente flexible y legible)
<Card>
  <Card.Header>
    <Card.Title>Hola</Card.Title>
    <Card.Description>Mundo</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>Este es el contenido</p>
  </Card.Content>
</Card>
¿Por qué Compound Components?
  • Personalización sin intrusión: Podés agregar wrappers, cambiar el orden o añadir elementos personalizados directamente en la estructura sin necesitar anulaciones complejas (como renderProps).
  • Estructura de código clara: Tu JSX representa visualmente la estructura exacta y la jerarquía que tendrá el DOM del componente.
  • Tipado enfocado: Cada sub-componente tiene sus propias props específicas, lo que mantiene el autocompletado de TypeScript limpio y localmente relevante.
  • Estado compartido sin perforación de props (Prop Drilling): El componente principal comparte implícitamente estado y contexto con sus hijos, permitiéndote enfocarte en la diagramación en vez de en enlazar estados.

Distribución Simple

NachUI incluye un sistema pensado para escalar junto a tus proyectos:
  • Esquema de Componentes: Define dependencias, tokens y estructura interna.
  • CLI Inteligente: Instalá componentes con un comando. El código se copia a tu proyecto.
  • Extensible: Creá tus propias colecciones y mantené tu propio ecosistema visual.
Ya sea con flujos manuales o asistidos por IA, todo encaja naturalmente en tu Design System.

Listo para Producción

Los componentes vienen listos para usar desde el primer día:
  • Estética Profesional: Diseño minimalista, moderno y adaptable.
  • Consistencia Visual Real: Todo está diseñado como un sistema, no como piezas aisladas.
  • Personalización Sencilla: Personalizá tokens, estilos o props sin pelearte con la biblioteca.
Obtenés una base sólida sin empezar de cero, pero con el control total que solo un proyecto Open Source puede darte.

Nativo para IA

NachUI está preparado para la era del desarrollo asistido:
  • Código abierto, legible y estandarizado
  • Patrones repetibles que la IA puede seguir sin ambigüedad
  • Documentación pensada tanto para humanos como para modelos
  • Flujo natural para generar nuevos componentes basados en tu estilo
Al ser Open Code, la IA puede extender tu Design System sin romper su coherencia.
SiguienteComponentes