sigpro-ui/docs/components/colorpicker.md

Colorpicker

Color picker component with preset color palette, reactive value binding, and customizable appearance.

Tag

Colorpicker

Props

Prop	Type	Default	Description
label	string	-	Label text for the button
value	string | Signal<string>	'#000000'	Selected color value (hex format)
class	string	''	Additional CSS classes (Tailwind + custom styling)

Styling

Colorpicker is a custom component built with Tailwind CSS. The button supports standard daisyUI Button classes for consistent styling:

Category	Keywords	Description
Size	btn-xs, btn-sm, btn-md, btn-lg	Button scale
Style	btn-outline, btn-soft, btn-ghost	Visual style variants

For further details, check the daisyUI Button Documentation – The color picker button accepts standard button styling classes.

Live Examples

Basic Colorpicker

Live Demo

const BasicDemo = () => {
  const color = $('#3b82f6');
  
  return Colorpicker({
    label: 'Pick a color',
    value: color
  });
};
Mount(BasicDemo, '#demo-basic');

With Reactive Preview

Live Demo

const PreviewDemo = () => {
  const color = $('#10b981');
  
  return Div({ class: 'flex flex-col gap-4 w-full' }, [
    Colorpicker({
      label: 'Choose color',
      value: color
    }),
    Div({ 
      class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200 flex items-center justify-center',
      style: () => `background-color: ${color()}`
    }, [
      Div({ class: 'text-center font-mono text-sm bg-black/20 px-2 py-1 rounded' }, () => color())
    ])
  ]);
};
Mount(PreviewDemo, '#demo-preview');

Color Palette Grid

Live Demo

const PaletteDemo = () => {
  const selectedColor = $('#ef4444');
  const presets = [
    '#ef4444', '#f97316', '#f59e0b', '#eab308',
    '#84cc16', '#10b981', '#14b8a6', '#06b6d4',
    '#3b82f6', '#6366f1', '#8b5cf6', '#d946ef',
    '#ec489a', '#f43f5e', '#6b7280', '#1f2937'
  ];
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Colorpicker({
      label: 'Custom color',
      value: selectedColor
    }),
    Div({ class: 'divider text-xs' }, 'Or choose from palette'),
    Div({ class: 'grid grid-cols-8 gap-2' }, presets.map(color => 
      Button({
        class: `w-8 h-8 rounded-lg shadow-sm transition-transform hover:scale-110`,
        style: `background-color: ${color}`,
        onclick: () => selectedColor(color)
      })
    )),
    Div({ class: 'mt-2 text-center text-sm font-mono' }, () => selectedColor())
  ]);
};
Mount(PaletteDemo, '#demo-palette');

With Text Color Preview

Live Demo

const TextDemo = () => {
  const bgColor = $('#1e293b');
  const textColor = $('#f8fafc');
  
  return Div({ class: 'flex flex-col gap-4 w-full' }, [
    Div({ class: 'flex gap-4' }, [
      Colorpicker({
        label: 'Background',
        value: bgColor
      }),
      Colorpicker({
        label: 'Text',
        value: textColor
      })
    ]),
    Div({ 
      class: 'p-6 rounded-lg text-center font-bold transition-all duration-200',
      style: () => `background-color: ${bgColor()}; color: ${textColor()}`
    }, [
      'Preview text with your colors'
    ])
  ]);
};
Mount(TextDemo, '#demo-text');

All Variants

Live Demo

const VariantsDemo = () => {
  return Div({ class: 'flex flex-wrap gap-4 items-center' }, [
    Colorpicker({
      label: 'Primary',
      value: $('#3b82f6')
    }),
    Colorpicker({
      label: 'Success',
      value: $('#10b981')
    }),
    Colorpicker({
      label: 'Warning',
      value: $('#f59e0b')
    }),
    Colorpicker({
      label: 'Error',
      value: $('#ef4444')
    })
  ]);
};
Mount(VariantsDemo, '#demo-variants');

Dynamic Color Swatch

Live Demo

const DynamicDemo = () => {
  const primary = $('#3b82f6');
  const secondary = $('#ef4444');
  const accent = $('#10b981');
  
  return Div({ class: 'flex flex-col gap-4 w-full' }, [
    Div({ class: 'flex flex-wrap gap-4' }, [
      Colorpicker({ label: 'Primary', value: primary }),
      Colorpicker({ label: 'Secondary', value: secondary }),
      Colorpicker({ label: 'Accent', value: accent })
    ]),
    Div({ class: 'grid grid-cols-3 gap-2 mt-2' }, [
      Div({ 
        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
        style: () => `background-color: ${primary()}`
      }, 'Primary'),
      Div({ 
        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
        style: () => `background-color: ${secondary()}`
      }, 'Secondary'),
      Div({ 
        class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
        style: () => `background-color: ${accent()}`
      }, 'Accent')
    ])
  ]);
};
Mount(DynamicDemo, '#demo-dynamic');