Pieces942

Compact, self-contained widgets that behave like assets. Drop them into any block, card, or page to add a small touch of polish without rewriting the surrounding UI.

1M+Active developersUsing Beste across 140 countries

Milestone

stats11

Gradient hero card with a huge headline number, uppercase label, and a short context caption.

48.2K
3.1K
284
612

Engagement Row

stats12

Pill row grouping views, likes, comments, and shares with lucide icons and tabular counts.

83Positive

Gauge Meter

stats13

Half-circle dial with a tachometer-style needle that sweeps back and forth. Fits sentiment, health, or velocity snapshots.

$npx beste-ui@latest init

Terminal Prompt

terminal1

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

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.

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

Output Window

terminal3

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

$npm install beste-ui

Install Tabs

terminal4

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

Installing dependencies72%

Progress Bar

terminal5

Monospace install line with a segmented progress meter and percentage.

Compiling modules
Bundling assets
Optimizing output
Publishing build

Build Steps

terminal6

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

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

terminal7

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

➜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.

Installing packagesctrl-c to cancel

Loading Line

terminal10

Single indeterminate line with a spinner and a cancel hint.

>[1, 2, 3].map((n) => n * 2)
[ 2, 4, 6 ]
>

REPL

terminal11

Interactive prompt showing an evaluated expression and its result.

renders the label
fires onClick
respects disabled state
2 passed1 failed1.24s

Test Summary

terminal12

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

Fri, Jun 14Midnight Synth Tour
8:00 PMRow C · Seat 12
AdmitONE

Event Ticket

ticket1

Ticket with event name, date, time, and seat on the main stub, and a dashed tear-off Admit One side.

Now ShowingDune: Part TwoHall 4 · Row J · Seat 12
Fri Jun 14 · 9:30 PMIMAX

Movie Ticket

ticket2

Cinema stub with title and seat on top, then a dashed split into a date row and a screen format pill.

09:42
Berlin Hbf
13:05
München Hbf
ICE 624Platform 7

Transit Ticket

ticket3

Train or bus stub with departure and arrival stations bridged by an arrow, plus service and platform.

No.0427
RaffleAnnual Gala RaffleDraw · Jun 14

Raffle Ticket

ticket4

Numbered stub on the left with a tabular-nums draw number, paired with the raffle title and draw date.

BUG-1432In Progress

Login fails on Safari 17 after the OAuth redirect

P1@ada2d

Issue Ticket

ticket5

Tracker-style card with issue ID, status pill, two-line title, and a footer of priority, assignee, and age.

ParkingP-2891
ABC 1234
Jun 14 · 14:32Level 2 · Spot B-08

Parking Stub

ticket6

Garage receipt with a Parking header, monospace plate, entry timestamp, and level and spot footer.

Your NumberA47
3 ahead of youEst. wait ~12 min

Queue Ticket

ticket7

Take-a-number stub with an oversized tabular call number and a footer of people ahead and estimated wait.

20% OFFCoffee & Pastries
BREW20Expires Jun 30

Discount Voucher

ticket8

Inverted promo header with the discount headline, then a redeem code and expiry date below the perforation.

NBA · Game 5
LakersWarriors
Sec 112 · Row 8 · Seat 14
Gate 37:30 PM

Sports Ticket

ticket9

League header above a home and away matchup, with a stadium footer of section, row, seat, gate, and tip-off.