v3.0.0-beta.8

<div className="flex items-center gap-3 mb-6"> <span className="text-sm text-muted">March 2, 2026</span> </div>

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:

<Tabs items={["npm", "pnpm", "yarn", "bun"]}> <Tab value="npm"> bash npm i @heroui/styles@beta @heroui/react@beta </Tab> <Tab value="pnpm"> bash pnpm add @heroui/styles@beta @heroui/react@beta </Tab> <Tab value="yarn"> bash yarn add @heroui/styles@beta @heroui/react@beta </Tab> <Tab value="bun"> bash bun add @heroui/styles@beta @heroui/react@beta </Tab> </Tabs>

<Callout type="info"> **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). </Callout>

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:

tsx

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

After:

tsx

<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)

Contributors

Thanks to everyone who contributed to this release!