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.

$12,480.00USD

Currency Input

input7

Money field with a leading currency symbol, right-aligned mono amount, and a unit label.

Keyboard shortcut
ShiftK
REC
Press any combination

Shortcut Recorder

input8

Keyboard shortcut field that renders the captured keys as keycap pills with a blinking REC indicator while recording.

design tokens

Search Pill

input9

Pill-shaped search input with a leading magnifier and an inline pill-shaped clear when there is a value.

Thanks for the thorough write-up. Two things came to mind while reading — first, the retry logic feels brittle around rate limits;
Shift + ↵ for new line

Textarea

input10

Multi-line input with a shift-enter hint row and a visible corner grip for resize.

••••••••••••••••

Password Dots

input11

Masked password row rendered as spaced mono bullets paired with an eye reveal button.

acct_7Z91X2Q
Provided by admin. Contact support to change.

Readonly Input

input12

Locked field with a muted fill, padlock icon, and a why-locked helper line underneath.

small, compact, dense

Dense Input

input13

Tight small-size text field for data tables and filter rails, with smaller type and tight padding.

Ready when you are

Hero Input

input14

Oversized text field with large type and a fatter caret, made for hero sections and prompt bars.

2026-04-23

Date Input

input15

Date field with a leading calendar icon, mono ISO value, and a chevron hinting at a popover.

09:30
AMPM

Time Input

input16

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

Apr 01
Apr 30
30 days

Date Range

input17

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

passport-scan.pdf842 KB

File Input

input18

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

$420
$0$1000

Budget Slider

input19

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

Mira violet#6D5EFA

Color Input

input20

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

1h45m
HH:MM

Duration Input

input21

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

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

Rating Input

input22

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

Cabin upgrade$38 each
2

Quantity Stepper

input23

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

120320
0500

Dual Range Slider

input24

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

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

Code Input

input25

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

Remind me to buy coffee beans on my way home

Dictation Input

input26

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

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

Mentions & Tags

input27

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

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

Regex Input

input28

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

INV-2026-00421Auto

Serial Input

input29

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

Ξ
0x4A81…6fA0ENS
Ethereum · Mainnet

Wallet Input

input30

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