Instalación

Cómo empezar a usar I7A UI en tu proyecto.

Requisitos previos

Antes de comenzar, asegúrate de tener instalado:

  • React 18+ o Next.js 15+
  • TypeScript
  • Tailwind CSS v3+
  • Node.js 18+

Instalación paso a paso

1. Configura Tailwind CSS

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

2. Instala las dependencias requeridas

I7A UI 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

3. Configura la función cn

Crea un archivo de utilidades para la función cn que combinará clases de CSS:

lib/cn.ts
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Esta función es utilizada por todos los componentes de I7A UI para fusionar clases de Tailwind de manera inteligente.

4. Agrega las variables CSS

Agrega las variables de color en tu archivo CSS global (típicamente globals.css o app.css):

@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));
 
:root {
  --background: oklch(99.405% 0.00011 271.152);
  --foreground: oklch(0% 0 0);
  --card: oklch(99.405% 0.00011 271.152);
  --card-foreground: oklch(0% 0 0);
  --popover: oklch(99.107% 0.00011 271.152);
  --popover-foreground: oklch(0% 0 0);
  --primary: oklch(53.934% 0.2714 286.753);
  --primary-foreground: oklch(100% 0.00011 271.152);
  --secondary: oklch(95.4% 0.00637 255.746);
  --secondary-foreground: oklch(13.441% 0.00002 271.152);
  --muted: oklch(97.015% 0.00011 271.152);
  --muted-foreground: oklch(43.861% 0.00005 271.152);
  --accent: oklch(93.929% 0.02887 266.393);
  --accent-foreground: oklch(54.456% 0.19041 259.501);
  --destructive: oklch(62.902% 0.19024 23.052);
  --destructive-foreground: oklch(100% 0.00011 271.152);
  --border: oklch(88.09% 0.00941 258.48);
  --input: oklch(93.1% 0.00011 271.152);
  --ring: oklch(0% 0 0);
  --radius: 0.625rem;
  --grid-color: oklch(0% 0 0 / 0.04);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
}
 
.dark {
  --background: oklch(12% 0.01 260);
  --foreground: oklch(98% 0.002 270);
  --card: oklch(15% 0.01 260);
  --card-foreground: oklch(98% 0.002 270);
  --popover: oklch(10% 0.012 260);
  --popover-foreground: oklch(98% 0.002 270);
  --primary: oklch(61.319% 0.22952 291.745);
  --primary-foreground: oklch(100% 0.00011 271.152);
  --secondary: oklch(29.399% 0.01304 272.934);
  --secondary-foreground: oklch(95.514% 0.00011 271.152);
  --muted: oklch(29.399% 0.01304 272.934);
  --muted-foreground: oklch(70.576% 0.00008 271.152);
  --accent: oklch(27.95% 0.03688 260.049);
  --primary-foreground: oklch(100% 0.00011 271.152);
  --destructive: oklch(71.061% 0.16614 22.191);
  --destructive-foreground: oklch(100% 0.00011 271.152);
  --border: oklch(22% 0.01 260);
  --input: oklch(18% 0.01 260);
  --ring: oklch(29.968% 0.01228 258.414);
  --grid-color: oklch(100% 0 0 / 0.02);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
}

5. Agregar las variables al @theme

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-sm: calc(var(--radius) - 0.25rem);
  --radius-md: calc(var(--radius) - 0.125rem);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 0.25rem);
  --radius-2xl: calc(var(--radius) + 0.5rem);
}

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

AnteriorComponentesSiguienteTematización
Instalación - I7A UI