Follow new updates and improvements to NextUI Pro.
November 25th, 2024
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
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.
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:
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
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.
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
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).
Link đ: https://www.nextui.pro/components/marketing/hero-sections#component-hero-section-basic
Note: you need to add
hero-section-title
tobackgroundImage
in yourtailwind.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 yournext.config.js
.
images: {
remotePatterns: [
{
hostname: "nextuipro.nyc3.cdn.digitaloceanspaces.com",
protocol: "https",
},
],
},
Note: you need to add
hero-section-title
tobackgroundImage
in yourtailwind.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 yournext.config.js
.
images: {
remotePatterns: [
{
hostname: "nextuipro.nyc3.cdn.digitaloceanspaces.com",
protocol: "https",
},
],
},
Note: you need to add
hero-section-title
tobackgroundImage
in yourtailwind.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 yournext.config.js
.
images: {
remotePatterns: [
{
hostname: "nextuipro.nyc3.cdn.digitaloceanspaces.com",
protocol: "https",
},
],
},
Note: only light mode is supported
Note: you need to add
hero-section-centered-navbar
tobackgroundImage
in yourtailwind.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 is designed to enhance user experience by incorporating an intuitive interface that displays both the current AI prompt and a history of recent messages.
Link đ: https://www.nextui.pro/components/ai/prompt-containers#component-prompt-layout-with-recent-messages
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
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";
https://nextui.pro/components/application/sidebars#component-sidebar-off-canvas
https://nextui.pro/components/application/navbars#component-basic-navbar
https://nextui.pro/components/application/navbars#component-centered-navbar-menu
https://nextui.pro/components/application/feedbacks#component-feedback-rating
https://nextui.pro/components/application/layouts#component-messaging-application
https://nextui.pro/components/application/layouts#component-settings-layout
https://nextui.pro/components/application/sidebars#component-sidebar-compact
https://nextui.pro/components/application/sidebars#component-sidebar-off-canvas
https://nextui.pro/components/application/sidebars#component-sidebar-responsive
https://nextui.pro/components/application/sidebars#component-sidebar-with-toggle-button
https://nextui.pro/components/ai/prompt-inputs#component-basic-prompt-input
https://nextui.pro/components/ai/prompt-containers#component-prompt-container-with-conversation
https://nextui.pro/components/ai/prompt-inputs#component-prompt-input-with-bottom-actions
https://nextui.pro/components/ai/prompt-inputs#component-prompt-input-with-character-count
https://nextui.pro/components/ai/prompt-inputs#component-prompt-input-with-enclosed-actions
https://nextui.pro/components/ai/prompt-inputs#component-prompt-input-with-regenerate-button
https://nextui.pro/components/ai/prompt-inputs#component-prompt-input-with-suggestions-above
https://nextui.pro/components/ai/prompt-inputs#component-prompt-input-with-uploaded-images
https://nextui.pro/components/ai/prompt-inputs#component-prompt-input-with-vertical-actions
https://nextui.pro/components/ecommerce/product-list#component-place-list-grid-loading-state
https://nextui.pro/components/ecommerce/product-list#component-place-list-grid
https://nextui.pro/components/ecommerce/product-list#component-product-list-grid
https://nextui.pro/components/marketing/pricing-comparison#component-basic-pricing-comparison
https://nextui.pro/components/marketing/pricing#component-pricing-with-featured-tier
https://nextui.pro/components/marketing/pricing#component-pricing-with-featured-tier-filled
https://nextui.pro/components/marketing/pricing#component-pricing-with-most-popular-tier-highlighted
Stay tuned to the next components and features with our roadmap đ:
https://feedback.nextui.pro/roadmap
April 29th, 2024
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.
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
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:
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:
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
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
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.
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
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 đ˛.
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.
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
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.
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
March 1st, 2024
Improved
Platform
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
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.