Color Swatches

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

Violet · #6D5EFA

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Form26 } from "@/components/beste/piece/form26";

<Form26
  label="Accent color"
  swatches={[
    {
      "tone": "violet",
      "name": "Violet",
      "hex": "#6D5EFA"
    },
    {
      "tone": "sky",
      "name": "Sky",
      "hex": "#0EA5E9"
    },
    {
      "tone": "emerald",
      "name": "Emerald",
      "hex": "#10B981"
    },
    {
      "tone": "amber",
      "name": "Amber",
      "hex": "#F59E0B"
    },
    {
      "tone": "rose",
      "name": "Rose",
      "hex": "#EF4444"
    },
    {
      "tone": "slate",
      "name": "Slate",
      "hex": "#111827"
    }
  ]}
  selectedIndex={0}
/>

More Form pieces

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

Radio Group

form23

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

DesignPolishGood first issueAdd label

Multi Select

form16

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

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

Contact Picker

form29

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

Mira
Beste

Input Row

form8

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

Segmented Control

form24

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

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

Combobox

form18

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