Primitive · CLI

ASCII Spark

A series compressed to block-element bars (▁▂▃▄▅▆▇█) — zero animation, plain text you can copy. Works inline, even server-rendered.

Preview

npx shadcn@latest add @atroui/ascii-spark

▂▄▃▅▄▆▅▇▅▆█▇

weekly bookings · past 12 weeks

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/ascii-spark

Source lands in your repo. Installation · Registry

Sits inline after a headline or in stat bands. Contrast comes from text-primary; size it with className text-sm/text-lg like any font string.

tsx

import { AsciiSpark } from "@/components/ui/ascii-spark"

<AsciiSpark data={weeks.map((w) => w.signups)} max={40} />

Prop	Type	Default	Description
data	number[]	12-point sample	Series drawn as bar heights.
max	number	series max	Scale ceiling for bar height.
label	string	"first → last over N points"	Accessible one-line summary.
className	string	—	Regular className.

Primitive · CLI

A series compressed to block-element bars (▁▂▃▄▅▆▇█) — zero animation, plain text you can copy. Works inline, even server-rendered.

npx shadcn@latest add @atroui/ascii-spark

▂▄▃▅▄▆▅▇▅▆█▇

weekly bookings · past 12 weeks

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/ascii-spark

Source lands in your repo. Installation · Registry

Sits inline after a headline or in stat bands. Contrast comes from text-primary; size it with className text-sm/text-lg like any font string.

tsx

import { AsciiSpark } from "@/components/ui/ascii-spark"

<AsciiSpark data={weeks.map((w) => w.signups)} max={40} />

import { AsciiSpark } from "@/components/ui/ascii-spark"

<AsciiSpark data={weeks.map((w) => w.signups)} max={40} />

Prop	Type	Default	Description
data	number[]	12-point sample	Series drawn as bar heights.
max	number	series max	Scale ceiling for bar height.
label	string	"first → last over N points"	Accessible one-line summary.
className	string	—	Regular className.