Shadcn Color Picker for React Radix UI

import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaThumb,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropperTrigger,
  ColorPickerInput,
  ColorPickerSlider,
  ColorPickerSwatchPreview,
  ColorPickerTransparencyGrid,
  ColorPickerTrigger,
  ColorPickerView,
} from "@/components/ui/color-picker";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

<ColorPicker className="w-full max-w-64" defaultValue="#eb5e41" format="hsla">
  <ColorPickerControl>
    <InputGroup>
      <ColorPickerTrigger asChild>
        <InputGroupAddon>
          <ColorPickerSwatchPreview />
        </InputGroupAddon>
      </ColorPickerTrigger>
      <ColorPickerInput asChild>
        <InputGroupInput />
      </ColorPickerInput>
    </InputGroup>
  </ColorPickerControl>

  <ColorPickerContent>
    <ColorPickerArea>
      <ColorPickerAreaThumb />
    </ColorPickerArea>
    <ColorPickerView format="hsla">
      <div className="flex items-center gap-3">
        <ColorPickerEyeDropperTrigger />
        <div className="flex flex-1 flex-col gap-2.5">
          <ColorPickerSlider channel="hue" />
          <ColorPickerSlider channel="alpha">
            <ColorPickerTransparencyGrid />
          </ColorPickerSlider>
        </div>
      </div>
    </ColorPickerView>
  </ColorPickerContent>
</ColorPicker>