Saltar al contenido principal

Instalación

Integra NachUI en tu proyecto de React en menos de dos minutos. Instala dependencias, configura Tailwind y copia el código fuente.

Requisitos previos
Antes de comenzar, asegúrate de tener instalado:
  • React 18+ or Next.js 15+
  • TypeScript
  • Tailwind CSS v3+
  • Node.js 18+

Instalación paso a paso

Configura Tailwind CSS

Si aún no tienes Tailwind CSS instalado, sigue la guía oficial:

Instala las dependencias requeridas

NachUI requiere las siguientes librerías para funcionar correctamente:
npm install install motion clsx tailwind-merge class-variance-authority lucide-react
Estas librerías son utilizadas para:
  • motion: Animaciones fluidas y transiciones (Framer Motion)
  • clsx: Construcción condicional de clases CSS
  • tailwind-merge: Fusión inteligente de clases de Tailwind
  • class-variance-authority: Gestión de variantes de componentes
  • lucide-react: Iconos utilizados en los componentes

Configura la función cn

Crea un archivo de utilidades para la función cn que combinará clases de CSS:
lib/cn.ts
1import { clsx, type ClassValue } from 'clsx';
2import { twMerge } from 'tailwind-merge';
3 
4export function cn(...inputs: ClassValue[]) {
5  return twMerge(clsx(inputs));
6}
Esta función es utilizada por todos los componentes de NachUI para fusionar clases de Tailwind de manera inteligente.

Agrega las variables CSS

Agrega las variables de color en tu archivo CSS global (típicamente globals.css o app.css):
1@import 'tailwindcss';
2@custom-variant dark (&:where(.dark, .dark *));
3 
4:root {
5  --background: oklch(99.405% 0.00011 271.152);
6  --foreground: oklch(0% 0 0);
7  --card: oklch(99.405% 0.00011 271.152);
8  --card-foreground: oklch(0% 0 0);
9  --popover: oklch(99.107% 0.00011 271.152);
10  --popover-foreground: oklch(0% 0 0);
11  --primary: oklch(53.934% 0.2714 286.753);
12  --primary-foreground: oklch(100% 0.00011 271.152);
13  --secondary: oklch(95.4% 0.00637 255.746);
14  --secondary-foreground: oklch(13.441% 0.00002 271.152);
15  --muted: oklch(97.015% 0.00011 271.152);
16  --muted-foreground: oklch(43.861% 0.00005 271.152);
17  --accent: oklch(93.929% 0.02887 266.393);
18  --accent-foreground: oklch(54.456% 0.19041 259.501);
19  --destructive: oklch(62.902% 0.19024 23.052);
20  --destructive-foreground: oklch(100% 0.00011 271.152);
21  --border: oklch(88.09% 0.00941 258.48);
22  --input: oklch(93.1% 0.00011 271.152);
23  --ring: oklch(0% 0 0);
24  --radius: 0.625rem;
25  --grid-color: oklch(0% 0 0 / 0.04);
26  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03);
27  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.06);
28  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
29}
30 
31.dark {
32  --background: oklch(12% 0.01 260);
33  --foreground: oklch(98% 0.002 270);
34  --card: oklch(15% 0.01 260);
35  --card-foreground: oklch(98% 0.002 270);
36  --popover: oklch(10% 0.012 260);
37  --popover-foreground: oklch(98% 0.002 270);
38  --primary: oklch(61.319% 0.22952 291.745);
39  --primary-foreground: oklch(100% 0.00011 271.152);
40  --secondary: oklch(29.399% 0.01304 272.934);
41  --secondary-foreground: oklch(95.514% 0.00011 271.152);
42  --muted: oklch(29.399% 0.01304 272.934);
43  --muted-foreground: oklch(70.576% 0.00008 271.152);
44  --accent: oklch(27.95% 0.03688 260.049);
45  --primary-foreground: oklch(100% 0.00011 271.152);
46  --destructive: oklch(71.061% 0.16614 22.191);
47  --destructive-foreground: oklch(100% 0.00011 271.152);
48  --border: oklch(22% 0.01 260);
49  --input: oklch(18% 0.01 260);
50  --ring: oklch(29.968% 0.01228 258.414);
51  --grid-color: oklch(100% 0 0 / 0.02);
52  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
53  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
54  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
55}

Agregar las variables al @theme

1@theme inline {
2  --color-background: var(--background);
3  --color-foreground: var(--foreground);
4  --color-card: var(--card);
5  --color-card-foreground: var(--card-foreground);
6  --color-popover: var(--popover);
7  --color-popover-foreground: var(--popover-foreground);
8  --color-primary: var(--primary);
9  --color-primary-foreground: var(--primary-foreground);
10  --color-secondary: var(--secondary);
11  --color-secondary-foreground: var(--secondary-foreground);
12  --color-muted: var(--muted);
13  --color-muted-foreground: var(--muted-foreground);
14  --color-accent: var(--accent);
15  --color-accent-foreground: var(--accent-foreground);
16  --color-destructive: var(--destructive);
17  --color-destructive-foreground: var(--destructive-foreground);
18  --color-border: var(--border);
19  --color-input: var(--input);
20  --color-ring: var(--ring);
21  --radius-sm: calc(var(--radius) - 0.25rem);
22  --radius-md: calc(var(--radius) - 0.125rem);
23  --radius-lg: var(--radius);
24  --radius-xl: calc(var(--radius) + 0.25rem);
25  --radius-2xl: calc(var(--radius) + 0.5rem);
26}

Estructura de Proyecto Recomendada

Aquí está la estructura de carpetas recomendada para organizar los componentes de NachUI en tu proyecto:
src
components
ui
button.tsx
card.tsx
tabs.tsx
...
header.tsx
footer.tsx
package.json
tailwind.config.ts
tsconfig.json
Directorios clave:
  • components/ui/ - Componentes de NachUI (copiados de los docs)
  • lib/ - Funciones de utilidad como cn

Cómo usar los componentes

Una vez configurado tu proyecto, puedes comenzar a copiar componentes:
  1. Navega a la página del componente que deseas usar
  2. Copia el código del componente
  3. Pégalo en tu proyecto (típicamente en components/ui/)
  4. Ajusta las rutas de importación si es necesario
  5. Personaliza el componente según tus necesidades

Próximos pasos

¿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.

Crear un Issue
AnteriorElementos de layout
SiguienteTematización
Ctrl+I