# v3.0.0-alpha.33 · HeroUI

> RAC upgrade, Tabs indicator redesign, Switch size variant, Related showcase

- Page: https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-alpha-33
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

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


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

#### pnpm


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

#### yarn


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

#### bun


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


## What's New

### RAC Upgrade

Upgraded React Aria Components to the [October 2, 2025 Release](https://react-spectrum.adobe.com/releases/2025-10-02.html).

This release includes:
- CSS variables for animations
- Better SSR support
- Performance improvements for selection indicators

### Disclosure and Disclosure Group Updates

[Disclosure](/systems/heroui/docs/components/disclosure) and [Disclosure Group](/systems/heroui/docs/components/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](/systems/heroui/docs/components/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:**
```diff tsx
<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](/systems/heroui/docs/components/switch) has updated styles and animations. Added `size` prop with options: `sm`, `md`, `lg`.


> Example `switch-sizes`: interactive preview on https://jiguang132.com/systems/heroui/docs/releases/v3-0-0-alpha-33


### Related showcases

Related showcases have been added in [Button](/systems/heroui/docs/components/button), [Disclosure](/systems/heroui/docs/components/disclosure), [Disclosure Group](/systems/heroui/docs/components/disclosure-group) and [Tabs](/systems/heroui/docs/components/tabs). 

## Documentation Improvements

### Component Documentation
- **[Tabs](/systems/heroui/docs/components/tabs)**: Updated anatomy, revised examples with new indicator design and added related showcase
- **[Switch](/systems/heroui/docs/components/switch)**: Added size example and revised with-icon example
- **[Button](/systems/heroui/docs/components/button)**, **[Disclosure](/systems/heroui/docs/components/disclosure)**, **[Disclosure Group](/systems/heroui/docs/components/disclosure-group)**: Added related showcase

## Migration Guide

### Tabs Component Migration

1. **Update component structure:**
   - move `` inside each ``

## Links

- [GitHub PR #5777](https://github.com/heroui-inc/heroui/pull/5777)
- [Tabs Component](/systems/heroui/docs/components/tabs)
- [Switch Component](/systems/heroui/docs/components/switch)
- [Button Component](/systems/heroui/docs/components/button)
- [Disclosure Component](/systems/heroui/docs/components/disclosure)
- [Disclosure Group Component](/systems/heroui/docs/components/disclosure-group)

## Contributors

Thanks to everyone who contributed to this release!

---

Index of all JGuang resources: https://jiguang132.com/llms.txt