Installation

How to get started with NachUI 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

NachUI 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 NachUI 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);
}

6. Recommended Project Structure

Here's the recommended folder structure for organizing NachUI components in your project:
src
components
ui
button.tsx
card.tsx
tabs.tsx
...
header.tsx
footer.tsx
package.json
tailwind.config.ts
tsconfig.json
Key directories:
  • components/ui/ - NachUI components (copied from docs)
  • lib/ - Utility functions like cn

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