Installation

CxFul UI is designed to be highly flexible. You can install it via our CLI or manually by copying the source code.

Quick Start (Recommended)

The easiest way to add components to your project is using the cxful CLI.

1. Initialize your project

Run the init command to set up your project configuration:

npx cxful-ui init

2. Add components

Now you can add any component to your project:

npx cxful-ui add button

This will automatically:

1. Create the components/ui directory if it doesn’t exist.
2. Download the component file.
3. Install any necessary dependencies.

Manual Installation

If you prefer to manage everything yourself, follow these steps:

1. Install Dependencies

You’ll need framer-motion, lucide-react, and clsx for most components:

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

2. Configure Tailwind CSS v4 (Recommended)

In Tailwind CSS v4, configuration is done directly in your CSS files. Import Tailwind and our theme tokens in your main CSS entry point (e.g., global.css):

@import "tailwindcss";

/* If you are using our theme tokens */
@import "@cxful/tokens/tailwind.theme.css";

/* Or define your own theme directly */
@theme {
  --color-brand-500: #168bff;
  --font-inter: "Inter", sans-serif;
}

Using tailwind.config.js (Legacy / v3)

If you are using an older version of Tailwind CSS or prefer using a configuration file, you can still use our tokens by mapping them to CSS variables:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: "var(--color-brand-50)",
          500: "var(--color-brand-500)",
          900: "var(--color-brand-900)",
          // ... see tailwind.theme.css for all variables
        },
        surface: "var(--color-sf-page)",
        foreground: "var(--color-fg-solid)",
      },
      fontFamily: {
        sans: ["var(--font-inter)", "sans-serif"],
        mono: ["var(--font-dm-mono)", "monospace"],
      },
    }
  }
}

3. Copy Utilities

Create a lib/utils.ts file for styling utilities:

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

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

4. Copy Components

Browse our Components page and copy the source code of the components you need into your project.