Flex

Arrange items with control over alignment, wrapping, and available space.

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

Examples

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

Grow

Two fixed items around a FlexItem with grow=1 taking the remaining space.

fixed

grow=1 — takes the remaining space

fixed

Show sourceexamples/flex/basic.tsx

examples/flex/basic.tsx

"use client";

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

export function FlexBasic() {
  return (
    <Flex gap="3" align="center" className="mx-auto max-w-md">
      <FlexItem>
        <Box p="3" radius="md" surface="muted">
          <Text size="sm">fixed</Text>
        </Box>
      </FlexItem>
      <FlexItem grow="1">
        <Box p="3" radius="md" surface="info">
          <Text size="sm">grow=1 — takes the remaining space</Text>
        </Box>
      </FlexItem>
      <FlexItem>
        <Box p="3" radius="md" surface="muted">
          <Text size="sm">fixed</Text>
        </Box>
      </FlexItem>
    </Flex>
  );
}

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

Flex and FlexItem props
Prop	What it does	Default
`direction / wrap / gaprow\|column / nowrap\|wrap / spacing`	Core flexbox axis configuration.	`row / nowrap / none`
`align / justify / contentflex alignment values`	Item and content alignment.	`stretch / start`
`FlexItem — grow / shrink / basis"0" \| "1" / "0" \| "1" / size`	Per-item flex behavior without arbitrary classes.	`0 / 1 / auto`