docs / layout / ascii border
Ascii Border
ASCII box with thick dashes (stroke-width 3, oklch(0.3853 0.01 286.03)) and optional + corners. Built on .ascii-border + .ascii-plus in src/styles/app.css.
Flush — x1=0 (no extra left gap)
Uses ascii-border-flush + ascii-plus. Top/bottom start at 0.
Default — x1=4 (extra left gap before first dash)
Top/bottom 2 6 dashes, sides 10 14. Corners use ascii-plus with #000 behind +.
Flush without corners
flush + withCorners={false}
Flush grid
Default border only
ascii-dashed (now thick oklch)
ascii-dashed-bottom
ascii-dashed-left
import { AsciiBorder } from "@/components/ui/ascii-border"
<AsciiBorder flush>
Flush — x1=0, no extra left gap
</AsciiBorder>
<AsciiBorder>
Default — x1=4 extra gap before first dash
</AsciiBorder>
<AsciiBorder flush withCorners={false}>
Flush without corners
</AsciiBorder>
// Utilities directly
<div className="ascii-border-flush p-6">flush border</div>
<div className="ascii-border-flush ascii-plus p-6">flush + corners</div>
<div className="ascii-border p-6">default border</div>
<div className="ascii-border ascii-plus p-6">default + corners</div>