v3.0.0-beta.7

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

February 19, 2026

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:

1npm i @lenso/tokens@beta @lenso/ui@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.

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.

1"use client";2
3/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. */4import { Calendar } from "@lenso/ui";5
6export function Basic() {7  return (8    <Calendar aria-label="Event date">9      <Calendar.Header>10        <Calendar.Heading />11        <Calendar.NavButton slot="previous" />12        <Calendar.NavButton slot="next" />13      </Calendar.Header>14      <Calendar.Grid>15        <Calendar.GridHeader>16          {(day) => <Calendar.HeaderCell>{day}</Calendar.HeaderCell>}17        </Calendar.GridHeader>18        <Calendar.GridBody>{(date) => <Calendar.Cell date={date} />}</Calendar.GridBody>19      </Calendar.Grid>20    </Calendar>21  );22}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Year Picker:

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. */3import { Calendar } from "@lenso/ui";4
5export function YearPicker() {6  return (7    <Calendar aria-label="Event date">8      <Calendar.Header>9        <Calendar.YearPickerTrigger>10          <Calendar.YearPickerTriggerHeading />11          <Calendar.YearPickerTriggerIndicator />12        </Calendar.YearPickerTrigger>13        <Calendar.NavButton slot="previous" />14        <Calendar.NavButton slot="next" />15      </Calendar.Header>16      <Calendar.Grid>17        <Calendar.GridHeader>18          {(day) => <Calendar.HeaderCell>{day}</Calendar.HeaderCell>}19        </Calendar.GridHeader>20        <Calendar.GridBody>{(date) => <Calendar.Cell date={date} />}</Calendar.GridBody>21      </Calendar.Grid>22      <Calendar.YearPickerGrid>23        <Calendar.YearPickerGridBody>24          {({ year }) => <Calendar.YearPickerCell year={year} />}25        </Calendar.YearPickerGridBody>26      </Calendar.YearPickerGrid>27    </Calendar>28  );29}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

International Calendars:

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. */3import { Calendar } from "@lenso/ui";4import { getLocalTimeZone, today } from "@internationalized/date";5import { I18nProvider } from "react-aria-components/I18nProvider";6
7export function InternationalCalendar() {8  return (9    <I18nProvider locale="hi-IN-u-ca-indian">10      <Calendar aria-label="Event date" defaultValue={today(getLocalTimeZone())}>11        <Calendar.Header>12          <Calendar.YearPickerTrigger>13            <Calendar.YearPickerTriggerHeading />14            <Calendar.YearPickerTriggerIndicator />15          </Calendar.YearPickerTrigger>16          <Calendar.NavButton slot="previous" />17          <Calendar.NavButton slot="next" />18        </Calendar.Header>19        <Calendar.Grid>20          <Calendar.GridHeader>21            {(day) => <Calendar.HeaderCell>{day}</Calendar.HeaderCell>}22          </Calendar.GridHeader>23          <Calendar.GridBody>{(date) => <Calendar.Cell date={date} />}</Calendar.GridBody>24        </Calendar.Grid>25        <Calendar.YearPickerGrid>26          <Calendar.YearPickerGridBody>27            {({ year }) => <Calendar.YearPickerCell year={year} />}28          </Calendar.YearPickerGridBody>29        </Calendar.YearPickerGrid>30      </Calendar>31    </I18nProvider>32  );33}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

RangeCalendar

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

1"use client";2
3/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. */4import { RangeCalendar } from "@lenso/ui";5
6export function Basic() {7  return (8    <RangeCalendar aria-label="Trip dates" firstDayOfWeek="mon">9      <RangeCalendar.Header>10        <RangeCalendar.Heading />11        <RangeCalendar.NavButton slot="previous" />12        <RangeCalendar.NavButton slot="next" />13      </RangeCalendar.Header>14      <RangeCalendar.Grid>15        <RangeCalendar.GridHeader>16          {(day) => <RangeCalendar.HeaderCell>{day}</RangeCalendar.HeaderCell>}17        </RangeCalendar.GridHeader>18        <RangeCalendar.GridBody>19          {(date) => <RangeCalendar.Cell date={date} />}20        </RangeCalendar.GridBody>21      </RangeCalendar.Grid>22    </RangeCalendar>23  );24}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Multiple Months:

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX. */3import { RangeCalendar } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  root: { containerType: "normal", width: "100%", maxWidth: "none", overflowX: "auto" },7  months: { marginInline: "auto", display: "flex", width: "max-content", gap: 32 },8  month: { width: 256 },9  heading: { flex: "none" },10  spacer: { width: 24, height: 24 },11});12export function MultipleMonths() {13  return (14    <RangeCalendar aria-label="Trip dates" xstyle={styles.root} visibleDuration={{ months: 2 }}>15      <div {...stylex.props(styles.months)}>16        <div {...stylex.props(styles.month)}>17          <RangeCalendar.Header>18            <RangeCalendar.NavButton slot="previous" />19            <RangeCalendar.Heading xstyle={styles.heading} />20            <div {...stylex.props(styles.spacer)} />21          </RangeCalendar.Header>22          <RangeCalendar.Grid>23            <RangeCalendar.GridHeader>24              {(day) => <RangeCalendar.HeaderCell>{day}</RangeCalendar.HeaderCell>}25            </RangeCalendar.GridHeader>26            <RangeCalendar.GridBody>27              {(date) => <RangeCalendar.Cell date={date} />}28            </RangeCalendar.GridBody>29          </RangeCalendar.Grid>30        </div>31        <div {...stylex.props(styles.month)}>32          <RangeCalendar.Header>33            <div {...stylex.props(styles.spacer)} />34            <RangeCalendar.Heading xstyle={styles.heading} offset={{ months: 1 }} />35            <RangeCalendar.NavButton slot="next" />36          </RangeCalendar.Header>37          <RangeCalendar.Grid offset={{ months: 1 }}>38            <RangeCalendar.GridHeader>39              {(day) => <RangeCalendar.HeaderCell>{day}</RangeCalendar.HeaderCell>}40            </RangeCalendar.GridHeader>41            <RangeCalendar.GridBody>42              {(date) => <RangeCalendar.Cell date={date} />}43            </RangeCalendar.GridBody>44          </RangeCalendar.Grid>45        </div>46      </div>47    </RangeCalendar>48  );49}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

DatePicker

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

1"use client";2
3/** Adapted from the pinned HeroUI v3.2.6 basic.json. Copyright NextUI Inc. Apache-2.0. Local RAC label and StyleX replace source Label and utility classes. */4import { Calendar, DateField, DatePicker } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6
7const styles = stylex.create({ field: { width: 288 } });8export function Basic() {9  return (10    <DatePicker xstyle={styles.field} name="date">11      <DatePicker.Label>Date</DatePicker.Label>12      <DateField.Group fullWidth>13        <DateField.Input>{(segment) => <DateField.Segment segment={segment} />}</DateField.Input>14        <DateField.Suffix>15          <DatePicker.Trigger>16            <DatePicker.TriggerIndicator />17          </DatePicker.Trigger>18        </DateField.Suffix>19      </DateField.Group>20      <DatePicker.Popover>21        <Calendar aria-label="Event date">22          <Calendar.Header>23            <Calendar.YearPickerTrigger>24              <Calendar.YearPickerTriggerHeading />25              <Calendar.YearPickerTriggerIndicator />26            </Calendar.YearPickerTrigger>27            <Calendar.NavButton slot="previous" />28            <Calendar.NavButton slot="next" />29          </Calendar.Header>30          <Calendar.Grid>31            <Calendar.GridHeader>32              {(day) => <Calendar.HeaderCell>{day}</Calendar.HeaderCell>}33            </Calendar.GridHeader>34            <Calendar.GridBody>{(date) => <Calendar.Cell date={date} />}</Calendar.GridBody>35          </Calendar.Grid>36          <Calendar.YearPickerGrid>37            <Calendar.YearPickerGridBody>38              {({ year }) => <Calendar.YearPickerCell year={year} />}39            </Calendar.YearPickerGridBody>40          </Calendar.YearPickerGrid>41        </Calendar>42      </DatePicker.Popover>43    </DatePicker>44  );45}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Date and Time (with TimeField):

1"use client";2/** Adapted from HeroUI v3.2.6 format-options.json. Copyright NextUI Inc. Apache-2.0. */3import { DatePicker, TimeField } from "@lenso/ui";4import {5  getLocalTimeZone,6  parseDate,7  parseZonedDateTime,8  type DateValue,9} from "@internationalized/date";10import { useMemo, useState } from "react";11import * as stylex from "@stylexjs/stylex";12import { PickerCalendar, PickerInput } from "./parts";13import { FormatControls, formatStyles, type Granularity, type HourCycle } from "./format-controls";14
15export function FormatOptions() {16  const [granularity, setGranularity] = useState<Granularity>("minute");17  const [hourCycle, setHourCycle] = useState<HourCycle>(12);18  const [hideTimeZone, setHideTimeZone] = useState(false);19  const [shouldForceLeadingZeros, setShouldForceLeadingZeros] = useState(false);20  const timeGranularity = granularity !== "day" ? granularity : undefined;21  const defaultValue = useMemo<DateValue>(22    () =>23      granularity === "day"24        ? parseDate("2026-02-03")25        : parseZonedDateTime(`2026-02-03T08:45:00[${getLocalTimeZone()}]`),26    [granularity],27  );28  return (29    <div {...stylex.props(formatStyles.stack)}>30      <DatePicker31        key={granularity}32        xstyle={formatStyles.field}33        defaultValue={defaultValue}34        granularity={granularity}35        hourCycle={hourCycle}36        hideTimeZone={hideTimeZone}37        shouldForceLeadingZeros={shouldForceLeadingZeros}38        name="date"39      >40        {({ state }) => (41          <>42            <DatePicker.Label>Date and time</DatePicker.Label>43            <PickerInput />44            <DatePicker.Popover xstyle={formatStyles.popover}>45              <PickerCalendar />46              {timeGranularity && (47                <div {...stylex.props(formatStyles.timeRow)}>48                  <span {...stylex.props(formatStyles.label)}>Time</span>49                  <TimeField50                    aria-label="Time"51                    granularity={timeGranularity}52                    hourCycle={hourCycle}53                    hideTimeZone={hideTimeZone}54                    name="time"55                    shouldForceLeadingZeros={shouldForceLeadingZeros}56                    value={state.timeValue}57                    onChange={(value) => {58                      if (value) state.setTimeValue(value);59                    }}60                  >61                    <TimeField.Group variant="secondary">62                      <TimeField.Input>63                        {(segment) => <TimeField.Segment segment={segment} />}64                      </TimeField.Input>65                    </TimeField.Group>66                  </TimeField>67                </div>68              )}69            </DatePicker.Popover>70          </>71        )}72      </DatePicker>73      <FormatControls74        {...{75          granularity,76          setGranularity,77          hourCycle,78          setHourCycle,79          hideTimeZone,80          setHideTimeZone,81          shouldForceLeadingZeros,82          setShouldForceLeadingZeros,83        }}84      />85    </div>86  );87}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

DateRangePicker

Two date fields + popover range calendar.

1"use client";2
3/** Adapted from the pinned HeroUI v3.2.6 basic.json. Copyright NextUI Inc. Apache-2.0. Local RAC label and StyleX replace source Label and utility classes. */4import { DateField, DateRangePicker, RangeCalendar } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6
7const styles = stylex.create({ field: { width: 320 } });8export function Basic() {9  return (10    <DateRangePicker xstyle={styles.field} endName="endDate" startName="startDate">11      <DateRangePicker.Label>Trip dates</DateRangePicker.Label>12      <DateField.Group fullWidth>13        <DateField.Input slot="start">14          {(segment) => <DateField.Segment segment={segment} />}15        </DateField.Input>16        <DateRangePicker.RangeSeparator />17        <DateField.Input slot="end">18          {(segment) => <DateField.Segment segment={segment} />}19        </DateField.Input>20        <DateField.Suffix>21          <DateRangePicker.Trigger>22            <DateRangePicker.TriggerIndicator />23          </DateRangePicker.Trigger>24        </DateField.Suffix>25      </DateField.Group>26      <DateRangePicker.Popover>27        <RangeCalendar aria-label="Trip dates">28          <RangeCalendar.Header>29            <RangeCalendar.YearPickerTrigger>30              <RangeCalendar.YearPickerTriggerHeading />31              <RangeCalendar.YearPickerTriggerIndicator />32            </RangeCalendar.YearPickerTrigger>33            <RangeCalendar.NavButton slot="previous" />34            <RangeCalendar.NavButton slot="next" />35          </RangeCalendar.Header>36          <RangeCalendar.Grid>37            <RangeCalendar.GridHeader>38              {(day) => <RangeCalendar.HeaderCell>{day}</RangeCalendar.HeaderCell>}39            </RangeCalendar.GridHeader>40            <RangeCalendar.GridBody>41              {(date) => <RangeCalendar.Cell date={date} />}42            </RangeCalendar.GridBody>43          </RangeCalendar.Grid>44          <RangeCalendar.YearPickerGrid>45            <RangeCalendar.YearPickerGridBody>46              {({ year }) => <RangeCalendar.YearPickerCell year={year} />}47            </RangeCalendar.YearPickerGridBody>48          </RangeCalendar.YearPickerGrid>49        </RangeCalendar>50      </DateRangePicker.Popover>51    </DateRangePicker>52  );53}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

API Improvements

Switch.Content

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

Before:

1import { Switch, Label, Description } from '@lenso/ui';2
3<Switch>4  <Switch.Control>5    <Switch.Thumb />6  </Switch.Control>7  <Switch.Content>8    <Label>Email notifications</Label>9    <Description>Get notified when someone mentions you</Description>10  </Switch.Content>11</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.

1"use client";2export { WithSeparator } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

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:

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

After:

1{/* No separators by default — explicitly add them where needed */}2<Tabs>3  <Tabs.List>4    <Tabs.Tab id="tab1"><Tabs.Indicator />Tab 1</Tabs.Tab>5    <Tabs.Tab id="tab2"><Tabs.Separator /><Tabs.Indicator />Tab 2</Tabs.Tab>6  </Tabs.List>7</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 @lenso/ui. Their sub-components have been consolidated under their respective field components (DateField, TimeField, ColorField).

DateField Changes

Before:

1import {DateField, Label, DateInputGroup, Description} from '@lenso/ui';2
3<DateField>4  <Label>Date</Label>5  <DateInputGroup>6    <DateInputGroup.Prefix>...</DateInputGroup.Prefix>7    <DateInputGroup.Input>8      {(segment) => <DateInputGroup.Segment segment={segment} />}9    </DateInputGroup.Input>10    <DateInputGroup.Suffix>...</DateInputGroup.Suffix>11  </DateInputGroup>12  <Description>Pick a date</Description>13</DateField>

After:

1import {DateField, Label, Description} from '@lenso/ui';2
3<DateField>4  <Label>Date</Label>5  <DateField.Group>6    <DateField.Prefix>...</DateField.Prefix>7    <DateField.Input>8      {(segment) => <DateField.Segment segment={segment} />}9    </DateField.Input>10    <DateField.Suffix>...</DateField.Suffix>11  </DateField.Group>12  <Description>Pick a date</Description>13</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:

1import {ColorField, Label, ColorInputGroup, ColorSwatch} from '@lenso/ui';2
3<ColorField>4  <Label>Color</Label>5  <ColorInputGroup>6    <ColorInputGroup.Prefix>7      <ColorSwatch color="#000" />8    </ColorInputGroup.Prefix>9    <ColorInputGroup.Input />10  </ColorInputGroup>11</ColorField>

After:

1import {ColorField, Label, ColorSwatch} from '@lenso/ui';2
3<ColorField>4  <Label>Color</Label>5  <ColorField.Group>6    <ColorField.Prefix>7      <ColorSwatch color="#000" />8    </ColorField.Prefix>9    <ColorField.Input />10  </ColorField.Group>11</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.

Contributors

Thanks to everyone who contributed to this release!

HeroUI contributors

v3.0.0-beta.7

Installation

What's New

Date & Time System

New Components

Calendar

RangeCalendar

DatePicker

DateRangePicker

API Improvements

Switch.Content

Tabs.Separator

Field Sub-Component Consolidation

Breadcrumbs Fix

Style Fixes

Dependencies

⚠️ Breaking Changes

Tabs — hideSeparator Prop Removed

Field Sub-Component API Changes

DateField Changes

TimeField Changes

ColorField Changes

Links

Contributors

Tabs — `hideSeparator` Prop Removed