Primitive · CLI
ASCII Bar
A progress readout in pseudo-graphics (▰▱) that fills in discrete plottable steps — percentage tweens with the fill, reduced motion jumps straight to target.
Preview
npx shadcn@latest add @atroui/ascii-barInstallation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/ascii-barSource lands in your repo. Installation · Registry
Usage
Good inside tables and status cards where a design-system progress bar would read too polished. Keep cols ≤ 40 so the bar stays readable at small sizes.
tsx
import { AsciiBar } from "@/components/ui/ascii-bar"
<AsciiBar value={quotaPct} label="Storage used" cols={18} />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 68 | 0–100. |
| cols | number | 24 | Bar width in ▰▱ cells. |
| showPercent | boolean | true | Append a percent readout after the bar. |
| label | string | "Progress" | Accessible name; aria-valuenow tracks value. |
| className | string | — | Regular className. |
Bar