# v3.0.0-beta.8 · HeroUI

> 3 new components (Badge, Pagination, Table), DateField improvements, and key API/style fixes.

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

March 2, 2026


This release adds three new components: [Badge](/systems/heroui/docs/components/badge), [Pagination](/systems/heroui/docs/components/pagination), and [Table](/systems/heroui/docs/components/table), plus new `InputContainer` composition APIs for [DateField](/systems/heroui/docs/components/date-field) and [TimeField](/systems/heroui/docs/components/time-field).

⚠️ **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](/docs/ui-for-agents/mcp-server).


## What's New

### New Components

- **[Badge](#badge)**: Compact status + count indicator with color, variant, placement, and size options. ([Docs](/systems/heroui/docs/components/badge))
- **[Pagination](#pagination)**: Compound pagination primitives with summary, ellipsis, and previous/next controls. ([Docs](/systems/heroui/docs/components/pagination))
- **[Table](#table)**: Data table primitives with sorting, selection, resizing, async loading, and footer composition. ([Docs](/systems/heroui/docs/components/table))

### Badge

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


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


### Pagination

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


> Example `pagination-with-ellipsis`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-beta-8


### Table

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


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


**Custom Cells:**


> Example `table-custom-cells`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-beta-8


**Pagination:**


> Example `table-pagination`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-beta-8


**Empty State:**


> Example `table-empty-state`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-beta-8


## 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>
```


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


## ⚠️ 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](https://github.com/heroui-inc/heroui/pull/6270))

## Bug Fixes

- Added required-state red asterisk behavior for **DatePicker** and **DateRangePicker** by propagating `data-required` from `isRequired` ([#6270](https://github.com/heroui-inc/heroui/pull/6270))
- Fixed missing invalid trigger styling in **Autocomplete** and **Select** by scoping invalid styles to root state ([#6270](https://github.com/heroui-inc/heroui/pull/6270))
- Updated TextField docs/demo references to the new `textfield-*` demo keys and source/style paths ([#6270](https://github.com/heroui-inc/heroui/pull/6270))

## 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 #6270](https://github.com/heroui-inc/heroui/pull/6270)

## Contributors

Thanks to everyone who contributed to this release!

---

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