# Preset swatches

> Round label colors to pick from, a plus that opens the full picker, and a live label preview.

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-color-picker-5).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-color-picker-5
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-color-picker-5-light-2792bc00a251d51f.png
- Registry item: https://reui.io/r/new-york-v4/c-color-picker-5.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-color-picker-5.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@reui/badge`, `card`, `@reui/color-picker`, `field`, `input`

## Files

### `c-color-picker-5.tsx`

```tsx
"use client"

import { useState } from "react"
import { Badge } from "@/components/reui/badge"
import {
  ColorPicker,
  ColorPickerContent,
  ColorPickerSwatch,
  ColorPickerSwatches,
  ColorPickerTrigger,
  getForegroundColor,
} from "@/components/reui/color-picker"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

const LABEL_COLORS = [
  { value: "#ef4444", label: "Red" },
  { value: "#f97316", label: "Orange" },
  { value: "#eab308", label: "Yellow" },
  { value: "#22c55e", label: "Green" },
  { value: "#14b8a6", label: "Teal" },
  { value: "#3b82f6", label: "Blue" },
  { value: "#8b5cf6", label: "Violet" },
  { value: "#ec4899", label: "Pink" },
  { value: "#64748b", label: "Slate" },
]

export function Pattern() {
  const [name, setName] = useState("Needs design")
  const [color, setColor] = useState<string | null>("#8b5cf6")
  const custom =
    !!color && !LABEL_COLORS.some((preset) => preset.value === color)
  const ink = color ? getForegroundColor(color) : null

  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Edit label</CardTitle>
        <CardDescription>Labels group issues across projects.</CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="label-name">Name</FieldLabel>
            <Input
              id="label-name"
              value={name}
              onChange={(event) => setName(event.target.value)}
            />
          </Field>
          <Field>
            <FieldLabel id="label-color-label">Color</FieldLabel>
            <ColorPicker value={color} onValueChange={setColor}>
              <div className="flex items-center gap-3">
                <ColorPickerSwatches
                  colors={LABEL_COLORS}
                  shape="circle"
                  aria-labelledby="label-color-label"
                  className="flex-1"
                />
                {/* The plus opens the full picker; once a custom color is
                    set, it shows that color instead. */}
                <ColorPickerTrigger size="icon-sm" aria-label="Custom color">
                  {custom ? (
                    <ColorPickerSwatch shape="circle" />
                  ) : (
                    <IconPlaceholder
                      lucide="PlusIcon"
                      tabler="IconPlus"
                      hugeicons="PlusSignIcon"
                      phosphor="PlusIcon"
                      remixicon="RiAddLine"
                      aria-hidden="true"
                    />
                  )}
                </ColorPickerTrigger>
                <ColorPickerContent align="end" />
              </div>
            </ColorPicker>
          </Field>
          <div className="flex items-center gap-3">
            <span className="text-muted-foreground text-sm">Preview</span>
            <Badge
              style={{
                backgroundColor: color ?? undefined,
                color: ink ?? undefined,
              }}
            >
              {name.trim() || "Untitled"}
            </Badge>
          </div>
        </FieldGroup>
      </CardContent>
    </Card>
  )
}
```