/
1.1k
Sponsor

Progress Bar

Determinate progress bar with percent and value/total display

Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/opentui/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

PropTypeDefault
valuenumberrequired
totalnumber-
widthnumber30
showPercentbooleantrue
showEtabooleanfalse
fillCharstring"█"
emptyCharstring"░"
colorstring-
labelstring-