# v3.0.0-rc.1 **Category**: react **URL**: https://www.heroui.com/docs/react/releases/v3-0-0-rc-1 **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/releases/v3-0-0-rc-1.mdx > 7 new components (Drawer, ToggleButton, ToggleButtonGroup, Meter, ProgressBar, ProgressCircle, Toolbar), Table & ListBox virtualization, ButtonGroup improvements, and bug fixes. ***
March 14, 2026
Seven new components: [Drawer](/docs/components/drawer), [ToggleButton](/docs/components/toggle-button), [ToggleButtonGroup](/docs/components/toggle-button-group), [Meter](/docs/components/meter), [ProgressBar](/docs/components/progress-bar), [ProgressCircle](/docs/components/progress-circle), and [Toolbar](/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: ```bash npm i @heroui/styles@rc @heroui/react@rc ``` ```bash pnpm add @heroui/styles@rc @heroui/react@rc ``` ```bash yarn add @heroui/styles@rc @heroui/react@rc ``` ```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](/docs/components/drawer)) - **[ToggleButton](#toggle-button)**: Selected/unselected toggle with all button variants + icon-only mode ([Docs](/docs/components/toggle-button)) - **[ToggleButtonGroup](#toggle-button-group)**: Single or multi-select toggle group, attached/detached layouts, orientation ([Docs](/docs/components/toggle-button-group)) - **[Meter](#meter)**: Value within a known range — disk usage, password strength, quotas ([Docs](/docs/components/meter)) - **[ProgressBar](#progress-bar)**: Linear progress, determinate + indeterminate, colors, custom formatting ([Docs](/docs/components/progress-bar)) - **[ProgressCircle](#progress-circle)**: Circular SVG progress with customizable track + fill circles ([Docs](/docs/components/progress-circle)) - **[Toolbar](#toolbar)**: Groups buttons, toggles, and separators with horizontal or vertical orientation ([Docs](/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`. ```tsx import {Button, Drawer} from "@heroui/react"; export function Basic() { return ( Drawer Title

This is a bottom drawer built with React Aria's Modal component. It slides up from the bottom of the screen with a smooth CSS transition.

); } ``` **Placements:** ```tsx import {Button, Drawer} from "@heroui/react"; export function Placements() { const placements = ["bottom", "top", "left", "right"] as const; return (
{placements.map((placement) => ( {placement === "bottom" && } {placement.charAt(0).toUpperCase() + placement.slice(1)} Drawer

This drawer slides in from the {placement} edge of the screen.

{placement === "top" && } ))}
); } ``` **With Form:** ```tsx import {Button, Drawer, Input, Label, TextField} from "@heroui/react"; export function WithForm() { return ( Edit Profile
); } ``` ### Toggle Button Stateful toggle between selected and unselected. All button variants and sizes, icon-only mode, controlled or uncontrolled. ```tsx import {Heart} from "@gravity-ui/icons"; import {ToggleButton} from "@heroui/react"; export function Basic() { return ( Like ); } ``` **Variants:** ```tsx import {Heart} from "@gravity-ui/icons"; import {ToggleButton} from "@heroui/react"; export function Variants() { return (
Default Ghost
); } ``` ### Toggle Button Group Single or multi-select toggle group. Attached (connected) and detached layouts, vertical orientation, full-width, and a `Separator` sub-component. ```tsx import {Bold, Italic, Strikethrough, Underline} from "@gravity-ui/icons"; import {ToggleButton, ToggleButtonGroup} from "@heroui/react"; export function Basic() { return ( ); } ``` **Selection Mode:** ```tsx import { Bold, Italic, Strikethrough, TextAlignCenter, TextAlignLeft, TextAlignRight, Underline, } from "@gravity-ui/icons"; import {ToggleButton, ToggleButtonGroup} from "@heroui/react"; export function SelectionMode() { return (
Single selection Left Center Right
Multiple selection
); } ``` **Attached Mode:** ```tsx import {Bold, Italic, Strikethrough, Underline} from "@gravity-ui/icons"; import {ToggleButton, ToggleButtonGroup} from "@heroui/react"; export function Attached() { return (
Attached (default)
Detached
); } ``` ### Meter Value within a known range — disk usage, password strength, quotas. Compound parts: `Root`, `Output`, `Track`, `Fill`. ```tsx import {Label, Meter} from "@heroui/react"; export function Basic() { return ( ); } ``` **Colors:** ```tsx import {Label, Meter} from "@heroui/react"; export function Colors() { return (
); } ``` ### Progress Bar Linear progress indicator with determinate + indeterminate states, color variants, sizes, and custom value display. Compound parts: `Root`, `Output`, `Track`, `Fill`. ```tsx import {Label, ProgressBar} from "@heroui/react"; export function Basic() { return ( ); } ``` **Indeterminate:** ```tsx import {Label, ProgressBar} from "@heroui/react"; export function Indeterminate() { return ( ); } ``` ### Progress Circle Circular SVG progress with `TrackCircle` and `FillCircle` sub-components for direct SVG control. Determinate + indeterminate states. ```tsx import {ProgressCircle} from "@heroui/react"; export function Basic() { return ( ); } ``` **Custom SVG:** ```tsx import {ProgressCircle} from "@heroui/react"; export function CustomSvg() { return (
); } ``` ### Toolbar Groups buttons, toggle buttons, and separators into an accessible toolbar. Horizontal or vertical orientation, composes with `ButtonGroup` and `ToggleButtonGroup`. ```tsx import {Bold, Copy, Italic, Scissors, Underline} from "@gravity-ui/icons"; import { Button, ButtonGroup, Separator, ToggleButton, ToggleButtonGroup, Toolbar, } from "@heroui/react"; export function Basic() { return ( ); } ``` **With Button Group:** ```tsx import { ArrowUturnCcwLeft, ArrowUturnCwRight, Bold, Italic, TextAlignCenter, TextAlignLeft, TextAlignRight, Underline, } from "@gravity-ui/icons"; import { Button, ButtonGroup, Separator, ToggleButton, ToggleButtonGroup, Toolbar, } from "@heroui/react"; export function WithButtonGroup() { return ( ); } ``` ## Component Improvements ### ButtonGroup Enhancements New `ButtonGroup.Separator` sub-component adds an explicit visual divider between buttons. Works in both horizontal and vertical orientations. ```tsx import { ChevronDown, ChevronLeft, ChevronRight, CodeFork, Ellipsis, Picture, Pin, QrCode, Star, TextAlignCenter, TextAlignJustify, TextAlignLeft, TextAlignRight, ThumbsDown, ThumbsUp, Video, } from "@gravity-ui/icons"; import {Button, ButtonGroup, Chip, Description, Dropdown, Label} from "@heroui/react"; export function Basic() { return (
{/* Single button with dropdown */}
All commits from this branch will be added to the base branch The 14 commits from this branch will be combined into one commit in the base branch The 14 commits from this branch will be rebased and added to the base branch
{/* Individual buttons */}
{/* Previous/Next Button Group */}
{/* Content Selection Button Group */}
{/* Text Alignment Button Group */}
{/* Icon-Only Alignment Button Group */}
); } ``` ### 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`. ```tsx "use client"; import {Table, TableLayout, Virtualizer} from "@heroui/react"; interface User { id: number; name: string; role: string; email: string; } export function Virtualization() { const roles = [ "Software Engineer", "Senior Engineer", "Staff Engineer", "Product Manager", "Designer", "Data Analyst", "QA Engineer", "DevOps Engineer", "Marketing Manager", "Sales Representative", ]; const firstNames = [ "Emma", "Liam", "Olivia", "Noah", "Ava", "James", "Sophia", "Oliver", "Isabella", "Lucas", "Mia", "Ethan", "Charlotte", "Mason", "Amelia", "Logan", "Harper", "Alexander", "Ella", "Benjamin", ]; const lastNames = [ "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Rodriguez", "Martinez", "Anderson", "Taylor", "Thomas", "Jackson", "White", "Harris", "Clark", "Lewis", "Robinson", "Walker", ]; function generateUsers(count: number): User[] { const users: User[] = []; for (let i = 0; i < count; i++) { const firstName = firstNames[i % firstNames.length]; const lastName = lastNames[Math.floor(i / firstNames.length) % lastNames.length]; const name = `${firstName} ${lastName}`; users.push({ email: `${firstName?.toLowerCase()}.${lastName?.toLowerCase()}@acme.com`, id: i + 1, name, role: roles[i % roles.length] || "", }); } return users; } const virtualizedUsers = generateUsers(1000); return ( Name Role Email {(user) => ( {user.name} {user.role} {user.email} )}
); } ``` ### 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. ```tsx import {TextAlignCenter, TextAlignJustify, TextAlignLeft, TextAlignRight} from "@gravity-ui/icons"; import {Button, ButtonGroup} from "@heroui/react"; export function Orientation() { return (
Horizontal
Vertical
); } ``` ### 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](/docs/react/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!