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.

Mira Studio
acm
Beste StudioDesign · 12 members
BesteworksEngineering · 34 members
Beste LabsResearch · 6 members

Combobox

Searchable single-select with a query bar above a filtered list and a check for the active row.

lara@beste.conils@beste.coom@acmeSeparate with commas
om@acme is missing the domain ending.

Email Tokenizer

Bulk invite field that tokenizes addresses into chips and flags invalid ones with a rose tint.

DesignPolishGood first issueAdd label

Multi Select

Picker that keeps chosen options as removable violet pills next to a chevron to open the list.

Looks good, @mir
Beste Sözen
Beste Sözen@mira
Miranda Chase
Miranda Chase@miranda
Mirko Petrov
Mirko Petrov@mirko

Mention Picker

Inline @-mention typed into a field, paired with an avatar-led autocomplete dropdown beneath.

design systemstypographymotionType and press ↵
Up to 8 tags. Use hyphens instead of spaces.

Tag Input

Free-form tagger that wraps committed tokens as removable chips and shows a placeholder slot at the end.

•••••••••••••••••••••Caps

Password Toggle

Masked password input with a caps-lock alert pill and an eye button that flips visibility.

••••••••••••
Strong
Use 12+ characters, mixed case, and a number or symbol.

Password Strength

Password field with a four-segment meter underneath that shifts color and label with strength.

4
7
1
9
We sent it to m•••@beste.co just now.

OTP Input

Six-cell verification code field with an active cell that rings and a caret on the next empty slot.

lara@beste.co
They'll get an email with a link that expires in 72 hours.

Input With Action

Joined input and dark action button sharing a border, typical for invite, subscribe, or apply flows.

Billing addressUsed on invoices and receipts.
221B Riverside Ave
Istanbul
34381

Fieldset Group

Bordered card bundling a legend, description, and a short stack of related inputs.

Mira
Beste

Input Row

Two inputs arranged side by side on a responsive grid for first/last names and paired fields.

Beste v3 ships real-time collaboration, custom themes, and a brand new AI editor. Available to all workspaces starting next Tuesday.
Posted to your workspace feed and email digest.132 / 280

Textarea Counter

Multi-line field with a character counter that turns amber near the limit and rose past it.

mira@beste.co

Floating Label

Focused input with the label shrunk to the top-left corner and a blinking caret after the value.

https://docs.beste.co

Affixed Input

Input that sandwiches a value between a muted prefix and suffix for URLs, currencies, or domains.

Required
Oud Beste
We use this for invoices and tax documents.

Required Field

Labeled input flanked by a red asterisk and a Required pill, plus an explanatory hint below.

mira-studio
mira-studio.beste.co is available.

Success State

Validated field with an emerald ring, check mark, and a confirming note beneath.

mira@acme
Enter a valid email address, including the domain.

Error State

Invalid field with a rose ring, alert icon inside the input, and a descriptive error under it.

Mira & Co.
Shown on invoices and in the team directory.

Labeled Input

Standard text field with a label on top and a muted helper line under the control.

Pairs well withSeared duck breast
Pinot Noir · WillametteRed · 2021
Bright cherry, subtle forest floor.
Bourbon old-fashionedCocktail
Bittersweet, amplifies the glaze.

Drink Pairing

Sommelier pairings panel with a dish header and rose-ruled wine or cocktail suggestion blocks.

Dietary preferences

Dietary Filters

Wrapped diet chip filter where selected options fill with emerald and inactives stay bordered.

Step 4 / 707:42
Simmer the sauce

Keep at a gentle simmer, stirring every two minutes so the garlic doesn't scorch.

Cook Step Timer

Recipe-step card with a step pill, mono MM:SS countdown, instruction paragraph, and rose progress bar.

Lemon-thyme chicken
45 min480 kcal4 servings
4chicken thighs
2lemons, zest and juice
3 tbspolive oil
4 sprigsfresh thyme

Recipe Card

Recipe tile with a warm chef tile, time/kcal/servings row, and a two-column ingredients list.

Grilled chicken bowl620 kcal
Carbs68 g
Protein42 g
Fat22 g

Macro Breakdown

Dish nutrition card with a kcal line, stacked macro bar, and three color-keyed grams-per-macro tiles.

Lokal · Modern Türk
2× Meze plate₺320
1× Roasted miso salmon₺240
1× Pistachio baklava₺110
Subtotal₺670
Delivery₺35
Tip₺50
Total₺755

Order Receipt

Itemized food order receipt with qty-by-name lines, a subtotal/delivery/tip breakdown, and bold total.

Markdown version