We're excited to announce the latest enhancements to NextUI Pro, including adding 17 new components, performance improvements, and UI optimizations. Our library has expanded from 163 to 180+ components, offering various options to enhance your application development.

Multi Step Wizard

A fully responsive wizard designed to seamlessly onboard new users into your application

Link 🔗: https://www.nextui.pro/components/application/forms#component-multi-step-wizard

Steppers

We've introduced 7 new Stepper components to guide your users through multi-step processes with intuitive navigation and clear progress indicators.

Link 🔗: https://nextui.pro/components/application/steppers

Demo:

Cookie Consents

We've added 8 new cookie consent components to help users easily manage their privacy settings with clear navigation and straightforward steps.

Link 🔗: https://nextui.pro/components/marketing/cookie-consents

Demo:

Docs Updates 📘

Adjust cn Utility:

The cn utility has been updated to support NextUI custom classes. If you're using this utility in your codebase, please update it to accommodate the new components.

Before Update:

import type {ClassValue} from "clsx";

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

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

After Update:

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));
}

We are working to export this directly from the NextUI package.

See the documentation page for more information: https://www.nextui.pro/documentation

Theme selector update:

We replaced the component's theme selector with a switch to make it easier to toggle between dark and light themes.

Version Update:

The NextUI Pro website has been updated to the latest version (v2.3.6). Please make sure to upgrade your projects accordingly.

Auth Update:

We now support Google as a provider for logging in or signing up. 🚀

Stay tuned to the next components and features with our roadmap 🚀:
https://feedback.nextui.pro/roadmap