Box

Wrap content with spacing, a background, a border, or rounded corners.

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

Examples

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

Surfaces, borders, and radius

Every surface pairs a background with a readable foreground from the token system.

border=default, surface=background

surface=muted, radius=lg

border=primary

surface=info

Show sourceexamples/box/basic.tsx

examples/box/basic.tsx

"use client";

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

export function BoxBasic() {
  return (
    <div className="mx-auto grid max-w-md gap-3 sm:grid-cols-2">
      <Box p="4" radius="md" border="default" surface="background">
        <Text size="sm">border=default, surface=background</Text>
      </Box>
      <Box p="4" radius="lg" surface="muted">
        <Text size="sm">surface=muted, radius=lg</Text>
      </Box>
      <Box p="4" radius="md" border="primary">
        <Text size="sm" tone="primary">
          border=primary
        </Text>
      </Box>
      <Box p="4" radius="md" surface="info">
        <Text size="sm">surface=info</Text>
      </Box>
    </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

Box props
Prop	What it does	Default
`p / px / py / pt / pb / ps / pespacing token`	Padding on any side, logical-property aware for RTL.	Not set
`m / mx / my / mt / mb / ms / mespacing token`	Margin on any side.	Not set
`surface"transparent" \| "background" \| "muted" \| "primary" \| "destructive" \| "success" \| "warning" \| "info"`	Tokenized background with matching foreground.	`"transparent"`
`border / radiusborder tone / radius token`	Border color treatment and corner radius.	`"none"`
`display / gap / overflowdisplay value / spacing / overflow value`	Layout behavior of the box itself.	Not set
`as / asChildelement / boolean`	Semantic element, or merge styles onto the child.	`"div" / false`