Installation

Start building beautiful interfaces with Canx UI components.

✨ Recommendation

If you used create-canx v1.0.6+, Canx UI and Tailwind CSS are already installed and configured! You can skip this page.

Requirements

Canx UI is built on top of React and Tailwind CSS. Make sure your project meets these requirements:

React 18 or later
Tailwind CSS 3 or later
Node.js 18 or later

1. Install Package

Install the canx-ui package using your preferred package manager:

Bun (Recommended)

bash

bun add canx-ui

NPM

bash

npm install canx-ui

PNPM

bash

pnpm add canx-ui

Yarn

bash

yarn add canx-ui

2. Configure Tailwind CSS

Canx UI is designed to be compatible with both Tailwind CSS v3 and v4.

For Tailwind CSS v4

Ensure your CSS variables are defined in your global CSS. When you run init, we provide the compatible CSS variables.

You also need to ensure that your project is configured to scan the `src` directory for class names.

For Tailwind CSS v3

Update your tailwind.config.js file to scan the component files if you are not using the modular CLI (copy-paste method):

javascript

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{ts,tsx}",
    // If you installed the full package via npm:
    "./node_modules/canx-ui/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Component Setup (Recommended)

We recommend using the CLI to initialize your project. This will set up the necessary utilities (cn helper) and prepare your project for adding components.

bash

npx canx-ui init

This command creates src/lib/utils.ts.

4. Add Components

You can now add individual components to your project. This will copy the component source code to your src/components/ui directory, allowing you to fully customize them.

bash

npx canx-ui add button

This method is favored over installing the full library as it gives you complete ownership of the code and reduces bundle size.