Pieces(989)

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.

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

Sports Ticket

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

20% OFFCoffee & Pastries
BREW20Expires Jun 30

Discount Voucher

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

Your NumberA47
3 ahead of youEst. wait ~12 min

Queue Ticket

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

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

Parking Stub

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

BUG-1432In Progress

Login fails on Safari 17 after the OAuth redirect

P1@ada2d

Issue Ticket

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

No.0427
RaffleAnnual Gala RaffleDraw · Jun 14

Raffle Ticket

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

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

Transit Ticket

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

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

Movie Ticket

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

Joe's Coffee
4.7(1.2k)Café
OpenCloses 9:00 PM

Place Rating

Place name with star rating, review count, and category, finished by an open or closed status pill and hours.

Office · 5th Ave
Beste HQ · Brooklyn
4.2 mi12 minby car

Route Card

Vertical origin to destination route with emerald and rose dots joined by a connector, plus distance and duration.

Coordinates
40.7580° N
73.9855° W
Times Square, NY

Coordinates Card

Latitude and longitude in tabular monospace, separated by a dashed line from the resolved place name.

Headquarters
123 Atlantic Avenue
Suite 4B
Brooklyn, NY 11201
United States

Address Card

Plain text address block with an uppercase label, two street lines, city and postal, and a muted country.

Times Square
Manhattan, New York

Map Preview

Compact street-map panel with city blocks, a park, a dotted walking route, and a tone marker pin, captioned by a place name and address line.

# Database
DATABASE_URL=postgres://localhost/beste
REDIS_URL=redis://localhost:6379
# API
API_KEY=sk_test_EXAMPLE_0000
PORT=3000

Env File

Dotenv listing with sky keys, italic muted comments, and grouped sections separated by blank lines.

curl-XPOSThttps://api.beste.co/v1/users
-H"Authorization: Bearer sk_live_..."
-H"Content-Type: application/json"
-d'{"name": "Ada Lovelace"}'

cURL Command

HTTP request rendered as a curl invocation with method, URL, headers, and body across continued lines.

SELECT id, name, email
FROM users
WHERE active = true
ORDER BY created_at DESC
LIMIT 10;

SQL Query

Multi-line SQL with violet keywords, emerald string literals, and amber numerics.

TypeError: Cannot read 'name' of undefined
greet(src/utils.ts:14:12)
handler(src/server.ts:42:8)
processRequest(src/api.ts:88:4)

Stack Trace

Error headline followed by a few stack frames with file paths and amber line and column numbers.

Open command palette
K

Keyboard Shortcut

Action label paired with a row of monospace key caps joined by plus separators.

{
"name":"Beste",
"version":"1.0.0",
"active":true,
"count":42,
"owner":null
}

JSON Snippet

Pretty-printed JSON object with sky keys, emerald strings, and amber numerics.

import{useState, useEffect}from"react";
import{Button}from"@/ui/button";
import{cn}from"@/lib/utils";

Import Block

Stacked import statements with destructured names and module paths in a quiet syntax palette.

const user = await fetchUser("42");

Tokenized Line

Single-line snippet with keywords, strings, and function names colored by semantic token kind.

function greet(name) {
return 'Hi ' + name;
return `Hello, ${name}!`;
}

Diff Snippet

Compact diff card with added, removed, and context lines tinted in emerald and rose.

bun add @beste/ui

Shell Command

Single-line install or run command, prefixed with a dollar sign in monospace.

Website URLs
https://beste.co
Domain verified
Unpublished Changes

You have changes that are not yet published

Publish Panel

Compact deploy card pairing a live URL row, domain verification badge, unpublished-change hint, and a recolorable publish button.