# Divider

A horizontal or vertical dithered rule whose ends fade out, with an optional label in the middle.

> 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 dithercn agent skill, for building any dither on the engine, is at [/.well-known/agent-skills/dithercn/SKILL.md](/.well-known/agent-skills/dithercn/SKILL.md).

> **This is an example, not the only option.** It is one component built on the dithercn 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 `DitherShader` ([Write your own dither](/docs/engine/write-your-own.md)), and read this example's source for technique. Its full source is in [https://dithercn.dev/r/divider.json](https://dithercn.dev/r/divider.json), under `files[].content`.

## Installation [#installation]

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

## Usage [#usage]

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

export function Section() {
  return (
    <>
      <p>First section</p>
      <Divider />
      <p>Second section</p>
    </>
  );
}
```

The rule is solid in the middle and fades towards each tip in ten steps of dither. `fade` sets how much of each half is spent fading.

## Examples [#examples]

### With a label [#with-a-label]

Pass `label` and the rule splits around it, each half fading away from the text.

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

import { Divider } from "@/components/dithercn/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-2xl 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 label="or" />
      <Button className="w-full">
        <Icon icon={Mail01Icon} />
        Continue with email
      </Button>
    </div>
  );
}
```

### Vertical, between stats [#vertical-between-stats]

A vertical divider fills the height of its container. Here it uses `--foreground` at half strength and 2 pixel cells, so it separates the numbers without competing with them.

```tsx title="examples/divider-vertical.tsx"
import { Divider } from "@/components/dithercn/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 h-24 w-full max-w-xl items-stretch rounded-2xl border px-2 py-4">
      {STATS.map((stat, index) => (
        <div key={stat.label} className="contents">
          {index > 0 ? (
            <Divider
              orientation="vertical"
              color="--foreground"
              strength={0.4}
              thickness={1}
            />
          ) : 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="text-xl font-semibold tracking-tight tabular-nums sm:text-2xl">
              {stat.value}
            </span>
          </div>
        </div>
      ))}
    </div>
  );
}
```

## Props [#props]

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Which way the rule runs. |
| `label` | `ReactNode` | `–` | Text in the middle of the rule. Horizontal only. |
| `thickness` | `number` | `1` | Thickness in cells. |
| `fade` | `number` | `0.6` | Share of each half that fades out, from 0 to 1. |
| `strength` | `number` | `0.6` | Densest dither level, in the middle of the rule. |
| `color` | `DitherColor` | `"ink"` | Rule colour: a palette name such as "blue", a CSS variable name, or any CSS colour. |
| `fill` | `"gradient" \| "dotted" \| "hatched" \| "solid"` | `"gradient"` | Texture of the rule. Gradient fades through dither levels; the others keep their texture and fade by opacity. |
| `matrix` | `"bayer2" \| "bayer4" \| "bayer8" \| "blue-noise"` | `"bayer4"` | The threshold pattern for the gradient fill. |
| `cell` | `number` | `2` | Size of one dither cell in CSS pixels. |
| `decorative` | `boolean` | `true` | Unlabelled rules only. false gives the rule role="separator" for assistive technology. |

## Notes [#notes]

* By default the rule is decorative, like most visual dividers. Set `decorative={false}` when it separates content that screen reader users should know is split. A labelled divider reads its label as ordinary text.
* The rule is one SVG with no viewBox, so a dither cell is always a whole number of CSS pixels and every step of the fade lines up with its neighbours.
* It has no motion.