Pieces

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.

193–216 of 902

Payment request

$48.60

Dinner split · Packer's Coffee

Payment Request

chat30

Money request bubble with a direction arrow, large amount, optional italic note, and Pay / Decline actions.

Ayşe KayaDesigner09:42

Pushed a new pass on the empty states — peek when you have a sec 🎨

Group Message

chat31

Avatar plus inline author, optional role chip, timestamp, and the message body beneath.

Let's move the sync to 3pm instead.

Not delivered

Failed Message

chat32

Struck-through outgoing bubble with a rose alert dot, Not delivered label, and retry / delete actions.

const greeting = "Hello, Beste!";ts

Code Line

code1

One-line code snippet with a monospace pill and a tiny language tag on the right.

greet.ts

1export function greet(name: string) {
2  return `Hello, ${name}!`;
3}
4 
5console.log(greet("Beste"));

Code Snippet Card

code2

Dark editor card with three traffic-light dots, a filename tab, and line-numbered code.

bun add @beste/ui

Shell Command

code3

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

function greet(name) {

return 'Hi ' + name;

return `Hello, ${name}!`;

}

Diff Snippet

code4

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

const user = await fetchUser("42");

Tokenized Line

code5

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

import{useState, useEffect}from"react";

import{Button}from"@/ui/button";

import{cn}from"@/lib/utils";

Import Block

code6

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

{

"name":"Beste",

"version":"1.0.0",

"active":true,

"count":42,

"owner":null

}

JSON Snippet

code7

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

Open command palette

⌘K

Keyboard Shortcut

code8

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

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

code9

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

SELECT id, name, email

FROM users

WHERE active = true

ORDER BY created_at DESC

LIMIT 10;

SQL Query

code10

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

curl-XPOSThttps://api.beste.co/v1/users

-H"Authorization: Bearer sk_live_..."

-H"Content-Type: application/json"

-d'{"name": "Ada Lovelace"}'

cURL Command

code11

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

# Database

DATABASE_URL=postgres://localhost/beste

REDIS_URL=redis://localhost:6379

# API

API_KEY=sk_live_4242

PORT=3000

Env File

code12

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

New

Air Max 90 Essential

$1294.7(284)

Product Tile

commerce1

Catalog tile with a square product photo, a corner New tag, a heart save button, and a name, price, and star rating footer.

ColorTan

Variant Swatches

commerce2

Color picker row with circular palette swatches, a ringed check on the selected color, and a diagonal line over sold-out options.

Size

Size Picker

commerce3

Six-slot size grid with a tone-filled selected cell and a diagonal line over sold-out sizes, plus an optional size guide link.

Only 3 left in stock

18 watching

Stock Alert

commerce4

Urgency row with a pulsing dot that flips emerald, amber, or rose by remaining stock, a watchers count, and a thin stock bar.

Cashmere Crewneck

$189$260−27%

Sale ends in 2d 4h

Price Stack

commerce5

Pricing card with the sale price in rose, the original price struck through, a percent-off badge, and a countdown to sale end.

Nomad Diver WatchBlack · Steel band

$420

Add to Cart

commerce6

Mini cart-line card with product photo, name, variant, price, a minus/plus quantity stepper, and a tone-filled Add to cart button.

Frequently bought together

$129

$48

$38

$215Save $20

Bundle Picker

commerce7

Frequently-bought-together row with product thumbnails joined by plus icons, a bundle total with a Save emerald chip, and a tone Add-items CTA.

Add $27 more for free shipping.

$48$75 goal

Free Shipping Bar

commerce8

Shipping threshold card with a truck icon, an amount-to-go message that flips emerald on qualifying, and a tone progress fill toward the goal.

Order confirmed#SO-8241

$284.00

Arrives Apr 26 – Apr 28

Receipt sent to hello@beste.co

Order Confirmation

commerce9

Post-purchase card with an emerald check, order id, total price, a package-arrival line, and the receipt email destination.