Getting Started with Cuicui

This library is designed for use in a React TypeScript environment. Before integrating Cuicui components, ensure that your project is set up with basic React tooling.

The "cn" function

The cn function is a utility for generating className strings compatible with TailwindCSS utility classes. Many Cuicui components rely on this function, making it an essential part of your toolkit.

Benefits of Using the cn function

  • Readable and maintainable className strings, with easy inline comments for styles.
  • Supports conditional styles with TailwindCSS, enhancing flexibility.
  • Simplifies maintenance by consolidating class name logic.

How to Install the cn Function

1

Install the Tailwind Merge library
npm install tailwind-merge

2

Install the clsx library
npm install clsx

3

Create a 'cn.ts' file

Create a cn.ts file in your project's utils folder and add the following code:

// ./src/utils/cn.ts
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";


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