写组件，不必写样式。
01字重 weight800
02字距 tracking-0.02em
03强调色 accentON
第二行变主题色
上面三个控件是真的——拖一拖，标题就变了。一个开源 React 组件库，专注快速开发、易维护与无障碍访问。
向下滚动 · 五项能力无需配置·开箱即用·完整中文
五个开关 · 五个真实的取舍
默认就很好，改也容易。
无障碍访问，默认达成。
遵循 WAI-ARIA，键盘导航与读屏支持开箱即用。
主题随四处配置而变。
accentColor、grayColor、radius、scaling 定全局。
暗色模式，一行切换。
appearance="dark" 即完成切换，两套色板均已调好。
布局原语，杜绝魔法数字。
Flex、Grid、Container 统一间距刻度。
预置样式，深度可定制。
每个组件均可覆盖，主题令牌全部开放。
约 3 分钟 · bun / npm / yarn / pnpm
四步上手，然后忘了样式。
01Install · 安装
# 同样支持 npm / yarn / pnpm
bun add @radix-ui/themes首先，安装依赖。
02Import · 引入
import "@radix-ui/themes/styles.css";
然后，导入样式。
03Provider · 主题
import { Theme } from "@radix-ui/themes"; <Theme accentColor="blue"> <App /> </Theme>
接着，包一层 Theme。
04Render · 渲染
你好，Radix Themes :)
最后，开始构建。
点击切换 · 真实渲染 · 键盘可达
组件，就是页面本身。
左侧切换组件，右侧是同一块画布。示例全部由 Radix Themes 实时渲染。
浏览全部组件组件演示
真实组件 · 可交互
启用实时预览
预览强度60
构建进度72%
无需设计稿，从第一行代码开始
回车或点击箭头，前往官方快速上手指南