For the complete documentation index, see 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.
asciicn
GitHub

Divider

PreviousNext

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

Controls
Variant
Label
Show label
Colour

Installation

pnpm dlx shadcn@latest add https://asciicn.dev/r/divider.json

Usage

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

Every variant

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

Labelled

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

Vertical

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

Props

PropTypeDefault
variant

The glyph or pattern the rule is drawn with.

Type: "light" | "heavy" | "double" | "dashed" | "ascii" | "dots" | "beads" | "diamonds"Default "light"
orientation

Across the container, or down the height of a flex row.

Type: "horizontal" | "vertical"Default "horizontal"
label

Text set into the rule. A string label is also the accessible name.

Type: ReactNodeDefault –
align

Where the label sits along the rule.

Type: "start" | "center" | "end"Default "center"
ornament

A glyph set into the middle when there is no label.

Type: stringDefault –
color

Glyph colour, a palette name or any CSS colour.

Type: AsciiColorDefault "grey"
cell

Glyph cell height in CSS pixels.

Type: numberDefault --ascii-cell

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.