Loading Line

Installing packagesctrl-c to cancel
About this piece

Loading Line

Single indeterminate line with a spinner and a cancel hint.

Usage

The import and the props worth knowing about, in one place.

import { Terminal10 } from "@/components/beste/piece/terminal10";

<Terminal10
  label="Installing packages"
  hint="ctrl-c to cancel"
/>

More Terminal pieces

View all Terminal
$npx beste-ui@latest init

Terminal Prompt

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

pnpm dlx shadcn@latest add button

Copy Command

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

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

Diff Block

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

Command Run

Dark terminal that types a command after the prompt, prints its output line by line up to a green success line behind a blinking block cursor, then clears and runs again.

12:04:01OKServer ready on port 3000
12:04:03INFOCompiled /dashboard in 240ms
12:04:06WARNSlow query took 412ms
12:04:09ERRFailed to reach cache

Log Stream

Timestamped log lines tagged by level in info, warn, error, and ok colors.

deploy
$beste deploy --prod
Building application…Uploading assets…Deployed in 4.2s

Output Window

Window-chrome shell showing a command and its output ending in a success line.