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-panelOther Examples
Preset Configuration
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Optional CSS classes to apply. |
tool | string | "brush" | The active tool |
fill | boolean | false | Whether to fill the shape |
onFillChange | (fill: boolean) => void | - | Callback for fill change |
brushSize | number | 5 | The brush size |
onBrushSizeChange | (size: number) => void | - | Callback for brush size change |
color | string | "#000000" | The stroke color |
onColorChange | (color: string) => void | - | Callback for stroke color change |
fillColor | string | "transparent" | The fill color |
onFillColorChange | (color: string) => void | - | Callback for fill color change |
...props | React.HTMLAttributes<HTMLDivElement> | - | Accepts all standard HTML attributes (id, style, etc). |