# v3.0.0-beta.7 **Category**: react **URL**: https://www.heroui.com/docs/react/releases/v3-0-0-beta-7 **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/releases/v3-0-0-beta-7.mdx > 4 new components (Calendar, RangeCalendar, DatePicker, DateRangePicker) and APIs improvements. ***
February 19, 2026
This release adds 4 new components: [Calendar](/docs/components/calendar), [RangeCalendar](/docs/components/range-calendar), [DatePicker](/docs/components/date-picker), and [DateRangePicker](/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: ```bash npm i @heroui/styles@beta @heroui/react@beta ``` ```bash pnpm add @heroui/styles@beta @heroui/react@beta ``` ```bash yarn add @heroui/styles@beta @heroui/react@beta ``` ```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](/docs/components/calendar)) - **[RangeCalendar](#rangecalendar)**: Date ranges with range highlighting and multi-month. ([Docs](/docs/components/range-calendar)) - **[DatePicker](#datepicker)**: Date field + popover calendar. ([Docs](/docs/components/date-picker)) - **[DateRangePicker](#daterangepicker)**: Two date fields + popover range calendar. ([Docs](/docs/components/date-range-picker)) ### Calendar Single-date calendar with year picker, cell indicators, multi-month view, and i18n calendars. ```tsx "use client"; import {Calendar} from "@heroui/react"; export function Basic() { return ( {(day) => {day}} {(date) => } ); } ``` **Year Picker:** ```tsx "use client"; import {Calendar} from "@heroui/react"; export function YearPicker() { return ( {(day) => {day}} {(date) => } {({year}) => } ); } ``` **International Calendars:** ```tsx "use client"; import {Calendar} from "@heroui/react"; import {getLocalTimeZone, today} from "@internationalized/date"; import {I18nProvider} from "react-aria-components"; export function InternationalCalendar() { return ( {(day) => {day}} {(date) => } {({year}) => } ); } ``` ### RangeCalendar Date range selection with range highlighting and multi-month views. ```tsx "use client"; import {RangeCalendar} from "@heroui/react"; export function Basic() { return ( {(day) => {day}} {(date) => } ); } ``` **Multiple Months:** ```tsx "use client"; import {RangeCalendar} from "@heroui/react"; import {getLocalTimeZone} from "@internationalized/date"; import React from "react"; import {RangeCalendarStateContext, useLocale} from "react-aria-components"; function RangeCalendarMonthHeading({offset = 0}: {offset?: number}) { const state = React.useContext(RangeCalendarStateContext)!; const {locale} = useLocale(); const startDate = state.visibleRange.start; const monthDate = startDate.add({months: offset}); const dateObj = monthDate.toDate(getLocalTimeZone()); const monthYear = new Intl.DateTimeFormat(locale, {month: "long", year: "numeric"}).format( dateObj, ); return {monthYear}; } export function MultipleMonths() { return (
{(day) => {day}} {(date) => }
{(day) => {day}} {(date) => }
); } ``` ### DatePicker Date field + popover calendar. Format options, i18n, custom indicators, validation. ```tsx "use client"; import {Calendar, DateField, DatePicker, Label} from "@heroui/react"; export function Basic() { return ( {(segment) => } {(day) => {day}} {(date) => } {({year}) => } ); } ``` **Date and Time (with TimeField):** ```tsx "use client"; import type {TimeValue} from "@heroui/react"; import type {DateValue} from "@internationalized/date"; import { Calendar, DateField, DatePicker, Label, ListBox, Select, Switch, TimeField, } from "@heroui/react"; import {getLocalTimeZone, parseDate, parseZonedDateTime} from "@internationalized/date"; import {useMemo, useState} from "react"; type Granularity = "day" | "hour" | "minute" | "second"; type HourCycle = 12 | 24; const granularityOptions: {label: string; value: Granularity}[] = [ {label: "Day", value: "day"}, {label: "Hour", value: "hour"}, {label: "Minute", value: "minute"}, {label: "Second", value: "second"}, ]; const hourCycleOptions: {label: string; value: HourCycle}[] = [ {label: "12-hour", value: 12}, {label: "24-hour", value: 24}, ]; export function FormatOptions() { const [granularity, setGranularity] = useState("minute"); const [hourCycle, setHourCycle] = useState(12); const [hideTimeZone, setHideTimeZone] = useState(false); const [shouldForceLeadingZeros, setShouldForceLeadingZeros] = useState(false); const timeGranularity = granularity !== "day" ? granularity : undefined; const showTimeField = !!timeGranularity; const defaultValue = useMemo(() => { const localTimeZone = getLocalTimeZone(); if (granularity === "day") { return parseDate("2026-02-03"); } return parseZonedDateTime(`2026-02-03T08:45:00[${localTimeZone}]`); }, [granularity]); return (
{({state}) => ( <> {(segment) => } {(day) => {day}} {(date) => } {({year}) => } {!!showTimeField && (
state.setTimeValue(v as TimeValue)} > {(segment) => }
)} )}
); } ``` ### DateRangePicker Two date fields + popover range calendar. ```tsx "use client"; import {DateField, DateRangePicker, Label, RangeCalendar} from "@heroui/react"; export function Basic() { return ( {(segment) => } {(segment) => } {(day) => {day}} {(date) => } {({year}) => } ); } ``` ## 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'; Get notified when someone mentions you ``` ### Tabs.Separator The [Tabs](/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. ### 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 */} Tab 1 Tab 2 ``` **After:** ```tsx {/* No separators by default — explicitly add them where needed */} Tab 1 Tab 2 ``` **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'; ... {(segment) => } ... Pick a date ``` **After:** ```tsx import {DateField, Label, Description} from '@heroui/react'; ... {(segment) => } ... Pick a date ``` #### 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'; ``` **After:** ```tsx import {ColorField, Label, ColorSwatch} from '@heroui/react'; ``` > **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](/docs/react/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!