Documentation.

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