A collection of beautifully designed, accessible, and customizable terminal UI components. Built on Ink. Works with shadcn/ui.

How do I publish components with termcn?

Add or edit components under registry/bases/ink/ or registry/bases/opentui/, register them in registry.json, run pnpm registry:build (which refreshes public/r/), then deploy. Consumers install with npx shadcn@latest add against your published registry URL.

Is termcn open source?

Yes. The source is on GitHub and released under the MIT License.

Progress Bar

Determinate progress bar with percent and value/total display

Terminal

Installation


$ pnpm dlx shadcn@latest add @termcn/progress-bar

Usage

import { ProgressBar } from "@/components/ui/progress-bar";

<ProgressBar value={42} total={100} label="Uploading" />

Examples

Custom Characters and Color

Terminal

import { ProgressBar } from "@/components/ui/progress-bar";

export function ProgressBarCustom() {
  return <ProgressBar value={80} fillChar="=" emptyChar="-" color="#22c55e" />;
}

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`	-

Multi Progress Progress Circle

On This Page

Installation Usage Examples Custom Characters and Color API Reference ProgressBar

Edit this page Follow @shadcnlabs Join community