# v3.0.0-beta.7 · HeroUI

> 4 new components (Calendar, RangeCalendar, DatePicker, DateRangePicker) and APIs improvements.

- Page: https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-beta-7
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

February 19, 2026


This release adds 4 new components: [Calendar](/systems/heroui/docs/components/calendar), [RangeCalendar](/systems/heroui/docs/components/range-calendar), [DatePicker](/systems/heroui/docs/components/date-picker), and [DateRangePicker](/systems/heroui/docs/components/date-range-picker). Also new: [Switch.Content](#switchcontent) for grouping label and description, and [Tabs.Separator](#tabsseparator) 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


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

#### pnpm


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

#### yarn


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

#### bun


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


> 
  **Using AI assistants?** Simply prompt "Hey Cursor, update HeroUI to the latest version" and your AI assistant will automatically compare versions and apply the necessary changes. Learn more about the [HeroUI MCP Server](/docs/ui-for-agents/mcp-server).


## 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`](https://react-aria.adobe.com/internationalized/date/) types (`CalendarDate`, `CalendarDateTime`, `ZonedDateTime`). Wrap with [`I18nProvider`](https://react-aria.adobe.com/I18nProvider) to override locale; read it with [`useLocale`](https://react-aria.adobe.com/useLocale).

### New Components

- **[Calendar](#calendar)**: Single date selection, year picker, indicators, multi-month. ([Docs](/systems/heroui/docs/components/calendar))
- **[RangeCalendar](#rangecalendar)**: Date ranges with range highlighting and multi-month. ([Docs](/systems/heroui/docs/components/range-calendar))
- **[DatePicker](#datepicker)**: Date field + popover calendar. ([Docs](/systems/heroui/docs/components/date-picker))
- **[DateRangePicker](#daterangepicker)**: Two date fields + popover range calendar. ([Docs](/systems/heroui/docs/components/date-range-picker))

### Calendar

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


> Example `calendar-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-beta-7


**Year Picker:**


> Example `calendar-year-picker`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-beta-7


**International Calendars:**


> Example `calendar-international-calendar`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-beta-7


### RangeCalendar

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


> Example `range-calendar-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-beta-7


**Multiple Months:**


> Example `range-calendar-multiple-months`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-beta-7


### DatePicker

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


> Example `date-picker-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-beta-7


**Date and Time (with TimeField):**


> Example `date-picker-format-options`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-beta-7


### DateRangePicker

Two date fields + popover range calendar.


> Example `date-range-picker-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-beta-7


## API Improvements

### Switch.Content

`Switch.Content` groups label and description next to the switch control ([#6240](https://github.com/heroui-inc/heroui/pull/6240)).

**Before:**
```tsx
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](/systems/heroui/docs/components/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](https://github.com/heroui-inc/heroui/pull/6243)).

Separators are now **opt-in** — add `` inside each `` where you want a separator line.


> Example `tabs-with-separator`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-beta-7


### 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](#-breaking-changes) for migration details.

### Breadcrumbs Fix

Props passed to `Breadcrumbs.Item` are now forwarded to the underlying `Link` ([#6233](https://github.com/heroui-inc/heroui/pull/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](https://react-aria.adobe.com/customization#dom-elements) 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 `` sub-component instead of being automatically generated via CSS pseudo-elements ([#6243](https://github.com/heroui-inc/heroui/pull/6243)).

**Before:**
```tsx
{/* 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:**
```tsx
{/* 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:**
```tsx
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:**
```tsx
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:

| Before | After |
|--------|-------|
| `DateInputGroup` | `TimeField.Group` |
| `DateInputGroup.Input` | `TimeField.Input` |
| `DateInputGroup.Segment` | `TimeField.Segment` |
| `DateInputGroup.Prefix` | `TimeField.Prefix` |
| `DateInputGroup.Suffix` | `TimeField.Suffix` |

#### ColorField Changes

| Before | After |
|--------|-------|
| `ColorInputGroup` | `ColorField.Group` |
| `ColorInputGroup.Input` | `ColorField.Input` |
| `ColorInputGroup.Prefix` | `ColorField.Prefix` |
| `ColorInputGroup.Suffix` | `ColorField.Suffix` |

**Usage:**

```tsx
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:**
```tsx
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](/systems/heroui/docs/components)
- [Design System - Figma Kit V3](https://www.figma.com/community/file/1546526812159103429/heroui-figma-kit-v3)
- [GitHub Repository](https://github.com/heroui-inc/heroui)
- [GitHub PR #6237](https://github.com/heroui-inc/heroui/pull/6237)

## Contributors

Thanks to everyone who contributed to this release!

---

Index of all JGuang resources: https://jiguang132.com/llms.txt