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.

Lunch · Grilled chicken bowl620 kcal · 124 g total
Carbs68 g
Protein34 g
Fat22 g

Meal Macros

Meal log pairing kcal with a three-segment macro bar for carbs, protein, and fat grams.

98%
SpO₂Normal rangePulse 68 bpmMeasured just now

SpO2 Reading

Oxygen saturation ring with the percentage stacked in the center and a pulse note on the side.

Sleep7h 41m
Score 86
Awake0h 18m
Light4h 0m
Deep1h 35m
REM1h 48m

Sleep Summary

Overnight sleep card with a score pill, stacked stage bar, and a four-column stage breakdown.

Water1250 / 2000 ml
5 / 8

Water Tracker

Eight-cup water grid that fills sky-tinted glasses as you log ml toward a daily hydration goal.

Move420 / 600 kcal
Exercise32 / 45 min
Stand10 / 12 hr

Activity Rings

Three concentric progress rings for move, exercise, and stand goals with a color-keyed legend.

Stepsof 10,000
8,42084%
6.4 km310 kcal

Steps Tracker

Daily steps card with a gradient progress bar, percent chip, and a distance and calorie footer.

Back squat5 × 5 · 80 kg
1:30
Set 4 of 5 · Keep going

Workout Set

Lift tracker with an exercise header, set progress bar segments, and a rest-timer chip on the right.

Blood pressure
Normal
118/76mmHg
Measured at 08:42

Blood Pressure

BP reading pairing systolic over diastolic with a status pill and a color-dotted legend beneath.

Heart rate
72bpm
Resting · Normal2 min ago

Heart Rate

Resting bpm card with a pulsing heart tile, large value, and a mini ECG trace underneath.

Consent Row

Legal consent card with a custom checkbox, inline underlined policy links, and a red asterisk when required.

sk_••••••••••••••••••••••••••••0000

Copyable Field

Read-only value with an optional mask toggle and a copy button that flips to an emerald Copied state on click.

Mira & Co.

Inline Edit

Click-to-edit field that toggles between a plain value with a hover pencil and an input flanked by save and cancel buttons.

16
1224

Stepped Slider

Font-size slider with discrete tick dots under the rail and a mono value chip in the header.

Start typing to search
Beste Sözen
Beste SözenDesign lead
Mirko Petrov
Mirko PetrovEngineer
Noor Ahmed
Noor AhmedProduct

Contact Picker

Searchable people picker with a focused search input above a list that tints the selected row.

Saved
Beste Sözen
Auto-saves as you type.Saved just now

Autosave Field

Inline field with an autosave status pill that shifts between saved, saving, and unsaved dot colors.

USD · US Dollar

Native Select

Open-state select showing the focused control and the flyout list with one option muted as chosen.

Violet · #6D5EFA

Color Swatches

Row of round color swatches where the selected one picks up an outer contrast ring.

Friendly
FormalNeutralFriendlyPlayful

Tick Slider

Labeled-tick slider with a primary fill, a value pill in the header, and the active tick bolded.

Segmented Control

Pill-grouped segmented control with inset muted track and a raised card under the active choice.

Delivery speed
Standard3–5 business days · Free
ExpressNext business day · $8
Same-dayOrder by noon · $14

Radio Group

Radio-card list where the selected row picks up a primary ring and a tinted background.

Notifications

Checkbox Group

Legend-headed list of notification toggles with filled primary checks and muted helper lines.

Two-factor authenticationRequire a verification code at sign-in.

Toggle Switch

Setting row with label, supporting copy, and a sliding switch that turns emerald when on.

Assign to
Filter people…
Beste Sözen
Beste Sözen
Andrea Kim
Andrea Kim
Noor Ahmed
Noor Ahmed
Jules Park
Jules Park

Assignee Picker

Popover with a header label, filter bar, and a selectable person list that checks chosen rows.

532 000 12 34
We'll text a login code if you enable 2FA.

Phone Input

Phone field with a flag and dial-code chooser on the left, then the national number in mono.

Markdown version