v3.0.0-beta.8
3 new components (Badge, Pagination, Table), DateField improvements, and key API/style fixes.
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@betapnpm add @heroui/styles@beta @heroui/react@betayarn add @heroui/styles@beta @heroui/react@betabun add @heroui/styles@beta @heroui/react@betaUsing 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-requiredfromisRequired(#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
Contributors
Thanks to everyone who contributed to this release!