23rd logo23rd

Gooey Color Picker

A swatch that expands into a gooey hue wheel, alpha slider, and hex field.

Preview

Installation

pnpm dlx shadcn@latest add @23rd/gooey-color-picker

Or from the public GitHub registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/gooey-color-picker

Usage

import { GooeyColorPicker } from "@/components/ui/gooey-color-picker"

export function Example() {
  return (
    <GooeyColorPicker
      defaultValue={{ h: 210, s: 90, l: 55, a: 1 }}
      onChange={(color, css) => {
        console.log(color, css)
      }}
    />
  )
}

Props

PropTypeDefault
valueGooeyColor | stringnone
defaultValueGooeyColor | string{ h: 320, s: 90, l: 58, a: 1 }
onChange(color: GooeyColor, css: string) => voidnone
labelstring"Color picker"
classNamestringReact only
classstringSvelte only

GooeyColor is { h, s, l, a } (h 0–360, s and l 0–100, a 0–1); strings accept hex or hsl/hsla.