Skip to content
menumenu tanreiexpand_morecontrasttranslate
tanreiexpand_more
Getting startedWebReactSwiftUIJetpack ComposeFlutterReact NativePresetsYour own design systemUsing Tanrei with AI agentsBrandDesign tokensDesign systems and customizationTheme StudioColorTypographyIconsShapeElevationMotionInteraction statesBehaviourLayoutAccessibilityWordsColor tokensTypescale tokensShape tokensElevation tokensMotion tokensState tokensSpace and measure tokensComponentsButtonMain action buttonSegmented buttonButton groupButton with menuToolbarCopy buttonCheckboxRadio buttonSwitchChipMenuSliderSlider fieldCalendarDateTimePickerField groupRadio groupCheckbox groupSelectSelect fieldMenubarFile uploadFile picker AdvancedDrop zoneText input AdvancedText fieldChip fieldFieldCombobox AdvancedCombobox fieldNumber input AdvancedNumber fieldColor input AdvancedColor fieldOne-time-code input AdvancedOne-time-code fieldEmbedded text input AdvancedChat composerCardDividerModal layer AdvancedDialogListList rowBottom sheetSide sheetCarouselCode blockTablePopoverStepsAccordionDescription listFigureApp shellPage headerTree viewTimelineImage previewHandleResizable frameScroll areaBadgeProgress indicatorMeterNumber tickerLoading indicatorSnackbarTooltipKeyboard shortcutTagInline codeCalloutAvatarEmpty stateTag groupSkeletonFile itemSwatchMarquee textTabsTab viewApp barNavigation barNavigation drawerSearchLinkPaginationPrevious and next linksStepperBreadcrumbsTable of contentsLink cardFAB menuStatusHow Tanrei is builtContributingLicense and attribution
HomeGetting startedGetting started

Getting started

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

content_copyView as Markdown

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.

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

WebCSS custom properties and Web Components. Works with any framework, or none.ReactTyped React components generated from the Web Components.SwiftUIA Swift package for iOS and macOS.Jetpack ComposeAn Android library on Compose Foundation, with no Material dependency.FlutterA pure Dart package that works with or without MaterialApp.React NativePure 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.

<tanrei-button variant="tonal">Save draft</tanrei-button>
 
<Button variant="tonal" onClick={saveDraft}>Save draft</Button>
 
TanreiButton("Save draft", variant: .tonal) { saveDraft() }
 
TanreiButton(text = "Save draft", onClick = ::saveDraft, variant = TanreiButtonVariant.Tonal)
 
TanreiButton(variant: TanreiButtonVariant.tonal, onPressed: saveDraft, child: const Text('Save draft'))
 
<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 explain the ideas and the rules.
  • The token reference lists every value, rendered straight from the token files.
  • 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 is generated from the repository.
  • Using Tanrei with AI agents shows how to connect the MCP server, and gives a coding agent the rules to write your UI with Tanrei.

Source code and issues on GitHub