Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/divider.jsonUsage
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
With a label
Pass label and the rule splits around it, each half fading away from the text.
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.
Props
| Prop | Type | Default |
|---|---|---|
| orientation Which way the rule runs. | Type: "horizontal" | "vertical" | Default "horizontal" |
| label Text in the middle of the rule. Horizontal only. | Type: ReactNode | Default – |
| thickness Thickness in cells. | Type: number | Default 1 |
| fade Share of each half that fades out, from 0 to 1. | Type: number | Default 0.6 |
| strength Densest dither level, in the middle of the rule. | Type: number | Default 0.6 |
| color Rule colour: a palette name such as "blue", a CSS variable name, or any CSS colour. | Type: DitherColor | Default "ink" |
| fill Texture of the rule. Gradient fades through dither levels; the others keep their texture and fade by opacity. | Type: "gradient" | "dotted" | "hatched" | "solid" | Default "gradient" |
| matrix The threshold pattern for the gradient fill. | Type: "bayer2" | "bayer4" | "bayer8" | "blue-noise" | Default "bayer4" |
| cell Size of one dither cell in CSS pixels. | Type: number | Default 2 |
| decorative Unlabelled rules only. false gives the rule role="separator" for assistive technology. | Type: boolean | Default true |
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.