Changelog

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...