Pixel fontPro

Text in a 5 x 7 LCD face or a bold 8 x 8 screen face for labels, badges and screens, drawn as one SVG path with a real text layer you can select and copy.

Markdown

On this page

ProA render node's status screen in the 8 x 8 face on round dots, status badges, and a title that selects and copies as text.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/pixel-font

Usage

tsx

import { PixelFont } from "@/components/ui/chatcn/pro/pixel-font"

<PixelFont size={1}>BETA</PixelFont>
<PixelFont font="8x8" size={3} dot="round" unlit text={"QUEUE   12\nETA   0:42"} />

Keep size a whole number so dots stay crisp. Digits are always tabular, so a live counter never shifts; proportional narrows only punctuation and spaces. Characters outside printable ASCII draw as a hollow box, so a missing glyph is visible, not silent.

Examples

Faces and states

ProBoth faces in full, square and round dots, an unlit panel, proportional against tabular and a missing glyph.

Props

Prop	Type	Notes
`text`, `children`	`string`	`\n` starts a new line
`font`	`"5x7" \| "8x8"`	Default `5x7`
`size`	`number`	CSS px per dot. Default 2
`dot`	`"square" \| "round"`	Default `square`
`unlit`	`boolean`	Draw the unlit dots, like a panel
`tracking`	`number`	Dots between characters. Default 1, or 2 for 8 x 8
`proportional`	`boolean`	Narrow punctuation and spaces
`uppercase`, `lineGap`		Defaults off and 2

layoutPixelText and pixelGlyph are exported for sizing a screen ahead of time or drawing the faces elsewhere.

Accessibility

Screen readers hear the string whole; the dots are hidden from them.
A transparent text layer sits exactly over the glyphs, so selection, copy and find in page work.
Dots use currentColor, so forced colors and every theme color them. Unlit dots hide under forced colors and strengthen under prefers-contrast: more.

Motion

None. Text changes swap at once.