ASCII headingPro
Figlet style lettering from text in three compact block fonts, with the real heading underneath for screen readers and search, falling back gracefully when space runs out.
On this page
ProBlock, shadow and compact lettering with the real heading underneath for screen readers.
Installation
Usage
import { AsciiHeading } from "@/components/ui/chatcn/pro/ascii-heading"
<AsciiHeading as="h1" font="block">Agent run</AsciiHeading>The fonts ship as bitmaps in the file: capitals, digits and common punctuation. block draws each pixel as two full blocks so pixels come out square, shadow adds a light offset, and compact packs a 3 x 5 font into half blocks, three lines tall. The block characters line up when the mono font includes the Block Elements range, as the geist package does.
Examples
Responsive
ProThe same heading at three widths: block, then compact, then plain text.
Props
| Prop | Type | Notes |
|---|---|---|
children | string | The heading text |
as | "h1" to "h6" | Default h2 |
font | "block" | "shadow" | "compact" | Default block |
cellSize | number | CSS px per character. Default 10 |
fallback | "compact" | "text" | What to try when the art is too wide |
textClassName | string | Style for the plain heading fallback |
renderAsciiHeading(text, font) returns the lines, for terminals and logs.
Accessibility
- A real heading element with the text inside; the art is
aria-hidden. - Too narrow for any font, it becomes a normal heading instead of overflowing.
- Under forced colors the plain text shows.
Motion
- None.