progress

progress bars with unicode block characters

installation

npx shadcn@latest add https://asciicn.fldr.zip/r/progress.json

usage

import { Progress } from "@/registry/ascii/progress";

<Progress value={60} max={100} />
<Progress value={45} showValue />
<Progress value={75} variant="gradient" animated />

examples

design details

progress uses unicode block characters to visualize completion:

• ▸default: solid █ blocks for filled, ░ for empty
• ▸gradient: progressive shading ░ ▒ ▓ █
• ▸striped: alternating ▓ █ pattern
• ▸40 blocks total for smooth incremental display
• ▸tabular-nums for aligned percentage display

character set

props