---
title: "Getting started"
description: "What Tanrei ships, how the pieces fit together, and where to start on your platform."
url: "https://tanrei.chnotchy.com/getting-started/"
last_updated: 2026-10-20T01:38:40.000Z
---

# Getting started

> What Tanrei ships, how the pieces fit together, and where to start on your platform.

Tanrei is a design system delivered as native libraries. You do not adopt a runtime or a cross-platform framework; you add the package for the platform you already build on and get the same tokens, components and accessibility behaviour as every other platform.

> [!WARNING]
> **Prerelease**
>
> `0.1.0-next.0` is published under the npm dist-tag `next`: until `0.1.0`, add `@next` to a package’s name when you install it (`npm install @tanrei/web@next`). During the 0.x prereleases backward compatibility is not kept: any prerelease may break anything, with no deprecation period first, and its changeset says what broke.
>
> Not published yet: SwiftUI, Jetpack Compose, Flutter and React Native. A platform is published once it has caught up with the current specs, and its CI is paused until then; meanwhile its guide shows how it is added from the source.

## Pick your platform

- [Web](https://tanrei.chnotchy.com/getting-started/web/): CSS custom properties and Web Components. Works with any framework, or none.
- [React](https://tanrei.chnotchy.com/getting-started/react/): Typed React components generated from the Web Components.
- [SwiftUI](https://tanrei.chnotchy.com/getting-started/swiftui/): A Swift package for iOS and macOS.
- [Jetpack Compose](https://tanrei.chnotchy.com/getting-started/compose/): An Android library on Compose Foundation, with no Material dependency.
- [Flutter](https://tanrei.chnotchy.com/getting-started/flutter/): A pure Dart package that works with or without MaterialApp.
- [React Native](https://tanrei.chnotchy.com/getting-started/react-native/): Pure TypeScript components, no native modules.

## The same button, six ways

Every component is defined once, in a platform-neutral spec, and implemented with each platform’s idioms. Your choice of tab is remembered across the site.

**Web**

```html
<tanrei-button variant="tonal">Save draft</tanrei-button>
```

**React**

```tsx
<Button variant="tonal" onClick={saveDraft}>Save draft</Button>
```

**SwiftUI**

```swift
TanreiButton("Save draft", variant: .tonal) { saveDraft() }
```

**Compose**

```kotlin
TanreiButton(text = "Save draft", onClick = ::saveDraft, variant = TanreiButtonVariant.Tonal)
```

**Flutter**

```dart
TanreiButton(variant: TanreiButtonVariant.tonal, onPressed: saveDraft, child: const Text('Save draft'))
```

**React Native**

```tsx
<Button variant="tonal" onPress={saveDraft}>Save draft</Button>
```

## What you get on every platform

- **Tokens.** Color roles, typescale, shape, elevation, motion, state and spacing values generated from one DTCG source into CSS custom properties, Swift, Kotlin, Dart and TypeScript constants.
- **Themes.** Light and dark, each at standard, medium and high contrast. By default a theme follows the operating system; you can force either setting for the whole app or a subtree.
- **Components.** Implementations of the shared specs, with the same variants, states and keyboard behaviour everywhere.
- **Accessibility defaults.** Minimum hit targets, a visible focus ring, text that survives 200% scaling and respect for reduced motion are built in rather than left to each screen.

## How to read these docs

- [Foundations](https://tanrei.chnotchy.com/foundations/brand/) explain the ideas and the rules.
- The [token reference](https://tanrei.chnotchy.com/tokens/color/) lists every value, rendered straight from the token files.
- [Components](https://tanrei.chnotchy.com/components/) follow one template: overview, specs, guidelines, accessibility. Tables on those pages come from the component’s spec, so they cannot fall out of date.
- [Status](https://tanrei.chnotchy.com/status/) is generated from the repository.
- [Using Tanrei with AI agents](https://tanrei.chnotchy.com/getting-started/ai-agents/) shows how to connect the MCP server, and gives a coding agent the rules to write your UI with Tanrei.