Stack

Stack is a flex-based layout component for arranging children with consistent spacing. It defaults to a column direction, making it ideal for vertical layouts.

Import

import { Stack } from "@tosui/react";

Basic Usage

Code

<Stack gap={4}>
  <Box p={4} bg="primary-subtle">Item 1</Box>
  <Box p={4} bg="accent-subtle">Item 2</Box>
  <Box p={4} bg="success-subtle">Item 3</Box>
</Stack>

Preview

Item 1

Item 2

Item 3

Direction

Control the stack direction with the direction prop.

Code

<Stack direction="row" gap={4}>
  <Box p={4} bg="primary-subtle">Row 1</Box>
  <Box p={4} bg="accent-subtle">Row 2</Box>
  <Box p={4} bg="success-subtle">Row 3</Box>
</Stack>

<Stack direction="column" gap={4}>
  <Box p={4} bg="primary-subtle">Column 1</Box>
  <Box p={4} bg="accent-subtle">Column 2</Box>
  <Box p={4} bg="success-subtle">Column 3</Box>
</Stack>

Preview

Row 1

Row 2

Row 3

Column 1

Column 2

Column 3

Alignment

Use align and justify to control item alignment.

Code

<Stack direction="row" gap={4} align="center" justify="space-between" p={4} bg="surface" border="thin" borderColor="border">
  <Box p={2} bg="primary-subtle">Left</Box>
  <Box p={4} bg="accent-subtle">Center (taller)</Box>
  <Box p={2} bg="success-subtle">Right</Box>
</Stack>

Preview

Left

Center (taller)

Right

Responsive Direction

Use responsive objects to change direction at different breakpoints. This is a common pattern for layouts that stack vertically on mobile and horizontally on desktop.

Code

<Stack direction={{ base: "column", md: "row" }} gap={4} align={{ base: "stretch", md: "center" }}>
  <Box p={4} bg="primary-subtle">Sidebar</Box>
  <Box p={4} bg="accent-subtle" flexGrow={1}>Main Content</Box>
</Stack>

Preview

Sidebar

Main Content

Wrapping

Enable wrapping with the wrap prop for responsive layouts.

Code

<Stack direction="row" gap={4} wrap>
  <Box p={4} bg="primary-subtle" minW="150px">Item 1</Box>
  <Box p={4} bg="accent-subtle" minW="150px">Item 2</Box>
  <Box p={4} bg="success-subtle" minW="150px">Item 3</Box>
  <Box p={4} bg="warning-subtle" minW="150px">Item 4</Box>
  <Box p={4} bg="error-subtle" minW="150px">Item 5</Box>
</Stack>

Preview

Item 1

Item 2

Item 3

Item 4

Item 5

Polymorphic

Stack can render as any HTML element using the as prop.

<Stack as="nav" gap={2}>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</Stack>

<Stack as="ul" gap={2}>
  <li>Item 1</li>
  <li>Item 2</li>
</Stack>

Props Reference

All convenience props (direction, align, justify, wrap) accept responsive objects in addition to simple values.

Prop	Type	Default	Description
direction	ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">	"column"	Stack direction
gap	ResponsiveValue<0-32>	-	Gap between children (spacing multiplier)
align	ResponsiveValue<"start" | "center" | "end" | "stretch" | "baseline">	-	Cross-axis alignment
justify	ResponsiveValue<"start" | "center" | "end" | "space-between" | "space-around" | "space-evenly">	-	Main-axis alignment
wrap	ResponsiveValue<boolean>	false	Enable flex wrapping
as	ElementType	"div"	HTML element to render

Stack also accepts all Box props except display, flexDirection, justifyContent, alignItems, flexWrap, and gap.

TypeScript

import { Stack, type StackProps, type StackOwnProps } from "@tosui/react";