v3.0.0-alpha.33

October 5, 2025

This release upgrades React Aria Components, redesigns the Tabs indicator, adds Switch sizes, and includes component showcases.

Installation

Update to the latest version:

npm i @heroui/styles@alpha @heroui/react@alpha

pnpm add @heroui/styles@alpha @heroui/react@alpha

yarn add @heroui/styles@alpha @heroui/react@alpha

bun add @heroui/styles@alpha @heroui/react@alpha

What's New

RAC Upgrade

Upgraded React Aria Components to the October 2, 2025 Release.

This release includes:

CSS variables for animations
Better SSR support
Performance improvements for selection indicators

Disclosure and Disclosure Group Updates

Disclosure and Disclosure Group now use React Aria's CSS variables for animations. The components use --disclosure-panel-width and --disclosure-panel-height variables that track the panel's actual size during expand/collapse.

Tabs Indicator Redesign

Tabs now uses React Aria's SelectionIndicator and supports SSR. This fixes layout shifts on initial render.

🚧 Breaking Changes:

Moved Tabs.Indicator inside each Tabs.Tab

Before:

<Tabs>
  <Tabs.ListWrapper>
    <Tabs.List aria-label="Options">
      <Tabs.Tab>
+       <Tabs.Indicator />
      </Tabs.Tab>
    </Tabs.List>
-   <Tabs.Indicator />
  </Tabs.ListWrapper>
  <Tabs.Panel/>
</Tabs>

Switch Updates

Switch has updated styles and animations. Added size prop with options: sm, md, lg.

SmallMediumLarge

"use client";

import {Label, SwitchControl, SwitchRoot, SwitchThumb} from "@heroui/react";

export function Sizes() {
  return (
    <div className="flex gap-6">
      <SwitchRoot size="sm">
        <SwitchControl>
          <SwitchThumb />
        </SwitchControl>
        <Label className="text-xs">Small</Label>
      </SwitchRoot>
      <SwitchRoot size="md">
        <SwitchControl>
          <SwitchThumb />
        </SwitchControl>
        <Label className="text-sm">Medium</Label>
      </SwitchRoot>
      <SwitchRoot size="lg">
        <SwitchControl>
          <SwitchThumb />
        </SwitchControl>
        <Label className="text-base">Large</Label>
      </SwitchRoot>
    </div>
  );
}

Related showcases have been added in Button, Disclosure, Disclosure Group and Tabs.

Documentation Improvements

Component Documentation

Tabs: Updated anatomy, revised examples with new indicator design and added related showcase
Switch: Added size example and revised with-icon example
Button, Disclosure, Disclosure Group: Added related showcase