Changelog

Changelog

Follow new updates and improvements to HeroUI Pro.

March 19th, 2025

New

Integration

Instant Component Editing! ⚡️

Big news! You can now instantly edit any component from HeroUI Pro in HeroUI Chat—making customization faster than ever.

🔥 What’s New?

✅ “Open in Chat” Button – Modify any component in seconds.

✅ Live AI Editing – Adjust styles, content, and structure instantly.

✅ Seamless Workflow – No more back and forth, edit directly in HeroUI Chat.

🔒 Visibility & Sharing Rules

• Free components: Accessible to everyone.

• Pro-only components: Require a HeroUI Pro license to view and edit the chat

• Sharing Pro components: If you share an edited Pro-only component, only other users with a HeroUI Pro license will be able to see it in HeroUI Chat.

Enjoy! 🚀

Write a comment...

January 26th, 2025

New

Platform

10 New Components & Updated Figma Files 🎨

We’re excited to share the latest enhancements to HeroUI Pro! In this update, we’ve refined our import settings, refreshed our Figma resources, and introduced 10 brand new components

What’s New

• 10 New components 🚀

• Figma Files Updated 🎨

Our Figma files have been refreshed! You can now easily override local variables to change the default light and dark themes.

Simply head to Account → Figma Files to access the latest updates.

Local variables override DEMO:

• Global vs. Individual Imports ⚙️

Manage your imports more flexibly via Account Settings. Choose between global configurations or component-specific settings to better suit your project needs.

Stay tuned to the next components and features with our roadmap 🚀:

https://feedback.nextui.pro/roadmap

Write a comment...

January 17th, 2025

NextUI Pro is now HeroUI Pro 🔥

We’re excited to announce that NextUI Pro has officially rebranded to HeroUI Pro! 🎉

The same powerful components you love, now with a fresh identity.

What’s Changed:

• All component code has been updated to use HeroUI packages instead of the old NextUI ones.

• To upgrade your projects, simply run the following command:

npx @heroui/codemod@latest migrate

What’s Next:

• 🚀 New Components and improvements coming soon

• 📚 Enhanced HeroUI Pro Documentation

Thank you for your support as we continue to evolve and make HeroUI Pro the best it can be. Stay tuned for exciting updates!

Happy coding! 💻✨

Write a comment...

December 13th, 2024

New

Platform

React 19 RC & Next.js 15 Support + Perf Improvements 🎉

We’re thrilled to announce that NextUI Pro has been updated to the latest NextUI v2.6.8, bringing support for React 19 RC and Next.js 15! 🚀

✨ What’s New:

• 🔄 50 Components Updated – We’ve modernized 50 components to leverage the latest features and improvements. Check out the updated components below!

⚡ Performance Boost:

• 50% Smaller Bundle Size with optimized assets

• Lazy-loading Demos – Now only visible when in the viewport

• Optimized Code Viewer – Only loads when the “Code” tab is selected

• Server-side Rendering for multiple components, reducing the first-load JavaScript size

📚 Updated Components:

Click on any component to explore it!

• Prompt Layout with Recent Messages

• Account Details

• Action Cards

• Discount Card

• Invite Member

• Onboarding Checklist Card

• Centered Sign-Up with Animated Form

• Centered Sign-Up with Two Steps

• Select Plan

• Settings Layout

• Sidebar with Clear Toggle Button

• Spotlight Card

• Table with Filters

• App Screenshot Light

• App Screenshot Skewed

• App Screenshot

• Basic Sidebar

• Centered Login with Blurred Container

• Centered Login with Gradient Background

• Centered Sign-Up with Blurred Container

• Centered Sign-Up with Gradient Background

• Left Login with Image Background

• Left Login with Right Testimonial

• Left Sign-Up with Image Background

• Left Sign-Up with Right Testimonial

• Right Login with Image Background

• Right Sign-Up with Image Background

• Sidebar Compact

• Sidebar with Account and Workspace Switcher

• Sidebar with Brand Colors

• Sidebar with Chat History

• Sidebar with Compacted Items

• Sidebar with Footer Actions

• Sidebar with Gradient Background

• Sidebar with Long List

• Sidebar with Nested Items

• Sidebar with Pro Card

• Sidebar with Search Input

• Sidebar with Sections

• Sidebar with Toggle Button

• Sidebar with User Avatar

• Table with Filters

• Modal Feedback

• Popover Feedback

• Reviews with Modal Review

• Payment Checkout

🚀 What’s Next?:

Stay tuned for upcoming releases! We’ll continue enhancing NextUI Pro with more components and features to help you build faster and better applications. 🎨

Explore our roadmap for more details! 🔥

Write a comment...

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

Write a comment...

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

Write a comment...

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

Write a comment...

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

Write a comment...

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

Write a comment...

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.

Write a comment...