Custom themes, tokens, shorthands, and media queries.
Create a tamagui.config.ts
in the root of your app to set up your design system. It should only be imported by the top-level file that runs React.render
, to ensure fast refresh works.
To get started more quickly, try out @tamagui/shorthands
and @tamagui/theme-base
to set up nice defaults for shorthands, themes and tokens:
import { shorthands } from '@tamagui/shorthands'import { themes, tokens } from '@tamagui/theme-base'import { createTamagui } from 'tamagui'export default createTamagui({themes,tokens,shorthands,})
Let's start with a full yet slimmed down tamagui.config.ts
:
import { createTamagui, createTokens, createFont } from 'tamagui'const interFont = createFont({family: 'Inter, Helvetica, Arial, sans-serif',size: {1: 12,2: 14,3: 15,// ...},lineHeight: {1: 17,2: 22,3: 25,// ...},weight: {4: 300,6: 600,},letterSpacing: {4: 0,8: -1,},// you may also set `transform` as textTransform values// and `style` as fontStyle values})const size = {0: 0,1: 5,2: 10// ....}export const tokens = createTokens({size,space: { ...size, '-1': -5, '-2': -10 },radius: { 0: 0, 1: 3 },zIndex: { 0: 0, 1: 100, 2: 200 },color: {white: '#fff',black: '#000'},})const config = createTamagui({fonts: {// for tamagui, heading and body are assumedheading: interFont,body: interFont,},tokens,themes: {light: {bg: '#f2f2f2',color: tokens.color.black,},dark: {bg: '#111',color: tokens.color.white,},},media: {sm: { maxWidth: 860 },gtSm: { minWidth: 860 + 1 },short: { maxHeight: 820 },hoverNone: { hover: 'none' },pointerCoarse: { pointer: 'coarse' },},shorthands: {px: 'paddingHorizontal',f: 'flex',w: 'width',},})type Conf = typeof config// this will give you types for your componentsdeclare module 'tamagui' {interface TamaguiCustomConfig extends Conf {}}export default config
The createTamagui
function receives a configuration object:
tokens
: Use createTokens
to generate variables in your theme and app.theme
: Define your design theme, which map to CSS properties.media
: Define reusable responsive media queries.shorthands
: Define any props you want to expand to style values, keys being the shorthand and values being the expanded style prop.Import and use the Tamagui Provider
component at the top component in your app.
import Tamagui from './tamagui.config'export default function App() {return (<Tamagui.Provider>{/* The rest of your app here */}</Tamagui.Provider>)}
Tamagui.Provider takes a few properties:
Prop | Type | Default |
---|---|---|
defaultTheme* | string | |
disableRootThemeClass | boolean | |
Disable inserting a theme class in the DOM or context, allowing you to manually place it higher. For custom use cases like integration with next-theme. | ||
injectCSS | boolean | |
By default Tamagui won't insert any of your CSS, letting you control if you want to serve it at build time. But if you're not doing any SSR stuff, this is a simple way to have your theme and base CSS inserted automatically. | ||
initialWindowMetrics | react-native-safe-area-context Metrics | |
children | any |
Tokens have a structure inspired by but divergent from the Theme UI spec . They are mapped to CSS variables at build time.
The font tokens are a bit special and are created with createFont
:
const interFont = createFont({family: 'Inter, Helvetica, Arial, sans-serif',size: {1: 12,2: 14,3: 15,// ...},lineHeight: {1: 17,2: 22,3: 25,// ...},weight: {4: 300,6: 600,},letterSpacing: {4: 0,8: -1,},})
Note, you don't need to use numbered keys, you can use sm
or tiny
or whatever you'd like. But
you do want keep those keys consistent.
This gives you a lot of power over customizing every aspect of your design based on each font family. In other styling libraries that follow the Theme UI spec, you generally don't group your size/lineHeight/weight/etc tokens by the family, which means you are forced to choose a single vertical rythym no matter the font.
Things to note:
size
, lineHeight
, weight
, and letterSpacing
are meant to match.size
, the rest can be a subset.weight
is only defined at 4
and 6
.1
=== 300
, weight 5
=== 300
, and weight 7
=== 600
.The rest of the tokens categories besides font are flatter. The space
and size
generally share keys, and that space can generally use negative keys as well.
// passed into createTamaguiconst tokens = createTokens({color: {white: '#fff',black: '#000'},})
You access tokens then by using $
prefixes in your values. Tamagui knows which tokens to use based on the style property you use.
const App = () => (<Text fontSize="$lg" lineHeight="$lg" fontFamily="$mono" color="$white" >Hello world</Text>)
One final note: using tokens with themes. Tokens are considered a "fallback" to themes, so any values you define in your theme will override the token. The next section will explain this further.
If you'd like to enforce only allowing token values from your theme, you can override the ThemeValueFallback
type in tamagui in your tamagui.config.ts
, like so:
const config = createTamagui({...yourConfig,})type Conf = typeof configdeclare module 'tamagui' {interface TamaguiCustomConfig extends Conf {}// add this line:type ThemeFallbackValue = {}}
This will change all special style properties that map to token/theme values to not accept strings or numbers. If you want to make exceptions, you can then add back in any general types by overriding one of the following: SizeTokens
, FontTokens
, FontSizeTokens
, FontLineHeightTokens
, FontWeightTokens
, FontLetterSpacingTokens
, FontStyleTokens
, FontTransformTokens
, SpaceTokens
, ColorTokens
, and ZIndexTokens
.
Themes live one level below tokens. Tokens are your variables, where themes use those tokens to create consistent, generic properties that you then typically use in shareable components. Themes should generally only deal with colors.
Tamagui components in general expect a set of theme keys to be defined like the following, but you can deviate if you create your own design system. See the source for the website for a fuller example.
const light = {background: '#fff',backgroundHover: tokens.color.gray2,backgroundPress: tokens.color.gray4,backgroundFocus: tokens.color.gray5,backgroundTransparent: tokens.color.grayA1,borderColor: tokens.color.gray4,borderColorHover: tokens.color.gray6,borderColorPress: tokens.color.gray12,borderColorFocus: tokens.color.gray11,color: tokens.color.gray10,colorHover: tokens.color.gray9,colorPress: tokens.color.gray8,colorFocus: tokens.color.gray8,shadowColor: tokens.color.grayA4,shadowColorHover: tokens.color.grayA6,shadowColorPress: tokens.color.grayA8,shadowColorFocus: tokens.color.grayA8,...lightColors,}
You don't have to use tokens as your theme values, but if you do they avoid some overhead. With Tamagui, the idea is that bg
, color
, and borderColor
represent the "primary" and clearest colors, and bg2
, color2
etc get more subtle.
To see how it works, here's a snippet from InteractiveFrame
which is the frame component that's used in Button
:
export const InteractiveFrame = styled(XStack, {borderRadius: '$1',paddingVertical: '$2',paddingHorizontal: '$3',backgroundColor: '$background',justifyContent: 'center',alignItems: 'center',cursor: 'pointer',flexWrap: 'nowrap',flexDirection: 'row',flexShrink: 1,hoverStyle: {backgroundColor: '$backgroundHover',},pressStyle: {backgroundColor: '$backgroundPress',},// ...})
For more full docs on media queries, see the useMedia docs page.
Shorthands are defined directly on your createTamagui
call, rather than being attached to each component, to de-couple shorthands from components. This forces component kits to standardize on the basic react-native style syntax and ensures there's only one set of abbreviations defined ever.
Here's an example of a partial shorthands configuration:
const shorthands = {ac: 'alignContent',ai: 'alignItems',als: 'alignSelf',bblr: 'borderBottomLeftRadius',bbrr: 'borderBottomRightRadius',bc: 'backgroundColor',br: 'borderRadius',btlr: 'borderTopLeftRadius',btrr: 'borderTopRightRadius',f: 'flex',// ...} as constexport default createTamagui({shorthands})
For a full configuration, see @tamagui/shorthands
Prop | Type | Default |
---|---|---|
mediaQueryDefaultActive | string[ | |
For the first render, determines which media queries are true (useful for SSR). | ||
cssStyleSeparator | string | |
What's between each generated CSS style rule. Set as newline to more easily debug outputted CSS. | ||
themeClassNameOnRoot | boolean | |
When using next-themes or anything that does SSR and attaches the theme class to the HTML tag, set this to true to have the proper CSS theme selectors generate | ||
shouldAddPrefersColorThemes | boolean |
|
Generates @media queries based on prefers-color-scheme for you if you have light/dark themes. | ||
maxDarkLightNesting | number | 3 |
(Advanced) On the web, tamagui treats "dark" and "light" themes as special and generates extra CSS to avoid having to re-render the entire page. This CSS relies on specificity hacks that multiply by your sub-themes. This prop sets the maxiumum number of nested dark/light themes you can do. Defaults to 3 for a balance, but can be higher if you nest them deeply. |