Gooey Color Picker

A floating color picker that expands from a swatch into hue and alpha blobs joined by an SVG gooey filter.

A compact swatch that opens into a panel — circular color wheel, alpha slider, and editable hex field. The same button becomes the close control when open.

Gooey Color Picker

Installation

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

Or install straight from the public GitHub source 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

Prop	Type	Default
`value`	`GooeyColor \| string`	—
`defaultValue`	`GooeyColor \| string`	`{ h: 210, s: 90, l: 55, a: 1 }`
`onChange`	`(color: GooeyColor, css: string) => void`	—
`label`	`string`	`"Color picker"`
`className`	`string`	—

GooeyColor is { h, s, l, a } (hue 0–360, saturation/lightness 0–100, alpha 0–1). String values accept hex or hsl/hsla.