Utility
Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/progress-bar
Usage
import { ProgressBar } from "@/components/ui/progress-bar";<ProgressBar value={42} total={100} label="Uploading" />Examples
Custom Characters and Color
Terminal
API Reference
ProgressBar
| Prop | Type | Default |
|---|---|---|
value | number | required |
total | number | - |
width | number | 30 |
showPercent | boolean | true |
showEta | boolean | false |
fillChar | string | "█" |
emptyChar | string | "░" |
color | string | - |
label | string | - |
Notes
Accessibility
termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.
- Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.