v3.0.0-beta.7

This release adds 4 new components: Calendar, RangeCalendar, DatePicker, and DateRangePicker. Also new: Switch.Content for grouping label and description, and Tabs.Separator for opt-in separator lines between tabs.

⚠️ Breaking changes: hideSeparator removed from Tabs; DateInputGroup and ColorInputGroup moved under DateField.Group, TimeField.Group, and ColorField.Group.

Installation

Update to the latest version:

npm i @heroui/styles@beta @heroui/react@beta

pnpm add @heroui/styles@beta @heroui/react@beta

yarn add @heroui/styles@beta @heroui/react@beta

bun add @heroui/styles@beta @heroui/react@beta

What's New

Date & Time System

Date & Time — Calendar, DatePicker, RangeCalendar, and DateRangePicker built on React Aria date primitives. Supports i18n, time zones, and full keyboard/ARIA accessibility.

Key features:

• Calendar systems: Gregorian, Buddhist, Persian, and others
• Year picker: Overlay for quick year navigation
• Cell indicators: Events, availability, or status dots on cells
• Range selection: Date ranges with visual highlighting
• Accessible: Keyboard nav, screen readers, ARIA

All date values use @internationalized/date types (CalendarDate, CalendarDateTime, ZonedDateTime). Wrap with I18nProvider to override locale; read it with useLocale.

New Components

• Calendar: Single date selection, year picker, indicators, multi-month. (Docs)
• RangeCalendar: Date ranges with range highlighting and multi-month. (Docs)
• DatePicker: Date field + popover calendar. (Docs)
• DateRangePicker: Two date fields + popover range calendar. (Docs)

Calendar

Single-date calendar with year picker, cell indicators, multi-month view, and i18n calendars.

"use client";

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

export function Basic() {

Year Picker:

"use client";

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

export function YearPicker() {

International Calendars:

"use client";

import {Calendar} from "@heroui/react";
import {getLocalTimeZone, today} from "@internationalized/date";
import {I18nProvider} from "react-aria-components";

RangeCalendar

Date range selection with range highlighting and multi-month views.

"use client";

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

export function Basic() {

Multiple Months:

"use client";

import {RangeCalendar} from "@heroui/react";
import {getLocalTimeZone} from "@internationalized/date";
import React from "react";

DatePicker

Date field + popover calendar. Format options, i18n, custom indicators, validation.

"use client";

import {Calendar, DateField, DatePicker, Label} from "@heroui/react";

export function Basic() {

Date and Time (with TimeField):

"use client";

import type {TimeValue} from "@heroui/react";
import type {DateValue} from "@internationalized/date";

DateRangePicker

Two date fields + popover range calendar.

"use client";

import {DateField, DateRangePicker, Label, RangeCalendar} from "@heroui/react";

export function Basic() {

API Improvements

Switch.Content

Switch.Content groups label and description next to the switch control (#6240).

Before:

import { Switch, Label, Description } from '@heroui/react';

<Switch>
  <Switch.Control>
    <Switch.Thumb />
  </Switch.Control>
  <Switch.Content>
    <Label>Email notifications</Label>
    <Description>Get notified when someone mentions you</Description>
  </Switch.Content>
</Switch>

Tabs.Separator

The Tabs component now includes an explicit Tabs.Separator sub-component for adding visual separator lines between tabs. This replaces the previous automatic CSS pseudo-element separator and the hideSeparator prop (#6243).

Separators are now opt-in — add <Tabs.Separator /> inside each <Tabs.Tab> where you want a separator line.

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

export function WithSeparator() {
  return (
    <Tabs className="w-full max-w-md">

Field Sub-Component Consolidation

DateField, TimeField, and ColorField now expose their input group sub-components directly, removing the need to import DateInputGroup or ColorInputGroup separately. See Breaking Changes for migration details.

Breadcrumbs Fix

Props passed to Breadcrumbs.Item are now forwarded to the underlying Link (#6233).

Style Fixes

• ListBox Item: Adjusted hover background color from bg-default-hover to bg-default for consistency
• Date Input Group: Changed segment text from tabular-nums to text-nowrap for better layout
• Date Input Group: Improved focus-within styles to exclude date picker trigger from field focus highlighting

Dependencies

• React Aria Components: Updated from 1.14.0 to 1.15.0 — adds a new render prop for customizing the DOM element rendered by any React Aria component (useful for router links, animation libraries like Motion, etc.)
• @react-aria/utils: Updated from 3.32.0 to 3.33.0
• @react-types/shared: Updated from 3.32.1 to 3.33.0
• @internationalized/date: Updated from 3.10.1 to 3.11.0 — date fields now constrain on blur instead of as you type
• Added @react-aria/i18n and @react-stately/utils for calendar i18n

⚠️ Breaking Changes

Tabs — hideSeparator Prop Removed

The hideSeparator prop has been removed from the Tabs component. Separators are now opt-in using the new <Tabs.Separator /> sub-component instead of being automatically generated via CSS pseudo-elements (#6243).

Before:

{/* Separators shown by default, hidden via prop */}
<Tabs hideSeparator>
  <Tabs.List>
    <Tabs.Tab id="tab1">Tab 1<Tabs.Indicator /></Tabs.Tab>
    <Tabs.Tab id="tab2">Tab 2<Tabs.Indicator /></Tabs.Tab>
  </Tabs.List>
</Tabs>

After:

{/* No separators by default — explicitly add them where needed */}
<Tabs>
  <Tabs.List>
    <Tabs.Tab id="tab1"><Tabs.Indicator />Tab 1</Tabs.Tab>
    <Tabs.Tab id="tab2"><Tabs.Separator /><Tabs.Indicator />Tab 2</Tabs.Tab>
  </Tabs.List>
</Tabs>

CSS Changes:

• Tab separator styles moved from pseudo-element (.tabs__tab:not(:first-child):before) to a dedicated .tabs__separator class
• The [data-hide-separator] data attribute has been removed

Field Sub-Component API Changes

DateInputGroup and ColorInputGroup are no longer exported directly from @heroui/react. Their sub-components have been consolidated under their respective field components (DateField, TimeField, ColorField).

DateField Changes

Before:

import {DateField, Label, DateInputGroup, Description} from '@heroui/react';

<DateField>
  <Label>Date</Label>
  <DateInputGroup>
    <DateInputGroup.Prefix>...</DateInputGroup.Prefix>
    <DateInputGroup.Input>
      {(segment) => <DateInputGroup.Segment segment={segment} />}
    </DateInputGroup.Input>
    <DateInputGroup.Suffix>...</DateInputGroup.Suffix>
  </DateInputGroup>
  <Description>Pick a date</Description>
</DateField>

After:

import {DateField, Label, Description} from '@heroui/react';

<DateField>
  <Label>Date</Label>
  <DateField.Group>
    <DateField.Prefix>...</DateField.Prefix>
    <DateField.Input>
      {(segment) => <DateField.Segment segment={segment} />}
    </DateField.Input>
    <DateField.Suffix>...</DateField.Suffix>
  </DateField.Group>
  <Description>Pick a date</Description>
</DateField>

TimeField Changes

Same pattern as DateField:

ColorField Changes

Usage:

import {ColorField, Label, ColorInputGroup, ColorSwatch} from '@heroui/react';

<ColorField>
  <Label>Color</Label>
  <ColorInputGroup>
    <ColorInputGroup.Prefix>
      <ColorSwatch color="#000" />
    </ColorInputGroup.Prefix>
    <ColorInputGroup.Input />
  </ColorInputGroup>
</ColorField>

After:

import {ColorField, Label, ColorSwatch} from '@heroui/react';

<ColorField>
  <Label>Color</Label>
  <ColorField.Group>
    <ColorField.Prefix>
      <ColorSwatch color="#000" />
    </ColorField.Prefix>
    <ColorField.Input />
  </ColorField.Group>
</ColorField>

Note: The underlying CSS classes (.date-input-group, .color-input-group, etc.) remain unchanged. Only the JavaScript import paths and component names have changed.

Links

• Component Documentation
• Design System - Figma Kit V3
• GitHub Repository
• GitHub PR #6237

Contributors

Thanks to everyone who contributed to this release!