Pieces(1076)

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.

Practice

Popular
$79/mo
Unlimited members
Automated billing
Priority support

Plan Price Card

A compact plan card with a name, an optional highlight badge, a price with period, and a short list of included features.

Running a calmer front desk

The Sirius Podcast · Ep. 12

12:0431:20

Podcast Player Card

A compact audio player with a play button, an episode title and series line, a waveform progress bar, and elapsed and total times.

Brightwell · Camden

18 Parkway, London NW1

Open · closes 6pm

Location Card

A compact location card with a pin chip, a site name and address, and an open-status line.

System status

SchedulingOperational
Billing syncOperational
Records exportDegraded

Status List Card

A compact status panel listing services, each with a colored dot and an operational state.

Notifications

New bookings
Payment received
Weekly summary

Preferences Toggles

A compact settings card listing labeled rows, each with an accent on/off toggle switch.

Get early access

you@clinic.com
Notify me

No spam, just one launch note.

Email Capture Card

A compact signup card with a title, an email field, an accent submit button, and a small reassurance note.

May12

Consultation · Rowan Blake

09:00 – 09:45 · Room 2

Join

Appointment Card

A single appointment row with a date block, a title and time-and-room line, and an accent join action.

Collected this month

$92.4K+8.6%

vs last month

KPI Sparkline Card

A single metric with a headline value, a signed trend, and an area sparkline of its recent trajectory.

Shared Drive

Northwind_Brand_Guidelines.pdf
Launch_Copy_Deck_v4.docx
Media_Budget_2026.xlsx
Homepage_Wireframes.pdf
Retro_Notes_March.docx

Drive File List

A floating files panel listing document rows, each with a colored file-type chip and a truncating filename.

members.ts
import { Sirius } from '@sirius/sdk'
 
const client = new Sirius(apiKey)
await client.members.create({ name })

SDK Snippet Card

A code card with a filename header and copy affordance over syntax-toned, line-numbered source.

C

Care team

Online

Rowan's intake is ready for review.
Great, I'll approve the plan now.
Thanks, I'll book the first session.

Team Thread Card

A short message thread with a header contact, an online marker, and alternating incoming and outgoing bubbles.

Deployments
Wk 24
128 builds
MonTueWedThu

92% passing

Weekday Peak Bars

A dark analytics card with weekday bars, a highlighted peak column carrying a callout pill above a dashed threshold, and an on-track footnote.

Today

Tue, 12 May
09:00New member intake
11:30Care plan review
14:00Billing sync
16:15Follow-up call

Daily Agenda Card

A day view listing time-stamped agenda rows, each with a colored marker and a truncating title.

app.sirius.care/members
Rowan BlakeActive
Amelia FrostIntake
Noah ReyesDischarged

App Window Frame

A browser window chrome with traffic-light dots and a locked URL bar, framing a short list of member rows with status pills.

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

Test Summary

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

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

REPL

Interactive prompt showing an evaluated expression and its result.

Installing packagesctrl-c to cancel

Loading Line

Single indeterminate line with a spinner and a cancel hint.

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.

➜beste-uigit:(main)✗

Git Prompt

Shell prompt with a git branch segment and a clean or dirty status marker.

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.

Compiling modules
Bundling assets
Optimizing output
Publishing build

Build Steps

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

Installing dependencies72%

Progress Bar

Monospace install line with a segmented progress meter and percentage.

$npm install beste-ui

Install Tabs

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

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.

Markdown version