# v3.0.0-alpha.33 · HeroUI

> 升级 RAC、重新设计 Tabs 指示器、新增 Switch 尺寸变体，以及相关示例展示。

- 页面: https://jiguang132.com/zh/systems/heroui/docs/releases/v3-0-0-alpha-33
- 改编自: HeroUI 文档 (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

2025 年 10 月 5 日


此版本升级了 React Aria Components，重新设计了 Tabs 指示器，为 Switch 新增尺寸支持，并补充了一系列组件示例。

## 安装

升级到最新版本：


  

#### 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
    ```
  


## 新增功能

### RAC 升级

将 React Aria Components 升级到 [2025 年 10 月 2 日发布版本](https://react-spectrum.adobe.com/releases/2025-10-02.html)。

本次升级包括：
- 用于动画的 CSS 变量
- 更好的 SSR 支持
- 选择指示器的性能改进

### Disclosure 与 DisclosureGroup 更新

[Disclosure](/systems/heroui/docs/components/disclosure) 与 [DisclosureGroup](/systems/heroui/docs/components/disclosure-group) 现在使用 React Aria 的 CSS 变量来驱动动画。组件会通过 `--disclosure-panel-width` 与 `--disclosure-panel-height` 变量在展开 / 折叠期间跟踪面板的实际尺寸。

### Tabs 指示器重新设计

[Tabs](/systems/heroui/docs/components/tabs) 现在使用 React Aria 的 `SelectionIndicator` 并支持 SSR，这修复了初次渲染时的布局抖动问题。

**🚧 破坏性变更：**

- 将 `Tabs.Indicator` 移至每一个 `Tabs.Tab` 内部

**之前：**
```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 更新

[Switch](/systems/heroui/docs/components/switch) 的样式与动画都得到了更新。新增 `size` prop，可选值为 `sm`、`md`、`lg`。


> 示例 `switch-sizes`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/releases/v3-0-0-alpha-33


### 相关示例

我们在 [Button](/systems/heroui/docs/components/button)、[Disclosure](/systems/heroui/docs/components/disclosure)、[DisclosureGroup](/systems/heroui/docs/components/disclosure-group) 与 [Tabs](/systems/heroui/docs/components/tabs) 中新增了「相关示例」展示。

## 文档改进

### 组件文档
- **[Tabs](/systems/heroui/docs/components/tabs)**：更新了 anatomy，根据新的指示器设计重写了示例，并新增了相关示例展示
- **[Switch](/systems/heroui/docs/components/switch)**：新增尺寸示例，并重写了 with-icon 示例
- **[Button](/systems/heroui/docs/components/button)**、**[Disclosure](/systems/heroui/docs/components/disclosure)**、**[DisclosureGroup](/systems/heroui/docs/components/disclosure-group)**：新增相关示例展示

## 迁移指南

### Tabs 组件迁移

1. **更新组件结构：**
   - 将 `` 移至每一个 `` 内部

## 链接

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

## 贡献者

感谢每一位为本次发布做出贡献的开发者！

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt