🎨 Color Picker Field

Payload CMS doesn’t come with a built-in color picker, so we’ve created a custom color field that integrates seamlessly with Tailwind’s dynamic color palette. Now, you can effortlessly select colors, enter HEX codes, or search by color names—all within the CMS.

🌈 Tailwind + ShadCN Integration
This color picker is powered by Tailwind’s design system combined with ShadCN’s sleek component library, ensuring a beautiful and consistent user experience.

https://github.com/user-attachments/assets/a8bae019-ac61-4e64-a2b3-221f24324f3a

⚙️ Setup Instructions

1️⃣ Install the Color Picker using your preferred package manager:

pnpm install @shefing/color-picker

2️⃣ Add the Field to Your Collection:

import { createColorField } from '@shefing/color-picker';
import { createBackgroundColorField } from '@shefing/color-picker'
fields: [
  createColorField({
    name: 'color',       // 🏷️ The name of the field
    label: 'Font Color', // 🎯 The label displayed in the UI
  }),
createBackgroundColorField({
      name: 'backgroundColor', // 🏷️ The name of the field.
      label: 'background-color', // 🎯 The label of the field.
    }),
];

3️⃣ Prerequisite: Ensure Tailwind CSS is installed in your project to take full advantage of the dynamic color palette.

💡 Pro Tip: The colors you select are directly sourced from your Tailwind configuration, ensuring consistency with your design system. Say goodbye to mismatched colors and hello to effortless branding!