Stack
Flexbox primitives: Box, Stack, HStack, VStack, Center and Spacer, with responsive direction and alignment.Stacks and spacer
Preview
Code
Maya ChenProduct designer
Admin
Jordan LeeProduct designer
Admin
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { HStack, Spacer, Stack, Text } from '@advui/core'
// A column on phones, a row from md
<Stack direction={{ base: 'column', md: 'row' }} align="center" distribute="between" gap="4">
<Text>Left</Text>
<Text>Right</Text>
</Stack>
<HStack gap="2">
<Text>Left</Text>
<Spacer />
<Text>Right</Text>
</HStack>Examples
Responsive direction
A column on phones and a row from md, with `direction={{ base: "column", md: "row" }}`.Preview
Code
Step 1Plan
Step 2Build
Step 3Ship
Toolbar
A title and actions pushed apart with `distribute="between"`, stacked on phones.Preview
Code
Projects
Wrapping row
`direction="row"` with `wrap="wrap"`. For chips and tags, Wrap does this for you.Preview
Code
XS
S
M
L
XL
XXL
3XL
4XL
Media props
The same layout with the raw style prop: `flexDirection="column md:row"`.Preview
Code
OneColumn on phones, row from md.
TwoColumn on phones, row from md.
ThreeColumn on phones, row from md.
API reference
Box
A `View` with every style prop and token.Stack
Flex column. `direction`, `wrap`, `align` and `distribute` take a value or a mobile-first map (0.9.0). The regular style props work too, with flat values such as `flexDirection="column md:row"`, and win when both set the same style.| Prop | Type | Default | Description |
|---|---|---|---|
direction | 'row' | 'column' | 'row-reverse' | 'column-reverse'or a breakpoint map | 'column' | Main axis. Sets `flexDirection`. |
wrap | 'nowrap' | 'wrap' | 'wrap-reverse'or a breakpoint map | 'nowrap' | Whether children wrap onto new lines. Sets `flexWrap`. |
align | 'start' | 'center' | 'end' | 'stretch' | 'baseline'or a breakpoint map | 'stretch' | Alignment on the cross axis. Sets `alignItems`. |
distribute | 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'or a breakpoint map | 'start' | Distribution on the main axis: `between` is `space-between`. Sets `justifyContent`. |
gap | SpaceTokens | — | Space between children, e.g. `2`. Responsive with media props. |
rowGap | SpaceTokens | — | Space between rows. |
columnGap | SpaceTokens | — | Space between columns. |
flexDirection | 'row' | 'column' | 'row-reverse' | 'column-reverse' | 'column' | Raw style prop. Wins over `direction` when both are given. |
alignItems | 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'stretch' | Raw style prop (shorthand `items`). Wins over `align`. |
justifyContent | 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'flex-start' | Raw style prop (shorthand `justify`). Wins over `distribute`. |
flexWrap | 'nowrap' | 'wrap' | 'wrap-reverse' | 'nowrap' | Raw style prop. Wins over `wrap`. |
HStack
A Stack laid out as a row, with its children centered on the cross axis.| Prop | Type | Default | Description |
|---|---|---|---|
direction | 'row' | 'column' | 'row-reverse' | 'column-reverse'or a breakpoint map | 'row' | Main axis. Sets `flexDirection`. |
wrap | 'nowrap' | 'wrap' | 'wrap-reverse'or a breakpoint map | 'nowrap' | Whether children wrap onto new lines. Sets `flexWrap`. |
align | 'start' | 'center' | 'end' | 'stretch' | 'baseline'or a breakpoint map | 'center' | Alignment on the cross axis. Sets `alignItems`. |
distribute | 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'or a breakpoint map | 'start' | Distribution on the main axis: `between` is `space-between`. Sets `justifyContent`. |
gap | SpaceTokens | — | Space between children, e.g. `2`. Responsive with media props. |
rowGap | SpaceTokens | — | Space between rows. |
columnGap | SpaceTokens | — | Space between columns. |
flexDirection | 'row' | 'column' | 'row-reverse' | 'column-reverse' | 'row' | Raw style prop. Wins over `direction` when both are given. |
alignItems | 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'center' | Raw style prop (shorthand `items`). Wins over `align`. |
justifyContent | 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'flex-start' | Raw style prop (shorthand `justify`). Wins over `distribute`. |
flexWrap | 'nowrap' | 'wrap' | 'wrap-reverse' | 'nowrap' | Raw style prop. Wins over `wrap`. |
VStack
A Stack laid out as a column.| Prop | Type | Default | Description |
|---|---|---|---|
direction | 'row' | 'column' | 'row-reverse' | 'column-reverse'or a breakpoint map | 'column' | Main axis. Sets `flexDirection`. |
wrap | 'nowrap' | 'wrap' | 'wrap-reverse'or a breakpoint map | 'nowrap' | Whether children wrap onto new lines. Sets `flexWrap`. |
align | 'start' | 'center' | 'end' | 'stretch' | 'baseline'or a breakpoint map | 'stretch' | Alignment on the cross axis. Sets `alignItems`. |
distribute | 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'or a breakpoint map | 'start' | Distribution on the main axis: `between` is `space-between`. Sets `justifyContent`. |
gap | SpaceTokens | — | Space between children, e.g. `2`. Responsive with media props. |
rowGap | SpaceTokens | — | Space between rows. |
columnGap | SpaceTokens | — | Space between columns. |
flexDirection | 'row' | 'column' | 'row-reverse' | 'column-reverse' | 'column' | Raw style prop. Wins over `direction` when both are given. |
alignItems | 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'stretch' | Raw style prop (shorthand `items`). Wins over `align`. |
justifyContent | 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'flex-start' | Raw style prop (shorthand `justify`). Wins over `distribute`. |
flexWrap | 'nowrap' | 'wrap' | 'wrap-reverse' | 'nowrap' | Raw style prop. Wins over `wrap`. |
Center
Centers its children on both axes.Spacer
Flexible empty space that pushes its siblings apart inside a stack.responsiveStyle(prop, value, map?)
The helper behind these props, for your own components: `responsiveStyle("flexDirection", { base: "column", md: "row" })` returns `{ flexDirection: { default: "column", md: "row" } }`, a Tamagui 3 conditional value. Only the breakpoints given are emitted; `map` (a record or a function) converts each value. `Responsive<T>` is the type of such a value.Prop values
The short values map to the flexbox ones.
| Prop | Value | Style |
|---|---|---|
align | start / end | alignItems: flex-start / flex-end |
distribute | start / end | justifyContent: flex-start / flex-end |
distribute | between / around / evenly | space-between / space-around / space-evenly |
direction, wrap | any | The same value, as flexDirection / flexWrap |
Accessibility
- Layout primitives add no roles; use semantic components (Heading, Button…) inside.
- Changing
directionchanges only the visual order’s axis; reading order still follows the source, so keep the source order meaningful.row-reverseandcolumn-reverseshow children in the opposite order from how screen readers read them.
Responsive behavior
direction, wrap, align and distribute take a value or a mobile-first map { base, xs, sm, md, lg, xl, xxl } (from 460, 640, 768, 1024, 1280 and 1536 px). Only the breakpoints you give are emitted, as conditional values, so on web they are CSS media queries (no flash during SSR) and on native they follow the window size. A raw style prop wins over its responsive prop at the base: flexDirection beats direction, whichever comes first. Where both set a breakpoint (flexDirection="md:row-reverse" and a direction map with md), the prop written later wins. Responsive gap is not a prop: use a flat value, gap="4 md:6".