code/tamagui.dev/tamagui-prompt.md
This document provides an overview of the Tamagui configuration for this project.
IMPORTANT: These settings affect how you write Tamagui code in this project.
bodyAll text components will use the "body" font family by default.
falseYou can use either shorthand or full property names.
inline-sizeEnables web-specific container query optimizations.
These shorthand properties are available for styling:
b → bottombg → backgroundColorcontent → alignContentgrow → flexGrowitems → alignItemsjustify → justifyContentl → leftm → marginmaxH → maxHeightmaxW → maxWidthmb → marginBottomminH → minHeightminW → minWidthml → marginLeftmr → marginRightmt → marginTopmx → marginHorizontalmy → marginVerticalp → paddingpb → paddingBottompl → paddingLeftpr → paddingRightpt → paddingToppx → paddingHorizontalpy → paddingVerticalr → rightrounded → borderRadiusselect → userSelectself → alignSelfshrink → flexShrinkt → toptext → textAlignz → zIndexThemes are organized hierarchically and can be combined:
Level 1 (Base):
Level 2 (Color Schemes):
Component Themes:
Themes are combined hierarchically. For example, light_blue_alt1_Button combines:
lightbluealt1ButtonBasic usage:
// Apply a theme to components
export default () => (
<Theme name="dark">
<Button>I'm a dark button</Button>
</Theme>
)
// Themes nest and combine automatically
export default () => (
<Theme name="dark">
<Theme name="blue">
<Button>Uses dark_blue theme</Button>
</Theme>
</Theme>
)
Accessing theme values:
Components can access theme values using $ token syntax:
<View backgroundColor="$background" color="$color" />
Special props:
inverse: Automatically swaps light ↔ dark themesreset: Reverts to grandparent themeTokens are design system values that can be referenced using the $ prefix.
-20: -186-19: -172-18: -158-17: -144-16: -144-15: -130-14: -116-13: -102-12: -88-11: -74-10: -60-9: -53-8: -46-7: -39-6: -32-5: -24-4.5: -21-4: -18-3.5: -16-3: -13-2.5: -10-2: -7-1.5: -4-1: -2-0.75: -1.5-0.5: -1-0.25: -0.5-true: -180: 00.25: 0.50.5: 10.75: 1.51: 21.5: 42: 72.5: 103: 133.5: 164: 184.5: 215: 246: 327: 398: 469: 5310: 6011: 7412: 8813: 10214: 11615: 13016: 14417: 14418: 15819: 17220: 186true: 180: 00.25: 20.5: 40.75: 81: 201.5: 242: 282.5: 323: 363.5: 404: 444.5: 485: 526: 647: 748: 849: 9410: 10411: 12412: 14413: 16414: 18415: 20416: 22417: 22418: 24419: 26420: 284true: 440: 01: 32: 53: 74: 95: 106: 167: 198: 229: 2610: 3411: 4212: 50true: 90: 01: 1002: 2003: 3004: 4005: 500Tokens can be used in component props with the $ prefix:
// Space tokens - for margin, padding, gap
<View padding="$4" gap="$2" margin="$3" />
// Size tokens - for width, height, dimensions
<View width="$10" height="$6" />
// Color tokens - for colors and backgrounds
<View backgroundColor="$blue5" color="$gray12" />
// Radius tokens - for border-radius
<View borderRadius="$4" />
Available responsive breakpoints:
Media queries can be used as style props or with the useMedia hook:
// As style props (prefix with $)
<View width="100%" $gtLarge={{ width: "50%" }} />
// Using the useMedia hook
const media = useMedia()
if (media.gtLarge) {
// Render for this breakpoint
}
Available font families:
Available animation presets:
The following components are available: