Box

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

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