Color Select

Select field with predefined Tailwind color options and visible color swatches.

Installation

bash

pnpm dlx shadcn@latest add @cs/color-select

Usage

tsx

import { ColorSelect } from "@/components/cs/color-select"

tsx

<ColorSelect name="color" label="Color" colorTarget="bg" />

Custom green shades

A ColorSelect field populated with a custom palette of Tailwind green background colors.

tsx

"use client"

import { useState } from "react"
import { ColorSelect } from "@/registry/cs/ui/color-select"
import { PreviewPanel } from "./preview-utils"

const GREEN_SHADES = [
	{ label: "Mint", value: "bg-emerald-100 dark:bg-emerald-900" },
	{ label: "Spring", value: "bg-green-300 dark:bg-green-700" },
	{ label: "Forest", value: "bg-green-600 dark:bg-green-500" },
	{ label: "Pine", value: "bg-emerald-800 dark:bg-emerald-300" },
]

export default function ColorSelectGreenShadesPreview() {
	const [color, setColor] = useState<string | null>(null)

	return (
		<PreviewPanel>
			<ColorSelect
				name="green-shade"
				label="Green shade"
				placeholder="Select a green shade"
				options={GREEN_SHADES}
				value={color ?? ""}
				colorTarget="bg"
				onValueChange={setColor}
			/>
		</PreviewPanel>
	)
}

Custom hex colors

A ColorSelect field that uses direct hex color values with the raw-color target.

tsx

"use client"

import { useState } from "react"
import { ColorSelect } from "@/registry/cs/ui/color-select"
import { PreviewPanel } from "./preview-utils"

const HEX_COLORS = [
	{ label: "Indigo", value: "#4f46e5" },
	{ label: "Cerulean", value: "#0891b2" },
	{ label: "Emerald", value: "#059669" },
	{ label: "Coral", value: "#e76f51" },
]

export default function ColorSelectRawColorsPreview() {
	const [color, setColor] = useState<string | null>(null)

	return (
		<PreviewPanel>
			<ColorSelect
				name="hex-color"
				label="Brand color"
				placeholder="Select a color"
				colorTarget="raw-color"
				options={HEX_COLORS}
				value={color ?? ""}
				onValueChange={setColor}
			/>
		</PreviewPanel>
	)
}

API Reference

ColorSelect

Renders a select field with predefined or custom Tailwind background-color or raw CSS color swatches.

Props

Name	Type	Default	Description
colorTarget *	ColorTarget	-	Tailwind color utility prefix used for the selected value, or `raw-color` for direct CSS color values.
defaultValue	string \| null \| undefined	-	Initial selected value for uncontrolled usage.
error	string \| null \| undefined	-	Validation error message for the field.
label	string \| undefined	-	Visible field label.
name	string \| undefined	-	Form field name used for submission and validation errors.
onValueChange	((value: string \| null) => void) \| undefined	-	Called when the selected value changes.
options	LegacySelectOption[]	TAILWIND_COLORS	Color options displayed in the menu. With a Tailwind utility `colorTarget`, custom option values must use `bg-*` classes, such as `bg-red-200 dark:bg-red-700`; the `bg-` prefix is replaced with `colorTarget` for the selected value. With `colorTarget="raw-color"`, values must be direct CSS colors, such as hex values like `#16a34a`, and are returned unchanged. The supplied color value is displayed as the swatch in both modes.
orientation	"vertical" \| "horizontal" \| "responsive" \| null \| undefined	-	-
placeholder	string \| undefined	-	Text displayed when no option is selected.
required	boolean \| undefined	-	Requires a selected value before the form can submit.
selectClassName	string \| undefined	-	Additional classes applied to the select trigger.
value	string \| (readonly string[] & string) \| undefined	-	Controlled selected value.

TAILWIND_COLORS

Predefined color labels and Tailwind classes used by ColorSelect.

Dependencies

@cs/select