create-imansi-app

CLI oficial del ecosistema Imansi. Creá proyectos completos con autenticación y dashboard en segundos. Vite + React + Tailwind CSS v4 + @imansi/*.

¿Qué es?

create-imansi-app es el CLI oficial para crear proyectos con el ecosistema Imansi. Ejecutás un comando y obtenés un proyecto completo con:

Autenticación funcional — Login, Registro, 2FA, recuperación de contraseña
Dashboard listo — Sidebar, header, stats, chart, tabla de usuarios
Configuración visual — 6 temas × 2 modos + sistema
Todo editable — Sin dependencias ocultas, sin node_modules intocables
Vite + React 19 + Tailwind v4
Backend preconfigurado para imansi-auth-node

En lugar de perder 2 semanas armando la base, empezás con un proyecto productivo desde el minuto cero.

Instalación

No hace falta instalarlo. Lo ejecutás directo con npx:

bash

npx create-imansi-app@latest mi-app

Si querés tenerlo instalado globalmente:

bash

npm install -g create-imansi-app
create-imansi-app mi-app

Requiere Node.js 18 o superior.

Uso

Crear en una carpeta nueva (recomendado)

bash

npx create-imansi-app@latest mi-app

Genera ./mi-app/ en la carpeta actual.

Crear en la carpeta actual

bash

mkdir mi-app
cd mi-app
npx create-imansi-app@latest --here

O con el alias .:

bash

npx create-imansi-app@latest .

Requisito: la carpeta debe estar vacía (solo se permite .git y .gitignore).

Si no está vacía, el CLI muestra un error y sale sin modificar nada.

Las 7 preguntas del CLI

Cuando ejecutás el CLI, te va a hacer 7 preguntas para configurar tu proyecto.

1. ¿Cómo se llamará tu proyecto?

Nombre de la carpeta y del package.json. Se sugiere convertirlo a título para el brandName.

◇  ¿Cómo se llamará tu proyecto?
│  mi-app

Validación: solo letras, números, guiones, puntos y guiones bajos.

2. ¿Qué querés generar?

Opción	Incluye
Auth + Dashboard	Todo: login, registro, 2FA + panel completo
Solo Auth	Login, registro, 2FA, recuperación (sin dashboard)
Solo Dashboard	Panel con auth mínima (login + 2FA)

Solo si elegiste Auth o Auth + Dashboard.

Variante	Descripción
Split	Branding a la izquierda + formulario a la derecha
Centered	Formulario centrado sin branding
Card	Card flotante sobre gradientes
Minimal	Ultra simple, todo plano

4. ¿Qué diseño de Dashboard querés?

Solo si elegiste Dashboard o Auth + Dashboard.

Variante	Descripción
Classic	Sidebar fijo 256px + header
Collapsed	Sidebar flotante 96px con solo iconos
Topbar	Sin sidebar, navegación horizontal arriba
Dual	Rail 72px + panel secundario 320px

5. ¿Qué tema querés por defecto?

Tema	Personalidad
`minimal`	Monocromo, editorial, sin color de marca
`modern`	Índigo vibrante
`compact`	Verde esmeralda, denso, para dashboards
`warm`	Serif, crema, terracota
`red`	Rojo intenso
`yellow`	Ámbar brillante

6. ¿Qué modo querés por defecto?

light — Colores claros
dark — Colores oscuros
system — Detecta la preferencia del SO

7. ¿Cuál es el nombre de tu marca?

Se usa en el título del navegador, sidebar, login, footer, etc.

◇  ¿Cuál es el nombre de tu marca?
│  Mi App

Estructura generada

Después de correr el CLI, tenés:

mi-app/
├── public/
│   └── logo.png                    ← Tu logo (reemplazalo con el tuyo)
│
├── src/
│   ├── imansi/                     ← CSS EDITABLE (toda la identidad visual)
│   │   ├── tokens.css              ← Colores, tipografía, radius, sombras
│   │   ├── themes.css              ← Overrides por tema y modo
│   │   ├── base.css                ← Reset + utilidades
│   │   ├── overrides.css           ← Auto-generado desde theme.imansi.json
│   │   └── index.css               ← Entry point de los CSS
│   │
│   ├── auth/                       ← Capa de autenticación
│   │   ├── config.js               ← Config del backend (urlBase, OAuth)
│   │   ├── AuthProvider.jsx        ← <ProveedorAutenticacion> wrapper
│   │   ├── ProtectedRoute.jsx      ← <ProtegerRuta> y <RedirigirSiAutenticado>
│   │   ├── SettingsPage.jsx        ← Página con tabs: Perfil, Contraseña, Sesiones
│   │   └── index.js
│   │
│   ├── pages/
│   │   ├── Home.jsx                ← Página pública (placeholder)
│   │   ├── DashboardPage.jsx       ← Wrapper del dashboard
│   │   ├── DashboardSettingsPage.jsx
│   │   ├── dashboard-data.jsx      ← Datos demo (stats, chart, actividad)
│   │   ├── auth/                   ← Copiados de @imansi/templates-auth
│   │   └── dashboard/              ← Copiados de @imansi/templates-dashboard
│   │
│   ├── lib/
│   │   └── imansi.js               ← Helper applyTheme / setTheme / setMode
│   │
│   ├── App.jsx                     ← Solo rutas (limpio, ~90 líneas)
│   ├── main.jsx
│   └── index.css                   ← Importa Tailwind + ./imansi/index.css
│
├── theme.imansi.json               ← Config visual (tema, modo, overrides)
├── config-imansi.json              ← Config general (marca, OAuth, variantes)
├── .env                            ← URL del backend de auth
├── index.html                      ← Título + favicon del logo
├── vite.config.js
└── package.json

Filosofía: todo lo que necesitás editar está en src/ y los 2 JSON raíz. Nunca tocás node_modules.

Personalización

Tenés 6 formas de personalizar el proyecto. Todas son independientes.

1. Cambiar el tema

Editá theme.imansi.json:

json

{
  "theme": "warm",
  "mode": "dark",
  "overrides": {}
}

Reiniciá Vite (Ctrl+C + npm run dev) y todo cambia.

2. Sobreescribir tokens

Si querés un tema existente pero con tus colores, agregá overrides:

json

{
  "theme": "modern",
  "mode": "light",
  "overrides": {
    "colorPrimary": "oklch(0.55 0.16 155)",
    "colorPrimaryForeground": "oklch(0.99 0.005 155)",
    "colorBackground": "oklch(0.98 0.008 145)",
    "colorBorder": "oklch(0.90 0.015 145)",
    "radiusMd": "1rem",
    "radiusLg": "1.5rem"
  }
}

Los overrides se aplican en runtime con especificidad máxima (ganan a todo).

Tokens sobreescribibles:

Categoría	Nombres
Colores	`colorBackground`, `colorForeground`, `colorPrimary`, `colorPrimaryForeground`, `colorSecondary`, `colorSecondaryForeground`, `colorMuted`, `colorMutedForeground`, `colorAccent`, `colorAccentForeground`, `colorDestructive`, `colorSuccess`, `colorWarning`, `colorBorder`, `colorInput`, `colorRing`, `colorCard`
Radius	`radiusSm`, `radiusMd`, `radiusLg`, `radiusXl`
Sombras	`shadowSm`, `shadowMd`, `shadowLg`
Tipografía	`fontSans`, `textDisplay`, `textH1`...`textH4`, `textBody`, `textSmall`, `textCaption`

Formato OKLCH:

oklch(lightness chroma hue)
      └─ 0-1     0-0.37 0-360

También podés usar HEX:

json

"colorPrimary": "#10b981"

3. Editar el CSS directamente

Si necesitás control total, editá los archivos CSS en src/imansi/:

tokens.css — Valores por defecto de todos los temas
themes.css — Overrides por tema y modo
base.css — Reset y utilidades .imansi-*

Los cambios CSS se aplican al instante con HMR (sin reiniciar Vite).

4. Cambiar marca y logo

config-imansi.json:

json

{
  "brandName": "Mi Empresa",
  "brandTagline": "Bienvenido a tu panel",
  "brandLogo": "/logo.png"
}

Logo: reemplazá public/logo.png con tu archivo.

5. Editar las páginas

Los templates en src/pages/ son completamente editables:

src/pages/auth/Login.jsx — Estructura del login
src/pages/auth/AuthLayout.jsx — Panel de branding
src/pages/dashboard/Sidebar.jsx — Sidebar del dashboard
src/pages/dashboard-data.jsx — Datos del dashboard (stats, chart, actividad)

6. Conectar un backend

.env — URL del backend:

env

VITE_URL_API_AUTENTICACION=http://localhost:3000

Reiniciá Vite después de cambiarla.

Backend recomendado: imansi-auth-node

Stack generado

Capa	Tecnología
Build	Vite 6
UI	React 19
Estilos	Tailwind CSS v4
Design system	`@imansi/tailwind`
Componentes	`@imansi/ui`
Auth visual	`@imansi/templates-auth`
Dashboard visual	`@imansi/templates-dashboard`
Auth lógica	`imansi-auth-react`
Routing	React Router 6
Iconos	Lucide React

Próximos pasos

Quickstart — Empezá en 10 segundos
@imansi/tailwind — El sistema de diseño
@imansi/ui — Los componentes
imansi-auth-node — El backend de auth

create-imansi-app ​

¿Qué es? ​

Instalación ​

Uso ​

Crear en una carpeta nueva (recomendado) ​

Crear en la carpeta actual ​

Las 7 preguntas del CLI ​

1. ¿Cómo se llamará tu proyecto? ​

2. ¿Qué querés generar? ​

3. ¿Qué diseño de Login querés? ​

4. ¿Qué diseño de Dashboard querés? ​

5. ¿Qué tema querés por defecto? ​

6. ¿Qué modo querés por defecto? ​

7. ¿Cuál es el nombre de tu marca? ​

Estructura generada ​

Personalización ​

1. Cambiar el tema ​

2. Sobreescribir tokens ​

3. Editar el CSS directamente ​

4. Cambiar marca y logo ​

5. Editar las páginas ​

6. Conectar un backend ​

Stack generado ​

Próximos pasos ​

create-imansi-app

¿Qué es?

Instalación

Uso

Crear en una carpeta nueva (recomendado)

Crear en la carpeta actual

Las 7 preguntas del CLI

1. ¿Cómo se llamará tu proyecto?

2. ¿Qué querés generar?

3. ¿Qué diseño de Login querés?

4. ¿Qué diseño de Dashboard querés?

5. ¿Qué tema querés por defecto?

6. ¿Qué modo querés por defecto?

7. ¿Cuál es el nombre de tu marca?

Estructura generada

Personalización

1. Cambiar el tema

2. Sobreescribir tokens

3. Editar el CSS directamente

4. Cambiar marca y logo

5. Editar las páginas

6. Conectar un backend

Stack generado

Próximos pasos