# v3.0.0-rc.1 · HeroUI > 7 new components (Drawer, ToggleButton, ToggleButtonGroup, Meter, ProgressBar, ProgressCircle, Toolbar), Table & ListBox virtualization, ButtonGroup improvements, and bug fixes. - Page: https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 - Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af March 14, 2026 Seven new components: [Drawer](/systems/heroui/docs/components/drawer), [ToggleButton](/systems/heroui/docs/components/toggle-button), [ToggleButtonGroup](/systems/heroui/docs/components/toggle-button-group), [Meter](/systems/heroui/docs/components/meter), [ProgressBar](/systems/heroui/docs/components/progress-bar), [ProgressCircle](/systems/heroui/docs/components/progress-circle), and [Toolbar](/systems/heroui/docs/components/toolbar). Table and ListBox gain virtualization, ButtonGroup gets a `Separator` sub-component + vertical orientation, and React Aria Components is bumped to v1.16.0. ## Installation Update to the latest version: #### npm ```bash npm i @heroui/styles@rc @heroui/react@rc ``` #### pnpm ```bash pnpm add @heroui/styles@rc @heroui/react@rc ``` #### yarn ```bash yarn add @heroui/styles@rc @heroui/react@rc ``` #### bun ```bash bun add @heroui/styles@rc @heroui/react@rc ``` > **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 - **[Drawer](#drawer)**: Slide-out panel with drag-to-dismiss, 4 placements, backdrop variants, scrollable body ([Docs](/systems/heroui/docs/components/drawer)) - **[ToggleButton](#toggle-button)**: Selected/unselected toggle with all button variants + icon-only mode ([Docs](/systems/heroui/docs/components/toggle-button)) - **[ToggleButtonGroup](#toggle-button-group)**: Single or multi-select toggle group, attached/detached layouts, orientation ([Docs](/systems/heroui/docs/components/toggle-button-group)) - **[Meter](#meter)**: Value within a known range — disk usage, password strength, quotas ([Docs](/systems/heroui/docs/components/meter)) - **[ProgressBar](#progress-bar)**: Linear progress, determinate + indeterminate, colors, custom formatting ([Docs](/systems/heroui/docs/components/progress-bar)) - **[ProgressCircle](#progress-circle)**: Circular SVG progress with customizable track + fill circles ([Docs](/systems/heroui/docs/components/progress-circle)) - **[Toolbar](#toolbar)**: Groups buttons, toggles, and separators with horizontal or vertical orientation ([Docs](/systems/heroui/docs/components/toolbar)) ### 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`. > Example `drawer-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 **Placements:** > Example `drawer-placements`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 **With Form:** > Example `drawer-with-form`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 ### Toggle Button Stateful toggle between selected and unselected. All button variants and sizes, icon-only mode, controlled or uncontrolled. > Example `toggle-button-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 **Variants:** > Example `toggle-button-variants`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 ### Toggle Button Group Single or multi-select toggle group. Attached (connected) and detached layouts, vertical orientation, full-width, and a `Separator` sub-component. > Example `toggle-button-group-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 **Selection Mode:** > Example `toggle-button-group-selection-mode`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 **Attached Mode:** > Example `toggle-button-group-attached`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 ### Meter Value within a known range — disk usage, password strength, quotas. Compound parts: `Root`, `Output`, `Track`, `Fill`. > Example `meter-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 **Colors:** > Example `meter-colors`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 ### Progress Bar Linear progress indicator with determinate + indeterminate states, color variants, sizes, and custom value display. Compound parts: `Root`, `Output`, `Track`, `Fill`. > Example `progress-bar-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 **Indeterminate:** > Example `progress-bar-indeterminate`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 ### Progress Circle Circular SVG progress with `TrackCircle` and `FillCircle` sub-components for direct SVG control. Determinate + indeterminate states. > Example `progress-circle-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 **Custom SVG:** > Example `progress-circle-custom-svg`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 ### Toolbar Groups buttons, toggle buttons, and separators into an accessible toolbar. Horizontal or vertical orientation, composes with `ButtonGroup` and `ToggleButtonGroup`. > Example `toolbar-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 **With Button Group:** > Example `toolbar-with-button-group`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 ## Component Improvements ### ButtonGroup Enhancements New `ButtonGroup.Separator` sub-component adds an explicit visual divider between buttons. Works in both horizontal and vertical orientations. > Example `button-group-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 ### 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`. > Example `table-virtualization`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 ### 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 `` to React Aria's `Group` for proper `role="group"` semantics. > Example `button-group-orientation`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-rc-1 ### 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](https://github.com/heroui-inc/heroui/pull/6301)): ```tsx // 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: | Package | Old | New | |---------|-----|-----| | `react-aria-components` | 1.15.1 | 1.16.0 | | `@react-aria/i18n` | 3.12.15 | 3.12.16 | | `@react-aria/utils` | 3.33.0 | 3.33.1 | | `@react-types/shared` | 3.33.0 | 3.33.1 | | `@react-types/color` | 3.1.3 | 3.1.4 | | `@internationalized/date` | 3.11.0 | 3.12.0 | | `@react-stately/data` | 3.15.1 | 3.15.2 | ## 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](https://github.com/heroui-inc/heroui/pull/6274)) - **Avatar**: Fallback element inherits `border-radius` from the parent instead of hardcoding `rounded-full`, so `className` overrides apply correctly ([#6300](https://github.com/heroui-inc/heroui/pull/6300)) - **Modal & AlertDialog**: Backdrop click events no longer propagate through portals to parent elements ([#6297](https://github.com/heroui-inc/heroui/pull/6297)) - **Table**: Fixed header rounding and background color bleeding in Firefox ([#6298](https://github.com/heroui-inc/heroui/pull/6298)) ## Links - [Component Docs](/systems/heroui/docs/components) - [Figma Kit V3](https://www.figma.com/community/file/1546526812159103429/heroui-figma-kit-v3) - [GitHub Repository](https://github.com/heroui-inc/heroui) - [GitHub PR #6285](https://github.com/heroui-inc/heroui/pull/6285) ## Contributors Thanks to everyone who contributed to this release! --- Index of all JGuang resources: https://jiguang132.com/llms.txt