Documentation

Everything you need to integrate these Ink & Acid and Glassmorphism components into your Next.js project.

1. CLI Installation (Recommended)

The fastest way to add a component to your project is via the terminal. Using the CLI, the source code will be downloaded directly into your project and all required dependencies will be configured automatically.

npx ui-factory-cli add [component-name]

2. Manual Installation (Copy-Paste)

The UI Factory is not a traditional npm library. You don't install a black-box @ui-factory/core package. The idea is for you to own the code. If you prefer not to use the CLI, you can simply copy the source code of any component and paste it into your project.

3. Base Dependencies

Note: If you use the CLI, you can skip this step as it handles everything automatically.

If you install manually, most interactive components require Framer Motion for physics and animations, and React Icons (or Lucide React) for iconography. We also use clsx and tailwind-merge to manage classes.

npm install framer-motion lucide-react react-icons clsx tailwind-merge

4. The 'cn' utility

All components assume you have a cn() utility available at @/lib/utils.ts. If you do not have it, create the file with this code:

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

5. CSS Configuration (Tailwind v4)

This project is designed using Tailwind CSS v4. You do not need a tailwind.config.js file. All variables (like typography) are defined directly in your globals.css file.

@import "tailwindcss";

@theme {
  --font-sans: var(--font-space-grotesk);
  --font-heading: var(--font-courbe-sans); /* Optional for heavy titles */
}

/* Global Ink & Acid rules if you need them */
body {
  @apply antialiased;
}