wwwwwwwwwwwwwwwwwww
Introduction
Installation
Releases

Core

Configuration
Tokens
Stack & Text
styled
Variants
Props
Themes
Animations
Theme
useMedia
useTheme
FontLanguage
Extras

Compiler

About
Install
Benchmarks

Theme

Colors
Tokens

Tamagui

Stacks
Headings
Text

Forms

Button
Checkbox
Form
Input & TextArea
Label
Progress
RadioGroup
Select
Slider
Switch
ToggleGroup

Panels

AlertDialog
Dialog
Popover
Sheet
Tooltip
Toast

Organize

Accordion
Group
Tabs

Content

Avatar
Card
Image
ListItem

Visual

LinearGradient
Separator
Square & Circle

Etc

Anchor
HTML Elements
ScrollView
Spinner
Unspaced
VisuallyHidden

Extras

Lucide Icons

Guides

Design Systems
Creating Custom Themes
How to Build a Button
Developing
Next.js
Expo
Vite
create-tamagui

Community

Community
Blog
GitHub
Twitter
Discord

Stack & Text

The base views of @tamagui/core.

Stack and Text are functionally equivalent to React Native View and Text, they just accept the superset of props that Tamagui supports.

Beyond View, Stack sets flexDirection to column.

Props

See the Props docs for the full list of properties.

Usage

You can use them directly:

import { Stack, Text } from 'tamagui' // or '@tamagui/core'
export default () => (
<Stack margin={10}>
<Text color="$color">Hello</Text>
</Stack>
)

We encourage you to use inline styles. Combined with shorthands they can lead to really easy styling, and the Tamagui optimizing compiler will take care of optimizing everything for you so that there is little to no extra cost in performance:

import { Stack, Text } from 'tamagui' // or '@tamagui/core'
export default () => (
<Stack mx="$sm" scale={1.2}>
<Text c="$color">Hello</Text>
</Stack>
)

One really important and useful thing to note about Tamagui style properties: the order is important! Read more here

With styled()

You can also use them with styled to create your own lower level views that are meant to be re-usable:

import { Stack, styled } from 'tamagui' // or '@tamagui/core'
export const Circle = styled(Stack, {
borderRadius: 100_000_000,
variants: {
pin: {
top: {
position: 'absolute',
top: 0,
},
},
centered: {
true: {
alignItems: 'center',
justifyContent: 'center',
},
},
size: {
'...size': (size, { tokens }) => {
return {
width: tokens.size[size] ?? size,
height: tokens.size[size] ?? size,
}
},
},
} as const,
})

Inline styles and styled() both are optimized by the compiler, so you can author styles using both depending on the use case.

View

As of version 1.31 Tamagui exports a View as well, which has no style properties set by default (as opposed to Stack which sets the flexDirection to column by default).

Previous

Tokens

Next

styled