Grid

Arrange content in rows and columns.

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 { 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`