Installation

Learn how to install Tailus UI React in your project.

Prerequisites

Before you begin, ensure that you have already installed Tailwind CSS in your project. If not, please follow the Tailwind CSS installation guide.

Installation

1. Install Tailus Themer

To install Tailus Themer, run the following command in your terminal:

npm install @tailus/themer tailwind-merge lucide-react

2. Update your Tailwind CSS configuration

Add the components path to your content array

module.exports = {
    content: [
        './index.html',
        './src/**/*.{js,ts,jsx,tsx}',
        './node_modules/@tailus/themer/dist/components/**/*.{js,ts}',
    ],
    theme: {
        extend: {},
    }
};

3. Add cloneElement utility

Create a file called utils.ts in your /lib directory and copy-paste the following code

mkdir src/lib && touch src/lib/utils.ts
import { twMerge } from "tailwind-merge";
import React from "react";

/**
 * Clone React element.
 * The function clones React element and adds Tailwind CSS classnames to the cloned element
 * @param element the React element to clone
 * @param classNames Tailwind CSS classnames
 * @returns { React.ReactElement } - Cloned React element
 */
export function cloneElement(element: React.ReactElement, classNames: string) {
    return React.cloneElement(element, {
        className: twMerge(element.props.className, classNames)
    });
}

4. Add paths

Add paths to your tsconfig.json file to make the import of the components easier.

{
    "compilerOptions": {
        /* Paths */
        "baseUrl": "./src",
        "paths": {
            "@tailus-ui/*": ["/components/tailus-ui/*"],
            "@lib/*": ["/lib/*"],
        }
    },
}

What’s next?

Great job! You’ve successfully installed Tailus UI in your project. Next, let’s learn how to configure your theme.