Installation

How to get started with UI Beats.

1. Browse the Components

Visit the UI Beats component library and explore the various components available.

2. Add the utility function

This step is optional and only needed if your component from UI Beats uses the `cn` utility function.

npm i clsx tailwind-merge

import {type ClassValue, clsx} from "clsx";
import {twMerge} from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

3. Copy the Code

Once you find a component you need, simply copy the code provided.

4. Paste into Your Project

Paste the copied code into your project files. Ensure that you have the necessary dependencies installed (React, TypeScript, Tailwind CSS, and Framer Motion).

5. Customize

Customize the component to fit your project's design and functionality requirements. The code is now yours to modify as needed.

Dependencies Installation

If you're using a React project with TypeScript and Tailwind CSS, you can easily integrate UI Beats components. Make sure you have the following dependencies installed:

npm install react react-dom typescript tailwindcss framer-motion

Add Tailwind CSS to your project by following the official installation guide.