Stack

Arrange content in a row or column with even spacing.

On this page

Installation

Use this component from the local workspace package. Follow the setup guide first. A public npm package and registry are not available yet.

View registry files

Usage

Import the component into your page or component file.

Usage

import { Stack } from "@dethink/components";

Examples

Try the examples, then open the code to use them in your app.

Direction, gap, and alignment

Vertical rhythm on the left; a horizontal row with space-between on the right.

vertical

gap=3

stacked

horizontal

between

Show sourceexamples/stack/basic.tsx

examples/stack/basic.tsx

"use client";

import { Box, Stack, Text } from "@dethink/components";

export function StackBasic() {
  return (
    <div className="mx-auto grid max-w-md gap-6 sm:grid-cols-2">
      <Stack gap="3">
        <Box p="2" radius="sm" surface="muted">
          <Text size="sm">vertical</Text>
        </Box>
        <Box p="2" radius="sm" surface="muted">
          <Text size="sm">gap=3</Text>
        </Box>
        <Box p="2" radius="sm" surface="muted">
          <Text size="sm">stacked</Text>
        </Box>
      </Stack>
      <Stack direction="horizontal" gap="2" align="center" justify="between">
        <Box p="2" radius="sm" surface="muted">
          <Text size="sm">horizontal</Text>
        </Box>
        <Box p="2" radius="sm" surface="muted">
          <Text size="sm">between</Text>
        </Box>
      </Stack>
    </div>
  );
}

Recipes

Combine the layout components to build a dashboard.

Dashboard skeleton

Container centers, Flex lays out the header, Grid places the tiles, Stack handles rhythm, Separator divides, and Box provides every surface.

Operations

Production · last 24 hours

All systems normal

Requests

1.2M

+8.1% vs yesterday

p99 latency

212 ms

−4.3% vs yesterday

Error rate

0.04%

−0.01% vs yesterday

Traffic is shifting to EU West — consider raising the regional capacity floor.

Review →

Show sourceexamples/layout/recipe-dashboard.tsx

examples/layout/recipe-dashboard.tsx

"use client";

import {
  Box,
  Container,
  Flex,
  FlexItem,
  Grid,
  GridItem,
  Heading,
  Separator,
  Stack,
  Text,
} from "@dethink/components";

const stats = [
  { label: "Requests", value: "1.2M", delta: "+8.1%" },
  { label: "p99 latency", value: "212 ms", delta: "−4.3%" },
  { label: "Error rate", value: "0.04%", delta: "−0.01%" },
];

/**
 * A dashboard skeleton built only from the layout and typography
 * primitives — no custom CSS. Container centers, Flex lays out the header,
 * Grid places the stat tiles, Stack handles vertical rhythm, and Box
 * provides every surface.
 */
export function LayoutRecipeDashboard() {
  return (
    <Container size="md" gutter="none">
      <Stack gap="4">
        <Flex align="center" justify="between" gap="4">
          <Stack gap="1">
            <Heading level={3}>Operations</Heading>
            <Text size="sm" tone="muted">
              Production · last 24 hours
            </Text>
          </Stack>
          <Box px="3" py="1" radius="full" surface="muted">
            <Text size="xs" weight="medium">
              All systems normal
            </Text>
          </Box>
        </Flex>
        <Separator spacing="none" />
        <Grid columns="3" gap="3">
          {stats.map((stat) => (
            <GridItem key={stat.label}>
              <Box p="4" radius="md" border="default" surface="background">
                <Stack gap="1">
                  <Text size="xs" tone="muted">
                    {stat.label}
                  </Text>
                  <Text size="xl" weight="semibold">
                    {stat.value}
                  </Text>
                  <Text size="xs" tone="subtle">
                    {stat.delta} vs yesterday
                  </Text>
                </Stack>
              </Box>
            </GridItem>
          ))}
          <GridItem colSpan="full">
            <Box p="4" radius="md" surface="muted">
              <Flex align="center" gap="3">
                <FlexItem grow="1">
                  <Text size="sm">
                    Traffic is shifting to EU West — consider raising the
                    regional capacity floor.
                  </Text>
                </FlexItem>
                <Text size="xs" tone="primary" weight="medium">
                  Review →
                </Text>
              </Flex>
            </Box>
          </GridItem>
        </Grid>
      </Stack>
    </Container>
  );
}

Props

Stack props
Prop	What it does	Default
`direction"vertical" \| "horizontal"`	Flow axis.	`"vertical"`
`gap"none" \| "1"–"12"`	Tokenized spacing between children.	`"4"`
`align / justify / wrapalignment values`	Cross-axis alignment, main-axis distribution, wrapping.	`stretch / start / nowrap`
`as / asChildelement / boolean`	Semantic element or child merging.	`"div" / false`