开始使用

Tanrei 是一个以各平台原生库的形式交付的设计系统。你不需要引入某个运行时或跨平台框架；只要为你正在使用的平台添加对应的包，就能得到与其他所有平台相同的令牌、组件和无障碍行为。

预发布

0.1.0-next.0 已以 npm 的 dist-tag next 发布：在 0.1.0 之前，安装时请在包名后加上 @next（npm install @tanrei/web@next）。在 0.x 预发布期间不保持向后兼容：任何一个预发布都可能破坏任何东西，事先没有弃用期，破坏了什么写在它的 changeset 里。

尚未发布：SwiftUI、Jetpack Compose、Flutter和React Native。一个平台在跟上当前的规格之后才会发布，在此之前它的 CI 处于暂停状态；这期间，它的指南展示如何从源码添加它。

选择你的平台

link

WebCSS 自定义属性和 Web Components。可用于任何框架，也可以不用框架。React由 Web Components 生成的、带类型的 React 组件。SwiftUI面向 iOS 和 macOS 的 Swift 包。Jetpack Compose基于 Compose Foundation 的 Android 库，不依赖 Material。Flutter纯 Dart 包，用不用 MaterialApp 都可以。React Native纯 TypeScript 组件，不含原生模块。

同一个按钮，六种写法

link

每个组件都只在一份与平台无关的规格中定义一次，再按各平台的惯用方式实现。你选择的标签页会在整个站点中被记住。

<tanrei-button variant="tonal">保存草稿</tanrei-button>

<Button variant="tonal" onClick={saveDraft}>保存草稿</Button>

TanreiButton("保存草稿", variant: .tonal) { saveDraft() }

TanreiButton(text = "保存草稿", onClick = ::saveDraft, variant = TanreiButtonVariant.Tonal)

TanreiButton(variant: TanreiButtonVariant.tonal, onPressed: saveDraft, child: const Text('保存草稿'))

<Button variant="tonal" onPress={saveDraft}>保存草稿</Button>

每个平台上都能得到的东西

link

• 令牌。 颜色角色、字阶、形状、层级、动效、状态和间距的值，由同一份 DTCG 源文件生成为 CSS 自定义属性，以及 Swift、Kotlin、Dart 和 TypeScript 常量。
• 主题。 浅色和深色，各有标准、中、高三个对比度级别。默认情况下主题跟随操作系统；你也可以为整个应用或某个子树强制指定其中任何一项。
• 组件。 对共享规格的实现，在任何地方都有相同的变体、状态和键盘行为。
• 无障碍默认值。 最小点击目标、可见的焦点环、放大到 200% 仍然可用的文本，以及对“减弱动态效果”设置的尊重，这些都是内建的，而不是留给每个界面自行处理。

如何阅读这份文档

link

• 基础解释理念和规则。
• 令牌参考列出每一个值，直接由令牌文件渲染而来。
• 组件页面遵循同一个模板：概览、规格、指南、无障碍。这些页面上的表格来自组件的规格，因此不会过时。
• 状态由仓库生成。
• 与 AI 代理一起使用 Tanrei说明如何连接 MCP 服务器，并给出让编程代理用 Tanrei 编写 UI 的规则。