In Review

In Progress

Completed

Main Roadmap

Input with controls for incrementing or decrementing numeric values.

Number Input

Junior Garcia

A modal dialog displays important information that users need to acknowledge.

Alert Modal

Fix Collection-based components like Listbox/Menu/Table/Dropdown, they cannot be imported on Next.js without adding the <code>use client;</code> directive, even when we import them from individual packages.

Fix collection-based components

A color picker component allows users to select colors via a visual spectrum display or input specific color values. It usually features a gradient or color wheel, sliders for fine-tuning, and fields for hexadecimal or RGB values. Related Hooks:<a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://react-spectrum.adobe.com/react-aria/useColorArea.html">https://react-spectrum.adobe.com/react-aria/useColorArea.html</a><a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://react-spectrum.adobe.com/react-aria/useColorField.html">https://react-spectrum.adobe.com/react-aria/useColorField.html</a><a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://react-spectrum.adobe.com/react-aria/useColorSlider.html">https://react-spectrum.adobe.com/react-aria/useColorSlider.html</a><a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://react-spectrum.adobe.com/react-aria/useColorWheel.html">https://react-spectrum.adobe.com/react-aria/useColorWheel.html</a>

Color Picker Component

A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.

TagGroup

New API to make easier the style overrides

Composability API

Toasts display brief, temporary notifications of actions, errors, or other events in an application.

Toast

Add multiple selection to the Autocomplete component:<a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://nextui.org/docs/components/autocomplete">https://nextui.org/docs/components/autocomplete</a>

Autocomplete [Multiple]

Figma File

A form is a group of inputs that allows users to submit data to a server, with support for providing field validation errors.

Beta

Form Component

A panel that slides out from the edge of the screen, based on the Modal component.

Drawer

Displays a callout for user attention

Alert

A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.

Date Picker

Add virtualization support to the Autocomplete component

Virtual List Autocomplete

A date range picker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range.

Date Range Picker

A calendar displays one or more date grids and allows users to select a single date.

Calendar

A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually editable segment.

TimeInput

A range calendar displays one or more date grids and allows users to select a contiguous range of dates.

NextUI

Main Roadmap