React Suite (rsuite) v6 正式发布了。这一版本聚焦于现代化改造：重构底层样式系统、提供新的布局能力，并整体提升响应式体验和开发流程。v6 代表 React Suite 在稳定性的前提下，持续向更具适应性的 UI 方案演进。

1. 样式系统的全面重构：拥抱 CSS 变量

v6 最重大的底层变革是将样式系统从 Less 彻底迁移到了 SCSS，并全面采用 CSS 变量 (CSS Variables) 作为主题定制的核心方案。开发者只需覆盖变量值，就能在运行时动态切换品牌色、间距或圆角，无需重新编译或配置额外的构建流程。

完整的变量清单与使用方式，可参考 CSS Variables 文档，也可以借助 Palette 工具 可视化调整品牌配色。

其他样式系统改进

• **逻辑属性 (Logical Properties)**：全面采用 CSS 逻辑属性（如 margin-inline-start 代替 margin-left），原生支持 RTL （从右到左）排版。
• rem 单位：字体大小、间距等尺寸从 px 转换为 rem，更好地支持响应式排版和无障碍缩放。

2. 拥抱 AI 辅助编程

React Suite v6 不仅关注组件本身，更致力于提升 AI 时代的开发效率。我们引入了对 AI 编程助手的原生支持，让 Cursor 、Windsurf 等工具能更懂 RSuite 。

LLMs.txt 支持

我们遵循 llms.txt 标准，为文档站添加了 /llms.txt 文件。这是一个专为大语言模型 (LLM) 优化的文档索引。

当你在 Cursor 或其他 AI 工具中引用 RSuite 文档时，AI 可以通过这个文件快速获取组件的 API 定义、最佳实践和代码示例，从而生成更准确、符合 v6 规范的代码。

MCP Server 集成

我们推出了官方的 Model Context Protocol (MCP) Server 。

通过 MCP ，你的 AI 助手可以直接连接到 RSuite 的知识库。这意味着：

• 实时检索：AI 可以直接读取最新的组件文档和 API ，无需手动复制粘贴。
• 上下文感知：在编写代码时，AI 能自动推荐适合当前场景的组件和属性。
• 减少幻觉：基于官方文档的上下文投喂，大幅降低 AI 生成过时或错误代码的概率。

3. 布局能力的原子化：引入 Box 与 Center

为了让布局更加灵活高效，v6 引入了基础的布局原子组件，让开发者能够像搭积木一样构建复杂的 UI 。

Box 组件

Box 是构建布局的基石，它允许你直接在组件上通过 props 控制样式，无需编写额外的 CSS 类。

import { Box, Button } from 'rsuite';

function App() {
  return (
    <Box p={20} m={10} bg="gray-100" borderRadius={8} display="flex" justifyContent="space-between">
      <h2>Welcome to v6</h2>
      <Button appearance="primary">Get Started</Button>
    </Box>
  );
}

Center 组件

垂直水平居中一直是 CSS 中的高频需求，现在你可以使用 Center 组件轻松实现：

import { Center } from 'rsuite';

<Center height={200} className="bg-blue-50">
  <div>Perfectly Centered Content</div>
</Center>;

4. 响应式设计的全面增强

在移动互联网时代，跨端适配至关重要。v6 对核心组件进行了响应式能力的增强。

• Grid 系统升级：重构了 Row 和 Col，提供更灵活的断点控制对象语法。

  <Row align="center" justify="space-between">
    <Col span={{ xs: 24, md: 12, lg: 8 }}>...</Col>
    <Col span={{ xs: 24, md: 12, lg: 8 }}>...</Col>
  </Row>
  

• **Navbar & Sidenav**：新增了对移动端的自适应支持，使用 Navbar.Content 替代了废弃的 pullRight，布局更清晰。

  <Navbar>
    <Navbar.Brand>BRAND</Navbar.Brand>
    <Navbar.Content>
      <Nav>...</Nav>
    </Navbar.Content>
    <Navbar.Content>
      <Avatar />
    </Navbar.Content>
  </Navbar>
  

• Picker 组件：所有的 Picker 组件现在都拥有了更好的移动端适配体验，在小屏幕设备上会自动切换为更友好的交互模式。

5. 全新的组件与 Hooks

除了布局组件，v6 还带来了一系列实用的新组件和 Hooks ，进一步丰富了组件库的能力。

新增组件

• SegmentedControl：分段控制器，提供更现代的选项卡切换体验，适用于筛选、视图切换等场景。

• PasswordInput：专用的密码输入框，内置显示/隐藏密码切换功能，提升用户体验。

• PinInput：PIN 码/验证码输入组件，支持自动聚焦和粘贴分割，适用于验证场景。

• Textarea：独立的多行文本输入组件，提供更好的样式控制和一致性。

• Kbd：用于展示键盘按键，文档站和快捷键提示的福音。

• Link：提供统一样式的链接组件，支持自定义颜色和无障碍访问。

• Menu & MegaMenu：全新的菜单系统，支持更复杂的导航结构，轻松构建大型应用导航。

• Form.Stack：让表单布局排列更加整洁有序，替代了 Form 组件上的布局属性。

  <Form>
    <Form.Stack layout="horizontal" spacing={20}>
      <Form.Group>
        <Form.Label>Username</Form.Label>
        <Form.Control name="username" />
      </Form.Group>
      {/* ... */}
    </Form.Stack>
  </Form>
  

强大的 Hooks

• useDialog：通过函数调用方式管理对话框，告别繁琐的 visible state 管理。

  const dialog = useDialog();
  
  const handleClick = async () => {
    const result = await dialog.confirm({
      title: '确认操作',
      children: '您确定要执行此操作吗？'
    });
    if (result) {
      console.log('Confirmed');
    }
  };
  

• useFormControl：轻松创建自定义的表单控件，自动处理验证状态和错误信息。

6. 开发者体验 (DX) 的极致追求

我们深知开发者的快乐不仅仅来自于好用的组件，更来自于流畅的开发流程。

• 全面拥抱 Vitest：我们将测试框架从 Karma/Mocha 迁移到了 Vitest ，测试速度大幅提升，开发反馈更加即时。
• TypeScript 类型增强：优化了所有组件的类型导出，新增 Schema 类型命名导出，智能提示更加精准。
• Bundle Size 优化：
  • 引入 size-limit ，严格把控包体积。
• 生态支持：新增 Bun 安装指南，紧跟前端工具链发展潮流。
• 开发调试：useToaster 增加了环境检查，当在 CustomProvider 上下文之外使用时会发出友好警告，帮助快速定位问题。

7. 更多细节改进

• Badge：新增 size、outline、placement 等属性，支持更丰富的展示形态。

  <Badge content="New" size="lg" outline />
  <Badge content={99} shape="square" placement="bottomEnd" />
  

• Breadcrumb：默认样式调整，更符合现代设计规范。

• DatePicker：优化了 Toolbar 布局，交互更符合直觉。

• Progress：新增 indeterminate 加载动画状态，以及支持分段进度条 (sections)，展示更丰富的信息。

• TreePicker：新增 onlyLeafSelectable 属性，满足仅允许选择叶子节点的业务场景。

• Button：新增 toggle 状态支持。

• InputGroup：优化了 inside 模式下的按钮样式，视觉更加协调。

• 依赖升级：Date-fns 4.x, Prettier 3.x 等核心依赖全面升级。

立即开始

React Suite v6 现已通过 npm 发布。

npm install rsuite@latest

我们准备了详细的迁移指南，帮助您从 v5 平滑升级。

欢迎在 GitHub 上给我们 Star ，或者在 Discussion 中分享您的使用体验！

React Suite Team