Installation

How to get started with I7A UI in your project.

Prerequisites

Before you begin, make sure you have installed:

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

Step-by-step installation

1. Set up Tailwind CSS

If you don't have Tailwind CSS installed yet, follow the official guide:

2. Install required dependencies

I7A UI requires the following libraries to work properly:

npm install install motion clsx tailwind-merge class-variance-authority lucide-react

These libraries are used for:

  • motion: Smooth animations and transitions (Framer Motion)
  • clsx: Conditional CSS class construction
  • tailwind-merge: Smart merging of Tailwind classes
  • class-variance-authority: Component variant management
  • lucide-react: Icons used in components

3. Configure the cn function

Create a utility file for the cn function that will combine CSS classes:

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

This function is used by all I7A UI components to intelligently merge Tailwind classes.

4. Add CSS variables

Add the color variables to your global CSS file (typically globals.css or 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. Add variables to @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);
}

How to use components

Once your project is configured, you can start copying components:

  1. Navigate to the component page you want to use
  2. Copy the component code
  3. Paste it into your project (typically in components/ui/)
  4. Adjust import paths if necessary
  5. Customize the component according to your needs

Next steps

PreviousComponentsNextTheming
Installation - I7A UI