# Color Swatch Picker (/forms/color-swatch-picker)





<ComponentPreview name="color-swatch-picker-preskok-demo" description="Swatch picker with selected state indicator." />

## Installation [#installation]

```bash
npx shadcn@latest add @preskok/color-swatch-picker
```

## Usage [#usage]

```tsx
import { ColorSwatchPicker } from "@/components/ui/preskok-ui/color-swatch-picker"

export function ColorSwatchPickerDemo() {
  return (
    <ColorSwatchPicker aria-label="Theme color">
      {Array.from({ length: 4 }).map((_, i) => (
        <ColorSwatchPicker.Item key={i} />
      ))}
    </ColorSwatchPicker>
  )
}
```