Separator

Add a horizontal or vertical line between sections.

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

Examples

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

Orientations and tones

Horizontal rules with spacing, vertical dividers in a row of links, and a strong two-pixel variant.

Content above a default separator.

Content below. Decorative separators are hidden from assistive tech.

Docs

Registry

GitHub

tone=strong, thickness=2

Show sourceexamples/separator/basic.tsx

examples/separator/basic.tsx

"use client";

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

export function SeparatorBasic() {
  return (
    <div className="mx-auto max-w-md space-y-4">
      <Text size="sm">Content above a default separator.</Text>
      <Separator spacing="2" />
      <Text size="sm" tone="muted">
        Content below. Decorative separators are hidden from assistive tech.
      </Text>
      <Stack direction="horizontal" gap="3" align="center">
        <Text size="sm">Docs</Text>
        <Separator orientation="vertical" spacing="none" className="h-4" />
        <Text size="sm">Registry</Text>
        <Separator orientation="vertical" spacing="none" className="h-4" />
        <Text size="sm">GitHub</Text>
      </Stack>
      <Separator tone="strong" thickness="2" spacing="2" />
      <Text size="sm" tone="muted">
        tone=strong, thickness=2
      </Text>
    </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

Separator props
Prop	What it does	Default
`orientation"horizontal" \| "vertical"`	Axis of the rule.	`"horizontal"`
`tone / thickness"default" \| "muted" \| "strong" / "1" \| "2"`	Visual weight.	`"default" / "1"`
`spacing"none" \| "1"–"8"`	Margin along the perpendicular axis.	`"none"`
`decorativeboolean`	Decorative rules are hidden from assistive tech; semantic ones announce as separators.	`true`