docs / layout / ascii border
Ascii Border
ASCII box with thick dashes (stroke-width 3, oklch(0.3853 0.01 286.03)) and optional + corners. Use the AsciiBorder component with withCorners prop.
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>