v3.0.0-beta.8

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 i @heroui/styles@beta @heroui/react@beta

pnpm add @heroui/styles@beta @heroui/react@beta

yarn add @heroui/styles@beta @heroui/react@beta

bun add @heroui/styles@beta @heroui/react@beta

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.

import {Avatar, Badge} from "@heroui/react";

const GREEN_AVATAR_URL = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg";
const ORANGE_AVATAR_URL =
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/orange.jpg";

Pagination

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

"use client";

import {Pagination} from "@heroui/react";
import {useState} from "react";

Table

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

import {Table} from "@heroui/react";

export function Basic() {
  return (
    <Table>

Custom Cells:

"use client";

import type {Selection, SortDescriptor} from "@heroui/react";

import {Avatar, Button, Checkbox, Chip, Table, cn} from "@heroui/react";

Pagination:

"use client";

import {Pagination, Table} from "@heroui/react";
import {useMemo, useState} from "react";

Empty State:

"use client";

import {EmptyState, Table} from "@heroui/react";
import {Icon} from "@iconify/react";

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>

"use client";

import type {TimeValue} from "@heroui/react";

import {DateField, DateRangePicker, Label, RangeCalendar, TimeField} from "@heroui/react";

⚠️ Breaking Changes

TextField Class + Path Renames

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

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!