---
title: "开始使用"
description: "Tanrei 提供什么、各部分如何组合，以及在你的平台上从哪里入手。"
url: "https://tanrei.chnotchy.com/zh-cn/getting-started/"
last_updated: 2026-10-20T01:38:40.000Z
---

# 开始使用

> Tanrei 提供什么、各部分如何组合，以及在你的平台上从哪里入手。

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

> [!WARNING]
> **预发布**
>
> `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 处于暂停状态；这期间，它的指南展示如何从源码添加它。

## 选择你的平台

- [Web](https://tanrei.chnotchy.com/zh-cn/getting-started/web/): CSS 自定义属性和 Web Components。可用于任何框架，也可以不用框架。
- [React](https://tanrei.chnotchy.com/zh-cn/getting-started/react/): 由 Web Components 生成的、带类型的 React 组件。
- [SwiftUI](https://tanrei.chnotchy.com/zh-cn/getting-started/swiftui/): 面向 iOS 和 macOS 的 Swift 包。
- [Jetpack Compose](https://tanrei.chnotchy.com/zh-cn/getting-started/compose/): 基于 Compose Foundation 的 Android 库，不依赖 Material。
- [Flutter](https://tanrei.chnotchy.com/zh-cn/getting-started/flutter/): 纯 Dart 包，用不用 MaterialApp 都可以。
- [React Native](https://tanrei.chnotchy.com/zh-cn/getting-started/react-native/): 纯 TypeScript 组件，不含原生模块。

## 同一个按钮，六种写法

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

**Web**

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

**React**

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

**SwiftUI**

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

**Compose**

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

**Flutter**

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

**React Native**

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

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

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

## 如何阅读这份文档

- [基础](https://tanrei.chnotchy.com/zh-cn/foundations/brand/)解释理念和规则。
- [令牌参考](https://tanrei.chnotchy.com/zh-cn/tokens/color/)列出每一个值，直接由令牌文件渲染而来。
- [组件](https://tanrei.chnotchy.com/zh-cn/components/)页面遵循同一个模板：概览、规格、指南、无障碍。这些页面上的表格来自组件的规格，因此不会过时。
- [状态](https://tanrei.chnotchy.com/zh-cn/status/)由仓库生成。
- [与 AI 代理一起使用 Tanrei](https://tanrei.chnotchy.com/zh-cn/getting-started/ai-agents/)说明如何连接 MCP 服务器，并给出让编程代理用 Tanrei 编写 UI 的规则。