v3.0.0-rc.1

Seven new components: Drawer, ToggleButton, ToggleButtonGroup, Meter, ProgressBar, ProgressCircle, and Toolbar. Table and ListBox gain virtualization, ButtonGroup gets a Separator sub-component + vertical orientation, and React Aria Components is bumped to v1.16.0.

<DocsImage src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/versions/[email protected]" darkSrc="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/versions/[email protected]" alt="HeroUI v3 RC 1" href="/docs/changelog/v3-0-0-rc-1" />

Installation

Update to the latest version:

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

What's New

New Components

• Drawer: Slide-out panel with drag-to-dismiss, 4 placements, backdrop variants, scrollable body (Docs)
• ToggleButton: Selected/unselected toggle with all button variants + icon-only mode (Docs)
• ToggleButtonGroup: Single or multi-select toggle group, attached/detached layouts, orientation (Docs)
• Meter: Value within a known range — disk usage, password strength, quotas (Docs)
• ProgressBar: Linear progress, determinate + indeterminate, colors, custom formatting (Docs)
• ProgressCircle: Circular SVG progress with customizable track + fill circles (Docs)
• Toolbar: Groups buttons, toggles, and separators with horizontal or vertical orientation (Docs)

Drawer

Slide-out panel overlay with top/bottom/left/right placement, drag-to-dismiss gestures, and backdrop variants. Compound parts: Trigger, Backdrop, Content, Dialog, Header, Heading, Body, Footer, Handle, CloseTrigger.

<ComponentPreview name="drawer-basic" />

Placements:

<ComponentPreview name="drawer-placements" />

With Form:

<ComponentPreview name="drawer-with-form" />

Toggle Button

Stateful toggle between selected and unselected. All button variants and sizes, icon-only mode, controlled or uncontrolled.

<ComponentPreview name="toggle-button-basic" />

Variants:

<ComponentPreview name="toggle-button-variants" />

Toggle Button Group

Single or multi-select toggle group. Attached (connected) and detached layouts, vertical orientation, full-width, and a Separator sub-component.

<ComponentPreview name="toggle-button-group-basic" />

Selection Mode:

<ComponentPreview name="toggle-button-group-selection-mode" />

Attached Mode:

<ComponentPreview name="toggle-button-group-attached" />

Meter

Value within a known range — disk usage, password strength, quotas. Compound parts: Root, Output, Track, Fill.

<ComponentPreview name="meter-basic" />

Colors:

<ComponentPreview name="meter-colors" />

Progress Bar

Linear progress indicator with determinate + indeterminate states, color variants, sizes, and custom value display. Compound parts: Root, Output, Track, Fill.

<ComponentPreview name="progress-bar-basic" />

Indeterminate:

<ComponentPreview name="progress-bar-indeterminate" />

Progress Circle

Circular SVG progress with TrackCircle and FillCircle sub-components for direct SVG control. Determinate + indeterminate states.

<ComponentPreview name="progress-circle-basic" />

Custom SVG:

<ComponentPreview name="progress-circle-custom-svg" />

Toolbar

Groups buttons, toggle buttons, and separators into an accessible toolbar. Horizontal or vertical orientation, composes with ButtonGroup and ToggleButtonGroup.

<ComponentPreview name="toolbar-basic" />

With Button Group:

<ComponentPreview name="toolbar-with-button-group" />

Component Improvements

ButtonGroup Enhancements

New ButtonGroup.Separator sub-component adds an explicit visual divider between buttons. Works in both horizontal and vertical orientations.

<ComponentPreview name="button-group-basic" />

Table & ListBox Virtualization

Table and ListBox now support virtualization via React Aria's Virtualizer for large datasets. Virtualizer, TableLayout, and ListLayout are re-exported from @heroui/react.

<ComponentPreview name="table-virtualization" />

ButtonGroup Orientation

ButtonGroup accepts an orientation prop ("horizontal" | "vertical") with correct border-radius handling and separator direction for both axes. The root element was upgraded from <div> to React Aria's Group for proper role="group" semantics.

<ComponentPreview name="button-group-orientation" />

ButtonGroup Focus Ring

Focus rings on grouped buttons now use ring-inset so they stay within button bounds instead of overlapping neighbors.

Granular Component Imports

@heroui/react now supports per-component subpath entrypoints for more explicit imports (#6301):

// Before — root entrypoint
import { Button } from "@heroui/react";

// After — granular subpath import
import { Button } from "@heroui/react/button";

Dependencies

Upgraded react-aria-components from v1.15.1 to v1.16.0 and related packages:

Bug Fixes

• InputGroup: Focus styles now trigger only when the actual input/textarea is focused (:has([data-slot]:focus)) instead of any focusable child via :focus-within (#6274)
• Avatar: Fallback element inherits border-radius from the parent instead of hardcoding rounded-full, so className overrides apply correctly (#6300)
• Modal & AlertDialog: Backdrop click events no longer propagate through portals to parent elements (#6297)
• Table: Fixed header rounding and background color bleeding in Firefox (#6298)

Links

• Component Docs
• Figma Kit V3
• GitHub Repository
• GitHub PR #6285

Contributors

Thanks to everyone who contributed to this release!