Base UI

项目概述

Base UI 是由 MUI 团队联合 Floating UI、Radix 原核心作者重磅推出的无样式（Unstyled / Headless）React 底层组件库。它剥离了所有视觉样式层与 CSS-in-JS 运行时，为开发者提供工业级的 WAI-ARIA 无障碍键盘导航和弹出层状态管理逻辑。

核心特性

• ⚡️ 纯粹无样式设计：零样式污染，可无缝搭配 Tailwind CSS、CSS Modules 或纯原生 CSS 编写样式。
• ♿️ 卓越无障碍合规：内置严苛的键盘焦点捕获、屏幕阅读器语义和交互状态流转。
• 原生集成 Floating UI：下拉菜单、浮动气泡与工具提示拥有顶级的定位精度与碰撞检测能力。
• 极度模块化按需引入：支持细粒度 Tree-shaking 打包，零多余冗余体积。

快速上手与示例代码

npm install @base-ui-components/react

import { Switch } from '@base-ui-components/react/switch';

export default function ToggleDemo() {
  return (
    <Switch.Root className="w-11 h-6 bg-muted rounded-full p-0.5">
      <Switch.Thumb className="w-5 h-5 bg-white rounded-full transition-transform" />
    </Switch.Root>
  );
}

技术选型建议与适用场景

• 非常适合：需要从零构建完全自主品牌视觉系统、对打包体积与无障碍标准有严苛要求的企业级中大型项目。
• 不适用场景：希望 5 分钟内快速开箱搭建后台管理原型、不需要深度定制样式的轻量项目。