Welcome to the NextUI Pro documentation.

Here you'll find everything you need to get started with NextUI Pro. We assume that you are already familiar with the NextUI library and have a basic understanding of React.

Install Iconify Icons

Iconify is a popular icons library that supports multiple icon sets, it has over 200,000 icons from 100+ icon sets. NextUI Pro uses Iconify icons by default to make it easier to use icons.

To use Iconify icons, you need to install the Iconify React component.

npm install --save-dev @iconify/react

To learn more about Iconify, please visit Iconify React

Install `usehooks-ts` package

Some components in NextUI Pro use the `usehooks-ts` package, which is a collection of reusable React hooks. To use these components, you need to install the `usehooks-ts` package.

npm install usehooks-ts

To learn more about `usehooks-ts`, please visit usehooks-ts Documentation

Install `clsx` and `tailwind-merge` packages

NextUI Pro uses the `clsx` and `tailwind-merge` packages to merge TailwindCSS classNames together avoiding the TailwindCSS classes conflicts. These packages are required to create the `cn` utility function in the next step.

npm install clsx tailwind-merge

Add the `cn` utility function (Updated)

NextUI Pro uses the `cn` utility function to conditionally join classNames together. This is a simple utility function that you can use to join classNames together avoiding the TailwindCSS classes conflicts.

import type {ClassValue} from "clsx";

import clsx from "clsx";
import {extendTailwindMerge} from "tailwind-merge";

const COMMON_UNITS = ["small", "medium", "large"];

 * We need to extend the tailwind merge to include NextUI's custom classes.
 * So we can use classes like `text-small` or `text-default-500` and override them.
const twMerge = extendTailwindMerge({
  extend: {
    theme: {
      opacity: ["disabled"],
      spacing: ["divider"],
      borderWidth: COMMON_UNITS,
      borderRadius: COMMON_UNITS,
    classGroups: {
      shadow: [{shadow: COMMON_UNITS}],
      "font-size": [{text: ["tiny", ...COMMON_UNITS]}],
      "bg-image": ["bg-stripe-gradient"],

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

To learn more about `clsx` and `tailwind-merge`, please visit clsx and tailwind-merge.

You are ready to use NextUI Pro 🎉

Now you can copy & paste any component from NextUI Pro and use it in your React application.

To learn more about NextUI Open Source, please visit NextUI