Changelog

Follow new updates and improvements to NextUI Pro.

November 25th, 2024

Introducing 21 chart components and updates! 🎉

We're excited to share the latest enhancements to NextUI Pro, 21+ new components, bug fixes, and refactoring. The library has grown from 180 to 210, offering more components to help you build your beautiful applications.

🎉 What’s new:

• 📊 21 new chart components!

• 🎉 22 components are now available for free!

• 🎁 40% Black Friday Discount – Don’t miss this limited-time offer! It ends on November 29th!

• 🎨 Access Figma files: Go to Account -> Figma files.

Coming Soon:

• Support for Next.js 15 and React 19.

• Refactored components leveraging the latest NextUI v2.5.0.

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

September 22nd, 2024

Introducing Grouped Categories & Component Updates

We're delighted to announce a significant enhancement to the NextUI components page. To improve user experience, all components are now grouped by categories, allowing for easier navigation.

We’ve also made some bug fixes or enhancements on the existing components.

List of updated components

Hero Section With Bottom App Screenshot: https://nextui.pro/components/marketing/hero-sections#component-hero-section-with-bottom-app-screenshot
Hero Section With Bottom App Skewed Screenshot: https://nextui.pro/components/marketing/hero-sections#component-hero-section-with-bottom-app-skewed-screenshot
Hero Section With Centered Navbar And Bottom App Screenshot:
https://nextui.pro/components/marketing/hero-sections#component-hero-section-with-centered-navbar-and-bottom-app-screenshot
Table with Filters:
https://nextui.pro/components/application/tables#component-table-with-filters
Centered Footer With Social Links:
https://nextui.pro/components/marketing/footers#component-centered-footer-with-social-links

September 6th, 2024

Introducing 8 new components and updates! 🎉

We're thrilled to share the latest enhancements to NextUI Pro, 8 new components, bug fixes, and refactoring. The library has grown from 180 to 188, offering more components to help you build your beautiful applications.

Table with Filters

The Table component with filter functionality is a dynamic and efficient tool for managing and interacting with datasets in web applications. It includes searching, filtering, and sorting features.

Link 🔗: https://www.nextui.pro/components/application/tables#component-table-with-filters

Hero Sections

A Hero Section is a prominent area on your landing page. It includes several examples - Basic Hero Section, Hero Section With Bottom App Screenshot, Hero Section With Bottom App Skewed Screenshot, and Hero Section With Centered Navbar and Bottom App Screenshot (Light mode supported only).

Basic Hero Section

Link 🔗: https://www.nextui.pro/components/marketing/hero-sections#component-hero-section-basic

Note: you need to add hero-section-title to backgroundImage in your tailwind.config.ts

backgroundImage: {
  "hero-section-title":
    "linear-gradient(91deg, #FFF 32.88%, rgba(255, 255, 255, 0.40) 99.12%)",
},

Note: If you are using NextJS and our bg-gradient image, you need to add the following code in your next.config.js.

images: { 
  remotePatterns: [  
   {
    hostname: "nextuipro.nyc3.cdn.digitaloceanspaces.com", 
    protocol: "https", 
   },
  ],
},

Hero Section With Bottom App Screenshot

Link 🔗: https://www.nextui.pro/components/marketing/hero-sections#component-hero-section-with-bottom-app-screenshot

Note: you need to add hero-section-title to backgroundImage in your tailwind.config.ts

backgroundImage: {
  "hero-section-title":
    "linear-gradient(91deg, #FFF 32.88%, rgba(255, 255, 255, 0.40) 99.12%)",
},

Note: If you are using NextJS and our bg-gradient image, you need to add the following code in your next.config.js.

images: { 
  remotePatterns: [  
   {
    hostname: "nextuipro.nyc3.cdn.digitaloceanspaces.com", 
    protocol: "https", 
   },
  ],
},

Hero Section With Bottom App Skewed Screenshot

Link 🔗: https://www.nextui.pro/components/marketing/hero-sections#component-hero-section-with-bottom-app-skewed-screenshot

Note: you need to add hero-section-title to backgroundImage in your tailwind.config.ts

backgroundImage: {
  "hero-section-title":
    "linear-gradient(91deg, #FFF 32.88%, rgba(255, 255, 255, 0.40) 99.12%)",
},

Note: If you are using NextJS and our bg-gradient image, you need to add the following code in your next.config.js.

images: { 
  remotePatterns: [  
   {
    hostname: "nextuipro.nyc3.cdn.digitaloceanspaces.com", 
    protocol: "https", 
   },
  ],
},

Hero Section With Centered Navbar and Bottom App Screenshot

Note: only light mode is supported

Link 🔗: https://www.nextui.pro/components/marketing/hero-sections#component-hero-section-with-centered-navbar-and-bottom-app-screenshot

Note: you need to add hero-section-centered-navbar to backgroundImage in your tailwind.config.ts

backgroundImage: {
  "hero-section-centered-navbar":
    "linear-gradient(137deg, #F4F4F5 34.15%, #F8E5EC 46.96%, #FDD0DF 63.99%, #E4D4F4 75.82%, #A9EAF0 98.9%)",
},

AI Prompt Layout with Recent Messages

AI Prompt Layout with Recent Messages is designed to enhance user experience by incorporating an intuitive interface that displays both the current AI prompt and a history of recent messages.

Without Conversations

Link 🔗: https://www.nextui.pro/components/ai/prompt-containers#component-prompt-layout-with-recent-messages

With Conversations

Link 🔗: https://nextui.pro/components/ai/prompt-containers#component-prompt-layout-with-recent-messages-and-conversations

Command Menu With Categories

Command Menu With Categories provides a centralised, easy-to-access location where users can view and execute a variety of commands to retrieve corresponding results.

Link 🔗: https://www.nextui.pro/components/application/command-menus#component-command-menu-with-categories

Refactoring cn utility

The cn utility is now exported from the NextUI package. If you're using this utility in your codebase, please update it to accommodate the new components.

Before Update (The import path may subject to your project structure):

import {cn} from "@/utils/cn";

After Update:

import {cn} from "@nextui-org/react";

or 

import {cn} from "@nextui-org/theme";

List of updated components

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

April 29th, 2024

17 New Components and updates! 🎉

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

March 25th, 2024

New

Improved

Introducing 11 New Components and More! 🎉

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

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

March 1st, 2024

Improved

Platform

Improved Search Experience

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.

March 1st, 2024

New

Integration

Roadmap, Changelog & Feedback

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.