Changelog

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

We're thrilled to share the latest enhancements to NextUI Pro, 11 new components, performance improvements, and UI optimizations. The library has grown from 152 to 163, offering more components to help you build your beautiful applications.

Sidebar With Nested Items

The Sidebar component now supports nested items for more organized and intuitive navigation structures.

Link 🔗: https://nextui.pro/components/application/sidebars#component-sidebar-with-nested-items

Messaging Application

Create engaging and user-friendly messaging interfaces with our new Messaging Application component.

Link 🔗: https://nextui.pro/components/application/layouts#component-messaging-application

It includes built-in direction-aware animations for the mobile version 📲.

Settings Layout

Easily craft settings pages with our new Settings Layout component, designed for clarity and ease of use, it includes:

Link 🔗: https://nextui.pro/components/application/layouts#component-settings-layout

• User Profile Management: Simplify user profile adjustments.

  

• Appearance Customization: Enable theme switching between Light and Dark modes.

  

• Account & Time Zone Settings: Manage accounts and time zones effortlessly.

  

• Billing Settings: Facilitate plan changes billing & card replacement options.

  

• Team Management: Team roles and organization with a concise table list.

  

Banners

We've added 8 new Banner components to catch your users' attention with striking visuals and compelling calls-to-action & announcements.

Link 🔗: https://nextui.pro/components/marketing/banners

Performance and UI Enhancements

• Lazy Loading with Framer Motion: We're now using lazy loading for animated components with Framer Motion, improving load times and performance without sacrificing the quality of animations.

• Improved AI Components: The prompt container in our AI components has been improved to support a compact mode sidebar and responsive sidebar, making it more versatile and user-friendly across devices.

List of updated components

• https://nextui.pro/components/application/authentication#component-centered-login-with-two-steps

• https://nextui.pro/components/application/cards#component-spotlight-card

• https://nextui.pro/components/ecommerce/checkouts#component-multi-step-checkout

• https://nextui.pro/components/ecommerce/checkouts#component-two-columns-checkout

• All Sidebars https://nextui.pro/components/application/sidebar

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

Faster, More Organized, and Visually Intuitive.

We're delighted to announce significant enhancements to the search functionality within NextUI Pro, designed to make finding the components you need faster, easier, and more efficient than ever before. Here's what we've updated to enhance your search experience:

• Categorized and Grouped Components: We've organized the components into intuitive categories and groups.

• Recent Searches Feature: To streamline your workflow, we've introduced a "Recent Searches" feature.

• Preview Images on Hover: We now display preview images of components when you hover over search results.

We're excited to announce that we've integrated Featurebase into NextUI Pro, taking our commitment to user feedback and product transparency to the next level. This platform allows us to directly engage with our users' needs, showcase the latest updates, and provide a clear view of our development roadmap. Here’s what this means for you:

Direct Feedback Channel: Easily submit your product requests and feedback directly through NextUI Pro. Your input is invaluable in shaping the future of our product.

• Real-Time Updates: Stay in the loop with our latest updates, improvements, and bug fixes. Featurebase integration means you'll always know what's new and what's coming.

• Transparent Roadmap: Get a sneak peek into what we’re working on with our development roadmap. Your insights can influence our priorities, ensuring we focus on what matters most to you.