Row of color circles with a check on the active swatch and a trailing eyedropper for custom values.
The import and the props worth knowing about, in one place.
import { Toolbar6 } from "@/components/beste/piece/toolbar6";
<Toolbar6
swatches={[
{
"color": "#0f172a",
"label": "Slate"
},
{
"color": "#f59e0b",
"label": "Amber"
},
{
"color": "#10b981",
"label": "Emerald"
},
{
"color": "#0ea5e9",
"label": "Sky"
}
]}
active="#10b981"
bordered={false}
/>