GretTech
Back to Components

Interactive Color Panel

ide

A floating toolkit panel for drawing apps or design tools.

Props

PropTypeDefaultDescription
tool
string"brush"The active tool
fill
booleanfalseWhether to fill the shape
onFillChange
(fill: boolean) => void-Callback for fill change
brushSize
number5The 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

Usage Examples

Preset Configuration

import InteractiveColorPanel from "@/showcase/color-panel";
export default function PresetExample() {
  return (
    <div className="flex justify-center p-8 bg-muted/20 rounded-xl border w-full">
      <InteractiveColorPanel 
        tool="rect"
        fill={true}
        brushSize={12}
        color="#ff0000"
        fillColor="#0000ff"
      />
    </div>
  );
}

Key Features

  • Draggable interface
  • Interactive sliders and switches
  • Preset color swatches