Components / Layout

Stack

Stack is the named flex container. It exists so common spacing setups read clearly at the call site without juggling display, flexDirection, and gap props every time.

Loading playground…

What it is

A <Box display="flex"> with a direction prop. Stack composes through Box, so every style prop, every responsive key, every pseudo-state applies — gap is the prop you reach for most.

Install

Stack is exported from usemotif. No separate install.

example.tsx

import { Stack } from 'usemotif';

API

Stack

stable

function Stack(props: StackProps): JSX.Element

direction"column" | "row" | "column-reverse" | "row-reverse"= "column"

Flex direction. Use `HStack` for `"row"` or `VStack` for `"column"` if you prefer the named shorthand.

…BoxPropsBoxProps

Every prop Box accepts — minus `display` and `flexDirection`, which Stack manages.

gap, alignItems, justifyContent, flexWrap, every other flex-related style prop comes from Box. They work normally.

Examples

Simple vertical stack:

example.tsx

<Stack gap="$4">
<Heading>Title</Heading>
<Text>Body copy.</Text>
<Button>Continue</Button>
</Stack>

Horizontal row with the direction prop:

example.tsx

<Stack direction="row" gap="$2" alignItems="center">
<Avatar src={user.avatar} />
<Text>{user.name}</Text>
</Stack>

For horizontal layouts you reach for often, the HStack shorthand reads more clearly:

example.tsx

<HStack gap="$2" alignItems="center">
<Avatar src={user.avatar} />
<Text>{user.name}</Text>
</HStack>

Responsive direction — column on phones, row on desktops:

example.tsx

<Stack direction={{ base: 'column', md: 'row' }} gap="$4">
<Image />
<Box>
  <Heading>Heading</Heading>
  <Text>Body</Text>
</Box>
</Stack>