安装

升级到最新版本：

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

新增功能

RAC 升级

将 React Aria Components 升级到 2025 年 10 月 2 日发布版本。

本次升级包括：

用于动画的 CSS 变量
更好的 SSR 支持
选择指示器的性能改进

Disclosure 与 DisclosureGroup 更新

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

Tabs 指示器重新设计

Tabs 现在使用 React Aria 的 SelectionIndicator 并支持 SSR，这修复了初次渲染时的布局抖动问题。

🚧 破坏性变更：

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

之前：

<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 的样式与动画都得到了更新。新增 size prop，可选值为 sm、md、lg。

小

中

大

import {Label, Switch} from "@heroui/react";

export function Sizes() {
  return (
    <div className="flex gap-6">

文档改进

组件文档

Tabs：更新了 anatomy，根据新的指示器设计重写了示例，并新增了相关示例展示
Switch：新增尺寸示例，并重写了 with-icon 示例
Button、Disclosure、DisclosureGroup：新增相关示例展示

迁移指南

Tabs 组件迁移

更新组件结构：
- 将 <Tabs.Indicator /> 移至每一个 <Tabs.Tab /> 内部

链接

贡献者

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

v3.0.0-alpha.33

安装