Install Tabs

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

$npm install beste-ui

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

Import & use
import { Terminal4 } from "@/components/beste/piece/terminal4";

<Terminal4
  packageName="beste-ui"
/>

More Terminal pieces

View all Terminal
pnpm dlx shadcn@latest add button

Copy Command

terminal2

CLI code line with a chevron prefix and a copy button that flips to a check.

Installing dependencies72%

Progress Bar

terminal5

Monospace install line with a segmented progress meter and percentage.

$npx beste-ui@latest init

Terminal Prompt

terminal1

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

Compiling modules
Bundling assets
Optimizing output
Publishing build

Build Steps

terminal6

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

➜beste-uigit:(main)✗

Git Prompt

terminal8

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

components/Button.tsx
function Button({ label }) {
return <button>{label}</button>;
return <button className="btn">{label}</button>;
}

Diff Block

terminal9

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