Size Picker

Row of square size chips. The active size inverts to foreground.

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

Import & use
import { Toolbar14 } from "@/components/beste/piece/toolbar14";

<Toolbar14
  sizes={[
    "XS",
    "S",
    "M",
    "L",
    "XL"
  ]}
  active="M"
/>

More Toolbar pieces

View all Toolbar

Nine-cell anchor picker. The active anchor dot fills primary.

View Mode

toolbar11

Segmented view switcher with grid, rows, and list options shown as icon plus label chips.

Filter Pills

toolbar16

Row of filter chips with optional count numbers. Active chip inverts to foreground.

Sort

Sort Controls

toolbar12

Sort label followed by field chips and an ascending or descending arrow on the right.

Canvas toolbar with select, move, hand, zoom, and crop. Active tool fills muted.

125%

Segmented zoom control with minus, a monospace percentage readout, and plus.