Row of color circles with a check on the active swatch and a trailing eyedropper for custom values.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Toolbar6 } from "@/components/beste/piece/toolbar6";
<Toolbar6
swatches={[
{
"color": "#0f172a",
"label": "Slate"
},
{
"color": "#ef4444",
"label": "Rose"
},
{
"color": "#f59e0b",
"label": "Amber"
},
{
"color": "#10b981",
"label": "Emerald"
},
{
"color": "#0ea5e9",
"label": "Sky"
},
{
"color": "#8b5cf6",
"label": "Violet"
}
]}
active="#10b981"
/>Canvas toolbar with select, move, hand, zoom, and crop. Active tool fills muted.
Segmented view switcher with grid, rows, and list options shown as icon plus label chips.
Segmented zoom control with minus, a monospace percentage readout, and plus.
Row of icon buttons for like, comment, share, and save. Active items tint rose.
A floating pill toolbar of round icon actions with one accent-highlighted primary action.
Row of filter chips with optional count numbers. Active chip inverts to foreground.