Stack

Arrange content in a row or column with even spacing.

On this page

Installation

Install component source from the public registry, or use the local workspace package. Follow the setup guide first. The npm package is not published yet.

View registry files

Built with

Implemented with React and browser APIs, without an additional behavior or rendering library.

Shared foundation: React, clsx for conditional classes, tailwind-merge for resolving utility-class conflicts. Styles use Tailwind CSS and Dethink CSS variables.

Based on this component’s source and registry composition. Libraries used only in showcase examples are excluded.

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`