Installation

1. Set up Tailwind CSS

If you haven't already, install Tailwind CSS in your project. Follow the official Tailwind CSS installation guide for your framework.

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

Configure your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind directives to your CSS file (e.g., globals.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

2. Install Dependencies

BeniUI components use a few utility libraries for better class name handling and icons. Install them with:

npm install tailwind-merge clsx lucide-react

Using yarn or pnpm? Use these commands instead:

yarn add tailwind-merge clsx lucide-react

pnpm add tailwind-merge clsx lucide-react

3. Create the cn() Utility Function

The cn() function is a helper that combines clsx and tailwind-merge to make it easy to conditionally join class names and resolve Tailwind conflicts.

Create a file at lib/utils.ts (or src/lib/utils.ts):

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

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

Example usage:

import { cn } from "@/lib/utils";

// Conditional classes
<button className={cn(
  "px-4 py-2 rounded-lg",
  isActive && "bg-blue-500 text-white",
  isDisabled && "opacity-50 cursor-not-allowed"
)}>
  Click me
</button>

// Merging with overrides (bg-red-500 wins over bg-blue-500)
<div className={cn("bg-blue-500 p-4", customClassName)}>
  {/* If customClassName = "bg-red-500", the result is "p-4 bg-red-500" */}
</div>

4. Recommended Project Structure

We recommend organizing your UI components in a dedicated folder:

your-project/
├── src/
│   ├── components/
│   │   └── ui/           # BeniUI components go here
│   │       ├── button.tsx
│   │       ├── input.tsx
│   │       ├── modal.tsx
│   │       └── index.ts  # Export all components
│   ├── lib/
│   │   └── utils.ts      # cn() utility function
│   └── app/              # Your app pages
└── tailwind.config.js

Create an index.ts barrel file to easily import multiple components:

// components/ui/index.ts
export { Button } from "./button";
export { Input } from "./input";
export { Modal } from "./modal";
// ... add more as you go