Presets

Tanrei ships its default system, tanrei, and three presets: m3-like, m3-expressive-like and cupertino. A preset is a design system layer like the one you would write yourself: it gives Tanrei’s components the values of another design system, and it decides which components, and which values of their variant, it has. Use one as it is, or as the starting point of your own design system.

Use a preset on the web

link

1. Load the tokens, then the preset’s stylesheet. Its tokens apply where its attribute is set.

   import '@tanrei/web/tokens.css';
   import '@tanrei/web/systems/m3-like.css';

2. Set the attribute on <html>, or on any part of the page: several systems can live on one page.

   <html data-tanrei-system="m3-like">

3. Register the preset’s components with its entry, in place of @tanrei/web. It registers the components the preset has and no other.

   import '@tanrei/web/m3-like';

4. Load its fonts under the family names its tokens use, listed below. Tanrei bundles no font file: see Fonts.

What a preset has is listed in its components manifest, @tanrei/web/systems/<id>.components.json, which editors and coding agents read. On this site, choose a design system beside the list of components, or at the top of the sidebar, and the lists show only what that system has.

The presets

link

Each preset’s facts below are read from its layer, its resolved tokens and its components manifest.

m3-like

link

Stylesheet

@tanrei/web/systems/m3-like.css

Attribute

data-tanrei-system="m3-like"

Components

96, registered by @tanrei/web/m3-like

Text

Roboto, system-ui, sans-serif — load Roboto (@fontsource-variable/roboto)

Code

Roboto Mono, ui-monospace, monospace — load Roboto Mono (@fontsource-variable/roboto-mono)

Icons

Material Symbols Outlined — load Material Symbols Outlined (@fontsource-variable/material-symbols-outlined)

Beyond the default system

FAB menu, Segmented button

Not in it

none

Variant values beyond the default system

filled, outlined: Chip field, Color field, Color input, Combobox, Combobox field, Number field, Number input, Select, Select field, Text field, Text input

Variant values it leaves out

filled: Navigation bar · tonal: Tabs

Generated from tokens/systems/m3-like.system.json, tokens/generated/m3-like/components.json

m3-expressive-like

link

Stylesheet

@tanrei/web/systems/m3-expressive-like.css

Attribute

data-tanrei-system="m3-expressive-like"

Components

96, registered by @tanrei/web/m3-expressive-like

Text

Roboto, system-ui, sans-serif — load Roboto (@fontsource-variable/roboto)

Code

Roboto Mono, ui-monospace, monospace — load Roboto Mono (@fontsource-variable/roboto-mono)

Icons

Material Symbols Outlined — load Material Symbols Outlined (@fontsource-variable/material-symbols-outlined)

Beyond the default system

FAB menu, Segmented button

Not in it

none

Variant values beyond the default system

filled, outlined: Chip field, Color field, Color input, Combobox, Combobox field, Number field, Number input, Select, Select field, Text field, Text input

Variant values it leaves out

filled: Navigation bar · tonal: Tabs

Generated from tokens/systems/m3-expressive-like.system.json, tokens/generated/m3-expressive-like/components.json

cupertino

link

Stylesheet

@tanrei/web/systems/cupertino.css

Attribute

data-tanrei-system="cupertino"

Components

95, registered by @tanrei/web/cupertino

Text

-apple-system, BlinkMacSystemFont, system-ui, Inter, sans-serif — load Inter (@fontsource-variable/inter)

Code

ui-monospace, SF Mono, Menlo, monospace — the platform’s own fonts

Icons

Material Symbols Rounded — load Material Symbols Rounded (@fontsource-variable/material-symbols-rounded)

Beyond the default system

Segmented button

Not in it

FAB menu (use Main action button, Bottom sheet instead)

Variant values beyond the default system

filled, outlined: Chip field, Color field, Color input, Combobox, Combobox field, Number field, Number input, Select, Select field, Text field, Text input

Variant values it leaves out

filled: Navigation bar

Generated from tokens/systems/cupertino.system.json, tokens/generated/cupertino/components.json

Take one preset component into your own system

link

A component that a preset has and the default system does not — the FAB menu of m3-like, or the segmented button — is not out of reach of a product on the default system. Write a layer that extends tanrei, include the component in it, and import its own module. The component is then drawn with your system’s tokens: its tokens alias your system’s, so a FAB menu taken this way looks like the rest of your product, and none of the preset’s values come along.

1. Include the component in your layer (design/acme.system.json; see Your own design system). A component that lives in a preset’s layer names that layer (from); one the default system leaves out is named alone.

   {
     "id": "acme",
     "extends": "tanrei",
     "components": {
       "include": [{ "name": "fab-menu", "from": "m3-like" }, "segmented-button"]
     }
   }

2. Build. npx tanrei build writes your system’s stylesheet, which holds the included components’ tokens valued from yours, and your components manifest, which lists them.

3. Load your stylesheet, set your attribute, and register the default system’s components and the ones you took.

   import '@tanrei/web/tokens.css';
   import './styles/acme.css';
   import '@tanrei/web';
   import '@tanrei/web/components/fab-menu';
   import '@tanrei/web/components/segmented-button';

   <html data-tanrei-system="acme">

A component used under a system that does not have it is still drawn, and says so in the console of a development build. Each component’s page says which systems have it, and what the others use instead.