v3.0.0-beta.8

March 2, 2026

This release adds three new components: Badge, Pagination, and Table, plus new InputContainer composition APIs for DateField and TimeField.

⚠️ Breaking changes: TextField CSS classes were renamed from .text-field to .textfield.

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.

What's New

New Components

• Badge: Compact status + count indicator with color, variant, placement, and size options. (Docs)
• Pagination: Compound pagination primitives with summary, ellipsis, and previous/next controls. (Docs)
• Table: Data table primitives with sorting, selection, resizing, async loading, and footer composition. (Docs)

Badge

New badge primitives for counters, labels, and anchored overlays with Badge.Anchor and Badge.Label.

Pagination

New navigation component built with composable parts (Root, Content, Item, Link, Previous, Next, Summary, Ellipsis).

Table

Compound data table on React Aria with sortable columns, row selection, custom cells, load-more sentinel rows, and resizable columns.

Custom Cells:

Pagination:

Empty State:

Component + API Improvements

DateField and TimeField Enhancements

DateField and TimeField now expose InputContainer to wrap input segments between prefix and suffix content.

Before:

<DateField.Group>
  <DateField.Prefix>...</DateField.Prefix>
  <DateField.Input>
    {(segment) => <DateField.Segment segment={segment} />}
  </DateField.Input>
  <DateField.Suffix>...</DateField.Suffix>
</DateField.Group>

After:

<DateField.Group>
  <DateField.Prefix>...</DateField.Prefix>
  <DateField.InputContainer>
    <DateField.Input>
      {(segment) => <DateField.Segment segment={segment} />}
    </DateField.Input>
  </DateField.InputContainer>
  <DateField.Suffix>...</DateField.Suffix>
</DateField.Group>

⚠️ Breaking Changes

TextField Class + Path Renames

TextField style naming was normalized to avoid conflicts with Tailwind's text-* utility prefix.

Component	Old Class Name	New Class Name	Notes
TextField Root	.text-field	.textfield	Root class renamed
TextField Full Width	.text-field--full-width	.textfield--full-width	Modifier class renamed

Additional renames in the same change:

• Style file: text-field.css -> textfield.css
• Styles export path: @heroui/styles/src/components/text-field -> @heroui/styles/src/components/textfield

Style Fixes

• RangeCalendar: Added rounded corners to calendar cells for range selection visuals (#6270)

Bug Fixes

• Added required-state red asterisk behavior for DatePicker and DateRangePicker by propagating data-required from isRequired (#6270)
• Fixed missing invalid trigger styling in Autocomplete and Select by scoping invalid styles to root state (#6270)
• Updated TextField docs/demo references to the new textfield-* demo keys and source/style paths (#6270)

Links

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

Contributors

Thanks to everyone who contributed to this release!