Reference for the character-grid components used on this site. Every example on this page is the real component, live.
A rectangular terminal box whose frame is drawn from single glyphs on a monospace grid. It measures its own font with a hidden probe span, so every edge lands on a whole character cell.
chars — border preset: ascii | light | heavy | double | round | dotted, or any custom 8-char string.label / footer — text carved into the top or bottom border line.labelAlign — left (default) | center | right.cols / rows — fixed grid size; measured from content when omitted.padX / padY — inner padding in cells / rows. Defaults: 1 and 0.fill / fillY — stretch width / height to the parent instead of hugging content.frameColor, labelColor, frameOpacity — color overrides for the frame glyphs.reveal — scramble-reveal animation. See REVEAL below.onLayout — callback with the settled geometry (cols, rows, cell size).Copy trick: select a whole box and copy it — you get clean plain text with the frame redrawn around the content, not DOM noise. A ref also exposes toText() for the same output.
A horizontal divider that spans the content column and joins the side rails with tee characters. Place it between children of an AsciiBox:
<AsciiBox label="example"> <p>top section</p> <AsciiBox.Rule /> <p>bottom section</p> </AsciiBox>
A horizontal bar of glyph cells spanning a date range. Each entry's width is proportional to its real duration, snapped to whole cells. Segments are buttons: hover previews, click selects, arrows cycle.
entries — TimelineEntry[]: id, title, subtitle, start, end ('present' allowed), optional image.start — range start date. Default 2009-01-01.cols — fixed cell count; ignored when fill is set.glyph / gapGlyph — cell characters. Default ▎ for both.spaced — put a space between cells.initialIndex — which entry is selected first. Defaults to the most recent.reveal — scramble-reveal, decodes left to right.Nested inside an AsciiBox it borrows the box's measured cell width, so the bar and the frame always share one grid.
A button with four accent-colored + glyphs pinned to its corners. On hover the fill flips to accent and the corners turn white. Each corner occasionally glitches through random glyphs.
compact tightens padding (24px tall vs 40px). All other props pass through to the underlying button element.
A Radix tooltip styled to match: mono type, dashed border, popover fill, no rounding. Hover the buttons to see it.
TooltipContent accepts all Radix props: side, align, sideOffset. Wrap interactive triggers with asChild.
A compact one-row text field: a real input inside a 1px rectangular border on --border, exactly 1lh (24px) tall. All inner spacing is in whole character cells.
label / footer — small muted captions above / below the field, outside the control.prompt — glyph printed before the input (e.g. > or $), tints accent on focus.aria-invalid tints it destructive; disabled dashes and dims it.Frame characters decode through random terminal glyphs. The animation runs on one shared requestAnimationFrame loop for the whole page, so many boxes at once stay cheap. Honors prefers-reduced-motion by rendering instantly.
trigger — 'mount' (default) animates on hydration; 'inView' waits until scrolled into view.stagger — ms added per diagonal step (row + col). Default 20.speed — ms between glyph swaps per cell. Default 45.cycles — [min, max] random swaps before a cell settles. Default [3, 8].charset — override the glyph alphabet. Default: █▓▒░/\|<>+-*_=~·∙◦#$@%&"Usage: <AsciiBox reveal /> for defaults, or <AsciiBox reveal={{ trigger: 'inView', stagger: 30 }} />