nextui/apps/docs/content/blog/v2.3.0.mdx

---
title: "Introducing v2.3.0 🎉"
description: "NextUI v2.3.0 is here! includes six new components, NextUI CLI, bug fixes, React Aria, and a TailwindCSS upgrade, among other enhancements."
date: "2024-04-16"
image: "/blog/v2.3.0.jpg"
tags: ["nextui", "cli", "date picker", "time input", "date input", "calendar"]
author:
  name: "Junior Garcia"
  username: "@jrgarciadev"
  link: "https://x.com/jrgarciadev"
  avatar: "/avatars/junior-garcia.jpeg"
---

import {dateInputContent} from "@/content/components/date-input";
import {timeInputContent} from "@/content/components/time-input";
import {calendarContent} from "@/content/components/calendar";
import {rangeCalendarContent} from "@/content/components/range-calendar";
import {datePickerContent} from "@/content/components/date-picker";
import {dateRangePickerContent} from "@/content/components/date-range-picker";

<img
  src="/blog/v2.3.0_2x.jpg"
  width={700}
  height={350}
  alt="NextUI v2.3.0"
  className="w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
/>

We are excited to announce the latest update to NextUI, version **2.3.0**! This release introduces 6 new components,
our new CLI, and several enhancements and bug fixes.

## What's New in v2.3.0?

- [NextUI CLI](/docs/guide/cli) - A command-line interface for creating and managing NextUI projects.
- [DateInput](/docs/components/date-input) - Allows users to enter and edit date and time values using a keyboard.
- [TimeInput](/docs/components/time-input) - Allows users to enter and edit time values using a keyboard.
- [Calendar](/docs/components/calendar) - Displays a calendar for selecting dates and times.
- [RangeCalendar](/docs/components/range-calendar) - Displays a calendar for selecting date ranges.
- [DatePicker](/docs/components/date-picker) - Allows users to select a date from a calendar.
- [DateRangePicker](/docs/components/date-range-picker) - Allows users to select a date range from a calendar.
- [Other Changes](#other-changes) - Includes styling improvements, accessibility and usability enhancements.

<Spacer y={4} />

Requirements:

- [Tailwind CSS 3.4](https://v3.tailwindcss.com/) (For Tailwind CSS v4, please refer to our [Tailwind v4 Migration Guide](https://www.heroui.com/docs/guide/tailwind-v4))

Upgrade today by running one of the following commands:

<Spacer y={4} />

<PackageManagers
  commands={{
    cli: "nextui upgrade",
    npm: "npx heroui-cli@latest upgrade",
  }}
/>

<Spacer y={4} />

## NextUI CLI

We are thrilled to introduce the [NextUI CLI](https://github.com/heroui-inc/heroui-cli), a command-line interface, It offers a comprehensive suite
of commands to initialize, manage, and improve your NextUI projects. It enables you to `add`, `remove`, or
`upgrade` individual components, assess the health of your project, and more.

### Installation

To install the CLI globally, execute one of the following commands in your terminal:

<PackageManagers
  commands={{
    npm: "npm install heroui-cli -g",
    yarn: "yarn add heroui-cli -g",
    pnpm: "pnpm add heroui-cli -g",
    bun: "bun add heroui-cli -g",
  }}
/>

Alternatively, you can use the CLI without a global installation by employing `npx`:

```bash
npx heroui-cli@latest
```

### Usage

Once the CLI is installed, run the following command to display available commands:

```bash
nextui
```

NextUI CLI can help you create new projects, add components, upgrade components, remove components, detect issues in
you setup, know your environment, and more.

<Spacer y={4} />

To initialize a new project, you can simply run:

```bash
nextui init my-nextui-app
```

<Spacer y={4} />

You will be prompted to configure your project:

```codeBlock bash
? Select a template › - Use arrow-keys. Return to submit.
❯   App
    A Next.js 13 with app directory template pre-configured with NextUI (v2) and Tailwind CSS.
    Pages
    A Next.js 13 with pages directory template pre-configured with NextUI (v2) and Tailwind CSS.
```

Select the template you want to use and the CLI will create a new project for you.

> We're working on adding more templates to the CLI, so stay tuned for updates!

<Spacer y={4} />

If you already have a NextUI project, you can add components to it using the `add` command:

```bash
nextui add date-input
```

It will automatically detect the required dependencies, modify your `tailwind.config.(js|ts)` file,
detect whether using `pnpm` if so, add the required configuration to your `.npmrc` file and add the component to your project.

If instead of installing a single component you want to install multiple components, you can do so by separating them with a space:

```bash
nextui add date-input time-input calendar
```

You can alternatively install the `main` package which includes all the components by passing the `--all` flag:

```bash
nextui add --all
```

<Spacer y={4} />

> The CLI is currently in `Alpha` stage, we're working on adding more features and improvements. If you find any issues or have any suggestions, please let us know by [opening an issue](https://github.com/heroui-inc/heroui-cli/issues/new).

To learn more about the CLI and its commands, please refer to the [CLI documentation](/docs/guide/cli) and the [CLI API reference](/docs/api-references/cli-api).

## New Components

Since the beginning of NextUI, devs have been asking for date and time input components. After
months of iteration and development, we are excited to introduce the following new components:

### DateInput

DateInput is a component that allows users to enter and edit date and time values using a keyboard.
Each part of a date value is displayed in an individually editable segment.

<CodeDemo title="Usage" files={dateInputContent.usage} />

Go to the [DateInput documentation](/docs/components/date-input) to learn more about the component.

### TimeInput

The `TimeInput` component consists of a label, and a group of segments representing each unit of a time (e.g. hours, minutes, and seconds). Each segment is individually focusable and editable by the user, by typing or using the arrow keys to increment and decrement the value. This approach allows values to be formatted and parsed correctly regardless of the locale or time format, and offers an easy and error-free way to edit times using the keyboard.

<CodeDemo title="Usage" files={timeInputContent.usage} />

Go to the [TimeInput documentation](/docs/components/time-input) to learn more about the component.

### Calendar

A Calendar consists of a grouping element containing one or more date grids (e.g. months), and a previous and next button for navigating between date ranges. Each calendar grid consists of cells containing button elements that can be pressed and navigated to using the arrow keys to select a date.

<CodeDemo title="Usage" files={calendarContent.usage} />

The calendar also supports selecting years and months for rapid selection.

<CodeDemo title="With Month And Year Picker" files={calendarContent.withMonthAndYearPicker} />

Go to the [Calendar documentation](/docs/components/calendar) to learn more about the component.

### RangeCalendar

A Range calendar consists of a grouping element containing one or more date grids (e.g. months), and a previous and next button for navigating through time. Each calendar grid consists of cells containing button elements that can be pressed and navigated to using the arrow keys to select a date range. Once a start date is selected, the user can navigate to another date using the keyboard or by hovering over it, and clicking it or pressing the Enter key commits the selected date range.

<CodeDemo title="Usage" files={rangeCalendarContent.usage} />

Go to the [RangeCalendar documentation](/docs/components/range-calendar) to learn more about the component.

### DatePicker

A Date Picker combines a DateInput and a Calendar popover to allow users to enter or select a date and time value.

<CodeDemo title="Usage" files={datePickerContent.usage} />

Go to the [DatePicker documentation](/docs/components/date-picker) to learn more about the component.

### DateRangePicker

Date Range Picker combines two DateInputs and a RangeCalendar popover to allow users to enter or select a date and time range.

<CodeDemo title="Usage" files={dateRangePickerContent.usage} />

Go to the [DateRangePicker documentation](/docs/components/date-range-picker) to learn more about the component.


### Calendar Presets

`Calendar` and `RangeCalendar` components support adding custom content at the top and bottom of the calendar, this is useful for adding presets or
custom actions to the calendar.

Here's an example of how to add presets to the `Calendar` component:

<CodeDemo title="Calendar Presets" files={calendarContent.presets} />

### Internationalization

These new components have built-in internationalization, time zones and granularity support, they supports selecting dates
in many calendar systems used around the world, including `Gregorian`, `Hebrew`, `Indian`, `Islamic`, `Buddhist`, and more.

Dates are automatically displayed in the appropriate calendar system for the user's locale this is possible thanks to [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/) package, which
includes functions for parsing strings in multiple formats into `ZonedDateTime` objects.

Here's and example using the `Indian` calendar system:

<CodeDemo title="International Calendar" files={datePickerContent.internationalCalendar} />

Alternatively you can set the `locale` globally by using the `HeroUIProvider` component:

```jsx
// Next.js App Router example
"use client";

import {HeroUIProvider} from "@heroui/react";

export interface ProvidersProps {
  children: React.ReactNode;
}

export function Providers({children}: ProvidersProps) {
  const router = useRouter();

  return <HeroUIProvider locale="hi-IN-u-ca-indian">{children}</HeroUIProvider>;
}
```

If no `locale` is provided, it will extract the locale from the browser.

### NextUI Provider

The `HeroUIProvider` component was updated to include the `createCalendar` function, which allows you to create a calendar instance with the specified locale and time zone,
and the `defaultDates` object which allows you to set global minimum and maximum dates for the components.

```jsx
// Next.js App Router example
"use client";

import {HeroUIProvider, SupportedCalendars} from "@heroui/react";
import {CalendarDate, GregorianCalendar} from "@internationalized/date";

export interface ProvidersProps {
  children: React.ReactNode;
}

function createCalendar(identifier: SupportedCalendars) {
  switch (identifier) {
    case "gregory":
      return new GregorianCalendar();
    default:
      throw new Error(`Unsupported calendar ${identifier}`);
  }
}

export function Providers({children}: ProvidersProps) {
  const router = useRouter();

  return (
    <HeroUIProvider
      locale="hi-IN-u-ca-indian"
      defaultDates={{
        minDate: new CalendarDate(1900, 1, 1),
        maxDate: new CalendarDate(2099, 12, 31),
      }}
      createCalendar={createCalendar}
    >
      {children}
    </HeroUIProvider>
  );
}
```

<Spacer y={4} />


## Breaking Changes

### Removal of the `units` creation

To improve performance and reduce bundle size, we have removed the `units` creation from the
`nextui` plugin. [TailwindCSS v3.4](https://tailwindcss.com/blog/tailwindcss-v3-4) added support for `min-h-*` and `min-w-*` classes, so it is no longer needed.

How to upgrade:

1. Upgrade TailwindCSS to version 3.4 or later (if you haven't already). You can do this by running:

```bash
npm install tailwindcss@latest
```

2. Remove the `spacingUnit` configuration from your `tailwind.config.(js|ts)` file (if you have it):

```diff-js
 plugins: [
    nextui({
      layout: {
-       spacingUnit: 4,
      },
    }),
  ],
```

3. Find all `-unit` classes in your project and replace them with a `-` separator. For example, replace `p-unit-4` with `p-4`.

```diff-jsx
import {Button} from "@heroui/react";

export const MyButton = () => {
  return (
-    <Button className="px-unit-2 py-unit-1 min-w-unit-48">
+    <Button className="px-2 py-1 min-w-48">
      My Button
    </Button>
  );
};
```

### Separation for `errorMessage` and `isInvalid`

We are currently working on supporting multiple types of validation, including native HTML constraint validation, custom validation, and real-time validation.
Due to this reason, the requirements for displaying error messages have become more varied, and it is necessary to handle validation conditions separately from the `errorMessage`.

How to upgrade:

1. To display `errorMessage`, `isInvalid` must be set to `true`.

```diff-jsx
<Input
  type="email"
  label="Email"
  variant="bordered"
  defaultValue="junior2nextui.org"
+ isInvalid={true}
  errorMessage="Please enter a valid email"
  className="max-w-xs"
/>
```

That's it! Your project should now be using the latest version of TailwindCSS and NextUI.

<Spacer y={4} />


## Other Changes

**Bug Fixes**:

- Fixed an HSL color rounding issue in the theme settings to ensure accurate color representation. [PR](https://github.com/heroui-inc/heroui/pull/2702) - [@wingkwong](https://github.com/wingkwong)
- Removed conflicting transition definitions affecting CSS classes. [PR](https://github.com/heroui-inc/heroui/pull/2677) - [@u3u](https://github.com/u3u)
- Patched the "@heroui/autocomplete" package to fix an issue where empty items with `allowCustomValue` would not render properly due to a null node problem. [PR](https://github.com/heroui-inc/heroui/pull/2674) - [@wingkwong](https://github.com/wingkwong)
- Implemented a fix in modal components to prevent carryover of IME (Input Method Editor) input when switching fields using the Tab key. [PR](https://github.com/heroui-inc/heroui/pull/2709) - [@ryo-manba](https://github.com/ryo-manba)
- Enhanced accessibility by handling Tab key press event in the `ModalContent` component. [PR](https://github.com/heroui-inc/heroui/pull/2709) - [@ryo-manba](https://github.com/ryo-manba)
- Fixed an issue where disabled select components could still be changed using blur and keyboard shortcuts. [PR](https://github.com/heroui-inc/heroui/pull/2649) - [@wingkwong](https://github.com/wingkwong)
- Patched issues in "@heroui/use-aria-multiselect" and "@heroui/stories-utils" packages to fix a warning about `SELECT defaultSelectedKeys`. [PR](https://github.com/heroui-inc/heroui/pull/2648) - [@wingkwong](https://github.com/wingkwong)
- Fixed an issue with incorrect `onChange` typing in Checkbox Group, ensuring it now correctly handles an array of strings as values. [PR](https://github.com/heroui-inc/heroui/pull/2595) - [@wingkwong](https://github.com/wingkwong)
- Fixed the `label` placement issue in `Select` component if a `description` prop is used [PR](https://github.com/heroui-inc/heroui/pull/2553) - [@novsource](https://github.com/novsource)
- Fixed the `originalProps` spread issue in the `Dropdown` component. [PR](https://github.com/heroui-inc/heroui/pull/2450) - [@wingkwong](https://github.com/wingkwong)

**Improvements**
- Framer Motion was updated to the latest version, improving performance and reducing bundle size. [Docs](https://www.framer.com/motion/guide-reduce-bundle-size/) [PR](https://github.com/heroui-inc/heroui/pull/2464) - [@mezotv](https://github.com/mezotv)
- `LazyMotion` was added to all components that use Framer Motion, improving performance by only loading the required motion components.
- We removed the custom `units` creation from the `nextui` plugin, it is no longer needed with TailwindCSS v3.4 and above. [PR](https://github.com/heroui-inc/heroui/pull/2713) - [@jrgarciadev](https://github.com/jrgarciadev)
- Updated `framer-motion` package across various components and utilities to version `11.0.22` for enhanced performance and consistency. [PR](https://github.com/heroui-inc/heroui/pull/2596) - [@wingkwong](https://github.com/wingkwong)
- Ensured compatibility with `react@18.2.0` and `react-dom@18.2.0` across the board. [PR](https://github.com/heroui-inc/heroui/pull/2596) - [@wingkwong](https://github.com/wingkwong)
- Introduced patches for NextUI components to improve animations, including support for keyframes with spring and inertia animations. [PR](https://github.com/heroui-inc/heroui/pull/2596) - [@wingkwong](https://github.com/wingkwong)
- Improved handling of numeric keys in the multi-select component to ensure consistent behavior. [PR](https://github.com/heroui-inc/heroui/pull/2589) - [@wingkwong](https://github.com/wingkwong)
- Updated the version of react-aria to include the latest changes as detailed in the [2024-02-13 release](https://react-spectrum.adobe.com/releases/2024-02-13.html). [PR](https://github.com/heroui-inc/heroui/pull/2561) - [@ryo-manba](https://github.com/ryo-manba)
- Added support for custom class names in the `AvatarGroup` component, enhancing flexibility in styling. [PR](https://github.com/heroui-inc/heroui/pull/2669) - [@wingkwong](https://github.com/wingkwong)
- Introduced a `count` slot to the `AvatarGroup` for more customized rendering. [PR](https://github.com/heroui-inc/heroui/pull/2669) - [@wingkwong](https://github.com/wingkwong)
- Improved the `AvatarGroup` component's count rendering logic for better performance and flexibility. [PR](https://github.com/heroui-inc/heroui/pull/2669) - [@wingkwong](https://github.com/wingkwong)
- Add RTL support to the kbd component. [PR](https://github.com/heroui-inc/heroui/pull/2482) - [@mrbadri](https://github.com/mrbadri)
- Add RTL support to the Select component. [PR](https://github.com/heroui-inc/heroui/pull/2485) - [@mrbadri](https://github.com/mrbadri)
- Add RTL support to the avatar group componen. [PR](https://github.com/heroui-inc/heroui/pull/2498) - [@mrbadri](https://github.com/mrbadri)
- Add RTL support to the Table component. [PR](https://github.com/heroui-inc/heroui/pull/2472) - [@mrbadri](https://github.com/mrbadri)

**Documentation**:
- Updated documentation to reflect the new features and changes in the `AvatarGroup` component.
- Added support for the "bun" package manager across documentation and components. [PR](https://github.com/heroui-inc/heroui/pull/2625) - [@sudongyuer](https://github.com/sudongyuer)
- [Kapa.ai](https://www.kapa.ai/) widget was added to the documentation to provide AI support for users. [PR](https://github.com/heroui-inc/heroui/pull/2428) - [@wingkwong](https://github.com/sudongyuer)
- Layout docs updated to remove the `units` configuration from the `tailwind.config.(js|ts)` file.


Special thanks to NextUI Team members [@kuri-sun](https://github.com/kuri-sun), [@ryo-manba](https://github.com/ryo-manba),
[@sudongyuer](https://github.com/sudongyuer), [@winchesHe](https://github.com/winchesHe), [@wingkwong](https://github.com/wingkwong),
[@tianenpang](https://github.com/tianenpang), [@smultar](https://github.com/smultar) and contributors for their contributions to this release.

For a full list of changes, please refer to the [release notes](https://github.com/heroui-inc/heroui/releases/tag/%40nextui-org%2Freact%402.3.0).

<Spacer y={6} />

We hope you enjoy these new components and the new features. We're excited to see what you build with them!

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!

<Community />

## Contributing

PR's on HeroUI are always welcome, please see our [contribution guidelines](https://github.com/heroui-inc/heroui/blob/main/CONTRIBUTING.md) to learn how you can contribute to this project.