Ship faster with beautiful components
NextUI Pro
Back to blog
avatar
Junior Garcia@jrgarciadev

NextUI v2.6.0 🔥

NextUI v2.6.0

NextUI version v2.6.0 comes with 4 new components Form, Drawer, Input OTP and Alert, React 19 & Next.js 15 support, and lots of bug fixes and improvements.

What's New in v2.6.0?

Upgrade today by using one of the following methods:

  1. Upgrading NextUI using the cli
  • First, upgrade Framer Motion to at least v11.9.0:
  • Then, upgrade NextUI:
  1. Upgrading NextUI using the pnpm

Form Component

Built on React Aria's Form component, the Form component provides accessible form handling with built-in submission, validation and error management.

Built-in Validation

You can use native HTML validation attributes or create custom validation rules.

Real-time Validation

You can validate the form data while users are typing.

Server Integration

The Form components works seamlessly with React Server Actions.

Form Libraries Support

You can also use popular form libraries like react-hook-form and formik.

Accessibility Built-in

The Form component automatically handles ARIA attributes and keyboard navigation, making your forms usable by everyone:

Schema validation

The Form component supports errors from schema validation libraries like Zod. You can use Zod's flatten method to get error messages for each field and return them as part of the server response.

Key Features

  • Server Integration: Works seamlessly with React Server Actions
  • Schema Validation: Supports Zod schema validation
  • Form Libraries Support: Supports popular form libraries like react-hook-form and formik
  • Accessibility: Built-in accessibility features including ARIA attributes and keyboard navigation

Check out our Forms documentation for a deep dive into all the features and capabilities.

Drawer Component

The new Drawer component displays a sliding panel from the screen edge with supplementary content, featuring built-in accessibility, focus management, and keyboard navigation.

Key Features

  • Multiple Placements: Can be positioned on any edge of the screen (left, right, top, bottom)
  • Customizable Sizes: Comes with preset sizes from xs to 5xl, plus full-width option
  • Backdrop Options: Supports transparent, opaque, or blur backdrop styles
  • Focus Management: Automatically handles focus trapping and restoration
  • Keyboard Navigation: Built-in support for Esc key dismissal and keyboard navigation
  • Form Validation: Supports built-in validation states and custom validation rules for form inputs

See the Drawer documentation for more details and examples.

Input OTP Component

The Input OTP component provides an accessible way to enter one-time passwords with built-in focus management and keyboard navigation. It is built on top of the input-otp library by @guilherme_rodz.

Key Features

  • Focus Management: Automatically handles focus trapping and restoration
  • Keyboard Navigation: Built-in support for Esc key dismissal and keyboard navigation
  • Customizable Animations: Supports custom motion animations through Framer Motion
  • Form Integration: Seamlessly works with form elements while maintaining proper focus management

See the Input OTP documentation for more details and examples.

Alert Component

The Alert component allows users to display messages to the user. It's built with accessibility in mind and includes features like focus management, keyboard navigation, and screen reader support.

Key Features

  • Focus Management: Automatically handles focus trapping and restoration
  • Keyboard Navigation: Built-in support for Esc key dismissal and keyboard navigation
  • Customizable Animations: Supports custom motion animations through Framer Motion
  • Form Integration: Seamlessly works with form elements while maintaining proper focus management

See the Alert documentation for more details and examples.

Collection-based components Virtualization

Select, Autocomplete & Listbox components now support virtualization to improve performance on large collections.

Note: The virtualization strategy is based on the @tanstack/react-virtual package, which provides efficient rendering of large lists by only rendering items that are visible in the viewport.

See the Autocomplete documentation for more details and examples.

React 19 Support & Library Upgrades

  • In preparation for React 19, NextUI is now compatible with React 19 RC and Next.js 15.
  • React Aria packages upgrades and fixes the exact versions of React Aria, React Flow, React Hook Form, React Router, React Server, React Use, Tanstack Query, Tanstack Virtual, and Tanstack Table
  • Framer Motion is now only added to the final bundle when the animations are enabled and we also added support for Framer motion v12

New use-theme hook

We created our own use-theme hook that replaces use-dark-theme hook to allow users to change the theme at runtime.

See the Dark Mode documentation for more details and examples.

Draggable Modal

Added support for draggable modals.

Note: The modal is draggable only from the header part.

Router Improvements

NextUI now provides enhanced routing capabilities with better TypeScript support and integration with popular routing solutions:

  • Path Type Safety: All router-based components now support path intellisense when using TypeScript
  • Router Options Support: Added routerOptions prop to all link components for controlling navigation behavior
  • Enhanced Router Configuration: Global type configuration for router options through TypeScript:
  • Improved Base Path Support: Better handling of base paths through the new useHref prop in NextUIProvider
  • Framework-specific Optimizations: Built-in support for Next.js (both App and Pages Router), React Router, Remix, and TanStack Router

See the Routing documentation for more details.

API Improvements

NextUIProvider

  • useHref (added) - Converts a router-specific href to a native href for use on DOM elements. For example, if your router accepts relative paths or custom link formats, useHref will generate the full native href based on the RouterProvider's configuration.
  • navigate (modified) - ((path: Href, routerOptions?: RouterOptions) => void) | undefined - we added the router options
  • reduceMotion (added) - Controls the motion preferences for the entire application, allowing developers to respect user settings for reduced motion. The available options are:
    • "always" - Always disable motion
    • "never" - Always enable motion
    • "user" - Respect user system preferences for motion

DatePicker

  • selectorButtonPlacement (added) - Controls the placement of selector buttons
  • showMonthAndYearPickers (added) - Controls visibility of month and year picker dropdowns

Tabs

  • tabRef (added) - Allows accessing the underlying tab element via ref

Popover

  • shouldCloseOnScroll (added) - Controls whether popover should close when scrolling

Table

  • isKeyboardNavigationDisabled (added) - Disables keyboard navigation in tables

Textarea

  • isClearable (added) - Adds clear button functionality to textarea

Select

  • hideEmptyContent (added) - Controls visibility of empty content message
  • Added virtualization support for improved performance with large datasets

Autocomplete & Listbox

  • Added virtualization support for improved performance with large datasets
  • Added support for draggable modals (draggable from header)

See the NextUIProvider documentation for more details.

What's Next?

  • Rebranding - We're preparing a rebranding of NextUI to ensure long-term sustainability and avoid potential naming conflicts
  • Update NextUI Pro - We're working on a new version of NextUI Pro that will be compatible with Next.js 15 and React 19. Follow progress here
  • Tailwind CSS v4 support - Read more here
  • React 19 internal APIs migration - Read more here
  • Toast component - Follow progress here
  • Rating component - Follow progress here
  • File Upload component - Follow progress here
  • Upgrade to the latest React Aria - Read more here
  • Complete Figma components - Follow progress here

🚨 Breaking Changes

We try to keep the breaking changes to a minimum, but sometimes it's necessary to make changes to the API to improve the developer experience.

Table Theme Group Data Selectors

The nested group selectors for table themes have been updated to require explicit element selectors. You'll need to add /tr or /th to custom styles for group-data.

Circular Progress Theme Location

The circular progress Tailwind variants have been moved from circular-progress to progress. You'll need to update your Tailwind CSS configuration tailwind.config.js:

Release Changes

Features:

Documentation:

Bug Fixes:

Enhancements:

Chore:

Special thanks to NextUI Team members @wingkwong, @macci001, @vinroger, @ryo-manba, @winchesHe, @tianenpang and contributors for their contributions to this release.

For a full list of changes, please refer to the release notes.

Thanks for reading and happy coding! 🚀

Community

We're excited to see the community adopt NextUI, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!

Contributing

PR's on NextUI are always welcome, please see our contribution guidelines to learn how you can contribute to this project.