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.

Caps Lock
OnType in uppercase

Caps Lock LED

Toggle key with an inset LED indicator that lights up when the lock is engaged.

Modifier keys
⌘Command
⌥Option
⇧Shift
⌃Control

Modifier Cluster

macOS modifier symbols laid out side by side with their names printed below.

Space
Press to continue

Active Keypress

Lit-up key with a pinging halo behind it and a caption beneath to cue the user.

Navigate

Arrow Cluster

Four-way directional pad with a pressed state that highlights one key at a time.

G
Leader
P
Go to project
Press in sequence

Chord Sequence

Vim-style multi-step combo showing keys separated by arrows with per-step labels.

⌘
Command

Hero Keycap

Large tactile keycap with subtle shadow and a caption reading underneath.

Keyboard shortcuts
Open search
⌘K
New file
⌘N
Toggle sidebar
⌘B
Switch workspace
⌘⇧O

Shortcut Cheatsheet

Titled panel listing several actions with their key combos stacked on the right.

Go to fileJump to any file in the workspace
⌘P

Command Palette Row

Raycast-style action row with leading icon, description, and a trailing shortcut combo.

Quick search
⌘K

Keyboard Shortcut Hint

Raised kbd keys joined with a plus separator. Any combo works.

Ξ
0x4A81…6fA0ENS
Ethereum · Mainnet

Wallet Input

Crypto address field with a gradient Ξ avatar, shortened mono address, and an ENS lookup chip.

INV-2026-00421Auto

Serial Input

ID-style mono input with a leading hash, wide letter spacing, and a muted Auto-generated pill.

/^[a-z]+@beste\.co$/gi42

Regex Input

Regex field with slash delimiters, flag suffix in amber, and an emerald match-count pill on the right.

Can we ping @mira about the #launch-prep agenda?

Mentions & Tags

Message input that highlights @-mentions in sky and #channel tags in violet amid plain body text.

Remind me to buy coffee beans on my way home

Dictation Input

Pill dictation input with a blinking caret, live waveform bars, and a rose mic button while listening.

typescript
12
const answer = 42;return answer * 2;

Code Input

Dark mono code field with a language eyebrow, line-number gutter, and content lines on a foreground canvas.

€120 – €320
€0€500

Dual Range Slider

Two-thumb range slider with a filled band between, a mono low-high readout, and min/max caps.

Cabin upgrade$38 each
2

Quantity Stepper

Line-item card with a label-price stack and a pill stepper that enforces min zero and a max cap.

How was your stay?
4.0
Tap to rate. Optional comment on the next step.

Rating Input

Five-star rater with filled amber stars in muted tiles and a decimal rating chip to the right.

1h45m
HH:MM

Duration Input

Length field with a timer icon, h and m unit-annotated number tiles, and an HH:MM format hint.

Mira violet#6D5EFA

Color Input

Color field pairing a filled swatch with the chosen name and hex code and an eyedropper button.

$420
$0$1000

Budget Slider

Slider with a primary-tinted track, current value badge on the right, and min/max labels on the rail.

passport-scan.pdf842 KB

File Input

File picker with a muted Choose file button on the left and the selected filename and size on the right.

Apr 01
Apr 30
30 days

Date Range

Joined from-arrow-to range input with a muted duration chip capping the right side of the control.

09:30
AMPM

Time Input

Time control with hour and minute tiles separated by a colon, plus a small AM or PM segmented toggle.

Markdown version