Stalk UI

Component

ColorPicker

Picks a color via a saturation area, hue/alpha sliders, hex input, and swatches.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/color-picker

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<ColorPicker defaultValue="#4f46e5">
  <ColorPicker.Trigger aria-label="Brand color" />
  <ColorPicker.Content>
    <ColorPicker.Picker />
    <ColorPicker.Controls>
      <ColorPicker.Input aria-label="Hex value" />
      <ColorPicker.EyeDropper />
    </ColorPicker.Controls>
    <ColorPicker.Swatches>
      <ColorPicker.Swatch color="#ef4444" />
      <ColorPicker.Swatch color="#f97316" />
      <ColorPicker.Swatch color="#22c55e" />
      <ColorPicker.Swatch color="#3b82f6" />
      <ColorPicker.Swatch color="#8b5cf6" />
    </ColorPicker.Swatches>
  </ColorPicker.Content>
</ColorPicker>
Theme
<ColorPicker alpha defaultValue="#4f46e5cc">
  <ColorPicker.Trigger aria-label="Overlay color" />
  <ColorPicker.Content>
    <ColorPicker.Picker />
    <ColorPicker.Controls>
      <ColorPicker.Input aria-label="Hex value" />
    </ColorPicker.Controls>
  </ColorPicker.Content>
</ColorPicker>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`align``'start' \'center' \'end'`No
`side``'top' \'right' \'bottom' \'left'`
PropTypeRequiredDefaultDescription
`className``string`No--
PropTypeRequiredDefaultDescription
`alpha``boolean`No-Enable the alpha (opacity) channel. Defaults to false.
`children``ReactNode`Yes--
`defaultOpen``boolean`No--
`defaultValue``string`No-Uncontrolled initial color (hex).
`disabled``boolean`No--
`onOpenChange``(open: boolean) => void`No--
`onValueChange``(value: string) => void`No-Called with the selected color as a hex string.
`open``boolean`No--
`value``string`No-Controlled color value (hex).
PropTypeRequiredDefaultDescription
`color``string`Yes--

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

No recipe variants are documented for this component.

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/color-picker.json`
  • Recipe: `colorPicker`
  • Files: `src/components/ui/color-picker.tsx`