Introducción
Aprende a construir, personalizar y adueñarte de tu sistema de diseño en React con NachUI.
Crea UIs. Mantén el Control.
NachUI es un kit de herramientas para sistemas de diseño, no una librería empaquetada. Te entregamos el código fuente real para que tengas control total de tus componentes.
Las librerías de componentes convencionales funcionan hasta que necesitas un comportamiento a medida. Ahí es cuando terminas escribiendo wrappers complejos, sobreescribiendo estilos y peleando con
node_modules. NachUI soluciona esto enviando el código fuente real directo a tu repositorio. Eres el dueño de los componentes, los tokens de diseño y los patrones. Personalízalos como quieras, sin límites.- Propiedad total: El código de los componentes se copia directamente en tu repositorio, permitiéndote refactorizar, depurar y personalizar sin depender de actualizaciones de terceros.
- Código abierto: Sin archivos compilados ni dependencias de caja negra; puedes auditar, rastrear y modificar cada línea de React y CSS de acuerdo a tus necesidades de seguridad y rendimiento.
- Diseño unificado: Los tokens de diseño estandarizados garantizan que cada componente copiado comparta la misma tipografía, colores y estructura, manteniendo la consistencia visual en todo tu sitio.
- Componentes compuestos: Construye interfaces complejas usando composición semántica (como
<Card.Header>), evitando componentes monolíticos sobrecargados con infinidad de flags booleanos. - Distribución vía CLI: Utiliza nuestra herramienta de terminal para descargar el código limpio directamente a tu carpeta de componentes, omitiendo el gestor de paquetes de npm.
- Nativo para IA: El código estructurado y con patrones consistentes permite que los asistentes de IA entiendan, extiendan y refactoricen tus componentes sin romper la coherencia del diseño.
Propiedad del código sobre dependencias de npm
Agregar un componente NachUI significa que el código fuente pasa a ser tuyo. Trabajas directamente con código limpio y legible que se adapta a tus requisitos.
- Inspecciona, audita y modifica cada hook y estilo.
- Cambia las APIs o estructuras de estado interno sin restricciones.
- Sin dependencias de terceros y sin esperar a que se aprueben PRs externos.
Trabaja directamente con el código que necesitas.
Compound Components
Evitá componentes monolíticos con infinitos flags booleanos. Componé tu UI usando elementos semánticos interconectados.
1// ❌ Monolítico (rígido, difícil de extender)2<Card title="Hola" description="Mundo" content="Este es el contenido" />34// ✅ Compound (flexible, legible)5<Card>6 <Card.Header>7 <Card.Title>Hola</Card.Title>8 <Card.Description>Mundo</Card.Description>9 </Card.Header>10 <Card.Content>11 <p>Este es el contenido</p>12 </Card.Content>13</Card>
Beneficios:
- Cero Intrusiones: Inyectá wrappers o elementos custom sin
renderProps. - Jerarquía Clara: El JSX coincide exacto con la estructura del DOM.
- Tipado Enfocado: Sub-componentes tienen props específicas. Autocompletado limpio en TypeScript.
- Estado Implícito: El padre comparte contexto con los hijos automáticamente.
Nativo para IA por Diseño
Dado que cada componente vive directamente en tu repositorio como código plano de React y CSS, los asistentes de IA pueden leer, extender y refactorizar tu sistema de diseño como cualquier otro archivo de tu proyecto. No hay cajas negras en
node_modules que oculten el funcionamiento interno. Los patrones limpios y estandarizados aseguran que tu asistente de IA pueda generar nuevas vistas y variaciones respetando las reglas de diseño sin perder coherencia.Todo lo que necesitas saber
¿Encontraste algo que mejorar?
¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.