Yami

Color Picker

A popover color picker with hex input.

Installation

Add the color picker component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/color-picker.json

Usage

"use client"

import { Button } from "@/components/ui/button"
import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerHueSlider,
  ColorPickerInput,
  ColorPickerSwatch,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"

<ColorPicker defaultValue="#6366f1">
  <ColorPickerTrigger asChild>
    <Button variant="outline" className="gap-2">
      <ColorPickerSwatch className="size-4 rounded-sm" />
      Pick a color
    </Button>
  </ColorPickerTrigger>
  <ColorPickerContent>
    <ColorPickerArea />
    <ColorPickerHueSlider />
    <ColorPickerInput />
  </ColorPickerContent>
</ColorPicker>

Examples

Default

Code

"use client"

import { Button } from "@/components/ui/button"
import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerHueSlider,
  ColorPickerInput,
  ColorPickerSwatch,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"

<ColorPicker defaultValue="#6366f1">
  <ColorPickerTrigger asChild>
    <Button variant="outline" className="gap-2">
      <ColorPickerSwatch className="size-4 rounded-sm" />
      Pick a color
    </Button>
  </ColorPickerTrigger>
  <ColorPickerContent>
    <ColorPickerArea />
    <ColorPickerHueSlider />
    <ColorPickerInput />
  </ColorPickerContent>
</ColorPicker>