Fields
Color Picker
A customizable color picker field for PayloadCMS with both components and utility function.
Installation
Use the following command to install the color picker field:
npx shadcn@latest add https://payload.veiag.dev/r/color-picker.jsonImportant
Currently, shadcn CLI removes use client directive from the top of the files.
Please ensure to add it back to the top of index.tsx file in the color picker field directory.
I think this should be fixed in future releases of shadcn CLI.
Usage
Basic usage
import { colorField } from '@/fields/color-picker/field'
export const MyCollection = {
slug: 'my-collection',
fields: [
colorField({
name: 'backgroundColor',
required: true,
description: 'Choose a background color for your page',
}),
],
}With presets
import { colorField } from '@/fields/color-picker/field'
export const MyCollection = {
slug: 'my-collection',
fields: [
colorField({
name: 'themeColor',
colorPresets: [
'#FF6B6B',
'#4ECDC4',
'#45B7D1',
'#FFA07A',
'#98D8C8',
'#F7DC6F',
'#BB8FCE',
'#85C1E2',
],
showTextInput: true,
debounceDelay: 500,
}),
],
}Advanced usage
import { colorField } from '@/fields/color-picker/field'
export const MyCollection = {
slug: 'my-collection',
fields: [
colorField({
name: 'brandColor',
required: true,
description: 'Primary brand color',
colorPresets: ['#0066FF', '#FF3366', '#00CC66'],
debounceDelay: 300,
showTextInput: true,
overrides: (field) => ({
...field,
admin: {
...field.admin,
condition: (data) => data.useCustomBranding === true,
},
}),
}),
],
}Screenshots
API Reference
Prop
Type
Features
- Color Presets - Provide a list of preset colors for quick selection
- Debounced Input - Configurable debounce delay for smooth typing experience
- Hex Validation - Built-in validation for hex color format with visual feedback
- Native Color Input - Uses native HTML color input for consistent UX across browsers
- Custom Cell Component - Displays a color swatch in admin list views