Interactive Color Panel
A floating toolkit panel for drawing apps or design tools.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/color-panelProps
| Prop | Type | Default | Description |
|---|---|---|---|
tool | string | "pencil" | The active tool. The panel hides for "image", "select" and "pan", shows the size only for "eraser", and adds fill options for "rectangle" and "circle". |
brushSize | number | 5 | Stroke (or eraser) width in px, from 1 to 50. |
onBrushSizeChange | (size: number) => void | - | Called with the new width while the slider moves. |
color | string | "#000000" | Selected stroke colour as a hex value. The swatches are #000000, #ffffff, #ef4444, #f97316, #eab308, #22c55e, #3b82f6 and #a855f7. |
onColorChange | (color: string) => void | - | Called with the hex value of the clicked stroke swatch. |
fill | boolean | false | Whether shapes are filled (rectangle and circle only). |
onFillChange | (fill: boolean) => void | - | Called when the fill switch is toggled. |
fillColor | string | "#ffffff" | Selected fill colour as a hex value, from the same swatches. |
onFillColorChange | (color: string) => void | - | Called with the hex value of the clicked fill swatch. |
className | string | - | Extra classes for the floating panel. |
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other attributes (id, style, aria-*, etc.), passed to the floating panel. |