Getting Started with Luxe

This library is designed for use in a React TypeScript environment. Before integrating Luxe 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 Luxe 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.tsx' file

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

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


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