# Divider

A horizontal or vertical rule drawn in box-drawing glyphs or a repeating glyph pattern, with an optional label or ornament.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. The asciicn agent skill, for building any ASCII effect on the engine, is at [/.well-known/agent-skills/asciicn/SKILL.md](/.well-known/agent-skills/asciicn/SKILL.md).

> **This is an example, not the only option.** It is one component built on the asciicn engine. Install it when it is what you were asked for. For any other look, don't stretch its props to fit: write your own field on `AsciiShader` ([Write your own](/docs/engine/write-your-own.md)), or draw a CPU grid with `AsciiGrid`, and read this example's source for technique. Its full source is in [https://asciicn.dev/r/divider.json](https://asciicn.dev/r/divider.json), under `files[].content`.

## Installation [#installation]

```bash
npx shadcn@latest add https://asciicn.dev/r/divider.json
```

## Usage [#usage]

```tsx
import { Divider } from "@/components/asciicn/divider";

export function Section() {
  return <Divider label="Settings" align="start" />;
}
```

The rule is a run of one glyph, clipped to the width of its container: `─` by default, `━` with `variant="heavy"`, `═` for `double`, `┄` for `dashed` and `-` for plain `ascii`. The pattern variants repeat a short sequence: `dots` is `·`, `beads` alternates `·•` and `diamonds` spaces out `◆`. Patterns start at the label and read outward on both sides, so the glyphs next to the label always match.

`label` sets text into the rule, `──── label ────`. `align="start"` or `"end"` leaves a four-cell lead before it. Without a label, `ornament` sets a single glyph in the middle instead, such as `◆` or `§`.

## Examples [#examples]

### Every variant [#every-variant]

Each variant with its name as a start-aligned label, then a light rule with a `◆` ornament.

```tsx title="examples/divider-patterns.tsx"
import { Divider } from "@/components/asciicn/divider";
import type { DividerVariant } from "@/components/asciicn/divider";

const VARIANTS: readonly DividerVariant[] = [
  "light",
  "heavy",
  "double",
  "dashed",
  "ascii",
  "dots",
  "beads",
  "diamonds",
];

export default function DividerPatterns() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-4">
      {VARIANTS.map((variant) => (
        <Divider
          key={variant}
          variant={variant}
          label={variant}
          align="start"
        />
      ))}
      <Divider variant="light" ornament="◆" color="orange" />
    </div>
  );
}
```

### Labelled [#labelled]

A dashed rule with a centred label between two sign-in options.

```tsx title="examples/divider-label.tsx"
import { GithubIcon, Mail01Icon } from "@hugeicons/core-free-icons";

import { Divider } from "@/components/asciicn/divider";
import { Icon } from "@/components/icon";
import { Button } from "@/components/ui/button";

export default function DividerLabel() {
  return (
    <div className="bg-background flex w-full max-w-sm flex-col gap-5 rounded-lg border p-6">
      <div className="flex flex-col gap-1">
        <span className="font-semibold tracking-tight">Sign in</span>
        <span className="text-muted-foreground text-sm">
          Pick up where you left off.
        </span>
      </div>
      <Button variant="outline" className="w-full">
        <Icon icon={GithubIcon} />
        Continue with GitHub
      </Button>
      <Divider variant="dashed" label="or" />
      <Button className="w-full">
        <Icon icon={Mail01Icon} />
        Continue with email
      </Button>
    </div>
  );
}
```

### Vertical [#vertical]

`orientation="vertical"` stacks the glyph down the height of a flex row, here between three stats.

```tsx title="examples/divider-vertical.tsx"
import { Divider } from "@/components/asciicn/divider";

const STATS = [
  { label: "Requests", value: "1.28M" },
  { label: "p95 latency", value: "184ms" },
  { label: "Error rate", value: "0.04%" },
];

export default function DividerVertical() {
  return (
    <div className="bg-background flex w-full max-w-xl items-stretch rounded-lg border px-2 py-4">
      {STATS.map((stat, index) => (
        <div key={stat.label} className="contents">
          {index > 0 ? (
            <Divider orientation="vertical" variant="dashed" />
          ) : null}
          <div className="flex flex-1 flex-col justify-center px-4 sm:px-6">
            <span className="text-muted-foreground text-xs">{stat.label}</span>
            <span className="font-mono text-xl font-semibold tracking-tight tabular-nums sm:text-2xl">
              {stat.value}
            </span>
          </div>
        </div>
      ))}
    </div>
  );
}
```

## Props [#props]

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"light" \| "heavy" \| "double" \| "dashed" \| "ascii" \| "dots" \| "beads" \| "diamonds"` | `"light"` | The glyph or pattern the rule is drawn with. |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Across the container, or down the height of a flex row. |
| `label` | `ReactNode` |  | Text set into the rule. A string label is also the accessible name. |
| `align` | `"start" \| "center" \| "end"` | `"center"` | Where the label sits along the rule. |
| `ornament` | `string` |  | A glyph set into the middle when there is no label. |
| `color` | `AsciiColor` | `"grey"` | Glyph colour, a palette name or any CSS colour. |
| `cell` | `number` | `--ascii-cell` | Glyph cell height in CSS pixels. |

## Notes [#notes]

* The root has `role="separator"` and `aria-orientation`. The glyphs are hidden from screen readers; a string `label` becomes the separator's `aria-label`.
* It is plain text with no measuring and no script, so it renders on the server, stays sharp at any zoom and never shifts the layout.
* A run is clipped where the container ends, so the last glyph of a pattern can be cut. Lines (`─━═┄-`) hide the cut.