# ASCII Divider

> Horizontal rules in box-drawing and pattern glyphs, with an optional label.

Category: Interface. Docs: https://asciicn.sumak.dev/docs/ascii-divider

## Installation

```bash
npx shadcn@latest add @asciicn/ascii-divider
```

Needs the `@asciicn` registry in components.json: `"registries": { "@asciicn": "https://asciicn.sumak.dev/r/{name}.json" }`.

## Usage

```tsx
import { AsciiDivider } from "@/components/ascii/ascii-divider"

<AsciiDivider className="text-muted-foreground" />
<AsciiDivider label="settings" align="start" />
```

## Examples

### Every pattern

Single glyphs and repeating pairs. Multi-character patterns meet a centred label whole on both sides.

```tsx
{Object.keys(dividers).map((v) => (
  <AsciiDivider key={v} variant={v} label={v} />
))}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"single" | "double" | "heavy" | "dashed" | "dotted" | "ascii" | "wave" | "tilde" | "dots" | "beads" | "chevron" | "zigzag" | "overline"` | `"single"` | Named glyph pattern. |
| `glyphs` | `string` |  | Your own repeating pattern, e.g. `·:·`. Overrides `variant`. |
| `label` | `ReactNode` |  | Set into the rule. |
| `align` | `"start" | "center" | "end"` | `"center"` | Where the label sits. |

## Notes

- **Accessibility.** `role="separator"`. A string label becomes its `aria-label`; for any other label pass one yourself. Glyphs are `aria-hidden`.
- **Layout.** Glyphs repeat past the edge under `overflow: hidden` instead of measuring text, so the rule fills any width and reflows for free.
- **Theming.** Takes the CSS `color`. Put `text-muted-foreground` on the divider and a stronger colour on a ReactNode label.
- **Dependencies.** None. Plain text in a `<div>`, safe in Server Components.