Progress Bar

Monospace install line with a segmented progress meter and percentage.

Installing dependencies72%

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Terminal5 } from "@/components/beste/piece/terminal5";

<Terminal5
  label="Installing dependencies"
  percent={72}
  segments={12}
/>

More Terminal pieces

Compiling modules

Bundling assets

Optimizing output

Publishing build

terminal6

Stacked task list with done, running, and pending status markers.

$npx beste-ui@latest init

terminal1

Dark shell line with an emerald prompt, command text, and a blinking block cursor.

➜beste-uigit:(main)✗

terminal8

Shell prompt with a git branch segment and a clean or dirty status marker.

$npm install beste-ui

terminal4

Package manager tabs that swap the install command, with a copy button.

renders the label

fires onClick

respects disabled state

2 passed1 failed1.24s

terminal12

Test run output with pass and fail markers and a totals bar.

components/Button.tsx

function Button({ label }) {

return <button>{label}</button>;

return <button className="btn">{label}</button>;

}

terminal9

Unified diff with added and removed lines tinted green and red.