# ASCII Box

> Box-drawing frames that stretch to any content.

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

## Installation

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

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

## Usage

```tsx
import { AsciiBox } from "@/components/ascii/ascii-box"

<AsciiBox title="status" variant="round">
  All systems normal.
</AsciiBox>
```

## Examples

### Every border

Five glyph sets, from Unicode box drawing down to plain `+-|` for places without it.

```tsx
{(["single", "double", "round", "heavy", "ascii"] as const).map((v) => (
  <AsciiBox key={v} variant={v} title={v}>…</AsciiBox>
))}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"single" | "double" | "round" | "heavy" | "ascii"` | `"single"` | Border glyph set. |
| `title` | `ReactNode` |  | Set into the top edge. |

## Notes

- **Layout.** Edges repeat with CSS instead of measuring text, so the frame stretches to any content and the corners stay on the character grid.
- **Theming.** The border takes the box's `color`; children keep their own. Put `text-muted-foreground` on the box and `text-foreground` inside.
- **Accessibility.** Border glyphs are `aria-hidden`. Only the title and children are read.