CLI
Usa el CLI de NachUI para inicializar tu proyecto, agregar, actualizar, eliminar y listar componentes directamente desde la terminal.
El CLI de NachUI es la forma más rápida de gestionar componentes en tu proyecto. Se conecta al registro oficial e instala cada componente junto con todos los archivos que importa, con la misma estructura de carpetas que el código fuente de NachUI, así los imports entre archivos funcionan sin cambios. La guía de instalación cubre el camino manual.
Instalación
No necesitas instalar nada de forma global. Usa
pnpm dlx o npx para ejecutar el CLI bajo demanda:Comandos
init
Prepara NachUI en tu proyecto. Este es el primer comando que debes ejecutar. Se encargará de:
- Obtener los temas disponibles desde el registro y pedirte que elijas uno.
- Crear un archivo de configuración
nachui.jsonen la raíz de tu proyecto. - Agregar los tokens del tema a tu hoja de estilos (
src/app/globals.csspara Next.js,src/index.csspara Vite). - Escribir el helper
cnensrc/lib/cn.ts. - Ofrecerte instalar
clsxytailwind-merge.
pnpm dlx nachui initSi tu hoja de estilos ya tiene estilos,
init pregunta antes de reemplazarlos. La respuesta por defecto los conserva y agrega los tokens al final. Si vuelves a ejecutar init, reemplaza los tokens de la vez anterior en lugar de sumar una segunda copia. Con --yes acepta los valores por defecto sin preguntar y nunca reemplaza tus archivos.Después de ejecutar
init, tu proyecto tendrá un archivo nachui.json como este:add
Agrega uno o más componentes del registro. Requiere que exista
nachui.json (ejecuta init primero).pnpm dlx nachui add <component>Ejemplo:
pnpm dlx nachui add button¿Qué hace?
- Descarga el componente y cada archivo que importa, como
lib/cn.ts,lib/motion.tsu otro componente. - Escribe cada archivo en la carpeta de su familia dentro de
baseDir, así los imports entre ellos funcionan sin cambios. - Omite los archivos que ya son idénticos y pregunta antes de reemplazar uno que modificaste.
- Revisa los paquetes de npm que necesitan y ofrece instalar los que falten con tu gestor de paquetes (npm, pnpm, yarn o bun, detectado por tu lockfile).
Por ejemplo,
nachui add hybrids/confirm escribe:| Flag | Efecto |
|---|---|
-o, --overwrite | Reemplaza sin preguntar los archivos que difieren del registro |
-y, --yes | Sin preguntas: instala los paquetes que falten y conserva los archivos que difieren |
Un nombre que existe en más de una familia, como
tool, necesita su familia: nachui add ai/tool.Tip
Usa
pnpm dlx nachui list para ver todos los slugs de componentes disponibles.list
Lista todos los componentes disponibles actualmente en el registro de NachUI.
pnpm dlx nachui listEjemplo de salida:
Cada entrada muestra el nombre del componente, su slug (el que usas con
add, update y remove) y los paquetes de npm que importa.update
Descarga la última versión de un componente instalado y reemplaza tu archivo local.
pnpm dlx nachui update <component>Ejemplo:
pnpm dlx nachui update buttonAdvertencia
Ejecutar
update sobrescribirá tus cambios locales en ese componente. Se te pedirá
confirmación antes de aplicar la actualización.El comando:
- Verifica que el componente esté donde lo pone
add, por ejemplosrc/components/button.tsx. - Descarga el código más reciente del registro y pregunta antes de escribir.
- Agrega los archivos nuevos que importe la nueva versión y que todavía no tengas.
- Lista los archivos compartidos que difieren del registro, como
lib/cn.ts, y solo los reemplaza si aceptas, porque otros componentes también los usan.
remove
Elimina un componente instalado borrando su archivo.
pnpm dlx nachui remove <component>Ejemplo:
pnpm dlx nachui remove buttonEl comando busca el componente en cada carpeta de familia dentro de
baseDir y pide confirmación antes de borrarlo. Los archivos compartidos como lib/cn.ts se conservan, porque otros componentes pueden usarlos. Con --yes omite la confirmación.Advertencia
Esta acción no se puede deshacer. Asegúrate de que ya no necesitas el componente antes de
confirmar.
Flujo de trabajo típico
Inicializa NachUI en tu proyecto
pnpm dlx nachui initExplora los componentes disponibles
pnpm dlx nachui listAgrega un componente
pnpm dlx nachui add buttonActualiza un componente a la última versión
pnpm dlx nachui update buttonElimina un componente que ya no necesitas
pnpm dlx nachui remove buttonArchivo de configuración
init crea el archivo nachui.json, y lo necesitan los comandos add, update y remove.| Campo | Descripción |
|---|---|
style | El formato de color del tema |
baseDir | Carpeta que contiene components/, layout/, ai/, hybrids/, icons/ y lib/. Por defecto src |
tailwind.css | Ruta a la hoja de estilos que tiene los tokens del tema |
Los archivos van a
<baseDir>/<carpeta de la familia>/<nombre>: los elementos de UI a components/, los de layout a layout/, y los elementos de IA, híbridos, íconos y helpers a ai/, hybrids/, icons/ y lib/. Es la misma estructura que el código fuente de NachUI, por eso los imports relativos de cada archivo funcionan sin editarlos.Tailwind CSS v4 no tiene archivo de configuración, así que no hay nada más que indicar: el tema vive en variables CSS dentro de tu hoja de estilos.
Un
nachui.json de una versión anterior del CLI sigue funcionando. No tiene baseDir, así que los componentes van a src/. Los componentes que esa versión instaló en src/components/ui/ quedan donde están; muévelos a src/components/ si quieres que update los encuentre.Para usar un registro local o propio, define
NACHUI_API_URL, por ejemplo NACHUI_API_URL=http://localhost:3001/api/v1 npx nachui list.¿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.