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.

193–216 of 942

AKMÖ

Ayşe and Merve are typing

Multi Typing

chat25

Typing indicator pill showing multiple avatar stack, summary text, and three pulsing dots.

Search Result

chat26

Conversation search row with author and time above a message line where the match is amber-highlighted.

0:09

“Hey, jumping on a call in five. Can you pull up the latest Figma file?”

Voice Transcription

chat27

Voice bubble with waveform and duration on top and a quoted italic transcript below the divider.

Message Actions

chat28

Floating toolbar with react, reply, copy, delete, and overflow actions. Delete tints rose.

Packer's CoffeeKuloğlu, Turnacıbaşı Cd. 29, 34433 Beyoğlu/İstanbul0.4 km away

Location Share

chat29

Chat bubble with a faux-map preview, a pulsing pin, and the place name, address, and distance beneath.

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.