Grid

Arrange content in rows and columns.

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 { Grid, GridItem } from "@dethink/components";

Examples

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

Columns and spans

A three-column grid with colSpan=2 and colSpan=full cells.

colSpan=2

colSpan=full

Show sourceexamples/grid/basic.tsx

examples/grid/basic.tsx

"use client";

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

export function GridBasic() {
  return (
    <Grid columns="3" gap="3" className="mx-auto max-w-md">
      <GridItem colSpan="2">
        <Box p="3" radius="md" surface="info">
          <Text size="sm">colSpan=2</Text>
        </Box>
      </GridItem>
      <GridItem>
        <Box p="3" radius="md" surface="muted">
          <Text size="sm">1</Text>
        </Box>
      </GridItem>
      <GridItem>
        <Box p="3" radius="md" surface="muted">
          <Text size="sm">1</Text>
        </Box>
      </GridItem>
      <GridItem colSpan="full">
        <Box p="3" radius="md" surface="muted">
          <Text size="sm">colSpan=full</Text>
        </Box>
      </GridItem>
    </Grid>
  );
}

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

Grid and GridItem props
Prop	What it does	Default
`columns / rows"1"–"12" (+ responsive) / "1"–"6"`	Track counts.	Not set
`gap"none" \| "1"–"12"`	Tokenized gap for both axes.	`"none"`
`GridItem — colSpan / rowSpan"1"–"6" \| "full"`	Span control per cell.	`"1"`
`align / justify / contentgrid alignment values`	Item and content alignment.	`stretch`