Fields

Color Field

PayloadCMS custom admin panel color input with interactive color picker

Preview

import colorField from "~/payload/fields/color/config";

// Usage in PayloadCMS block/collection config
const themeColor = colorField({
  name: "primaryColor",
  label: "Primary Color",
  description: "Choose the primary brand color",
  required: true,
});

Props

The colorField function accepts the following configuration options:

Prop

Type

Installation

npx shadcn@latest add @uifoundry/color-field

If you encounter issues, check the registry setup guide for configuration help.

Registry Dependencies

This component uses the following registry components:

  • Button - Customizable button component with variants
  • Popover - Floating UI popover component
  • Field Types - TypeScript definitions for PayloadCMS fields

Dependencies

This component requires the following NPM packages:

Coming Soon 1

Full-screen landing page with countdown timer, email signup, and social media links

Header Field

PayloadCMS text field configuration for header elements with sensible defaults

On this page

PreviewPropsInstallationRegistry DependenciesDependencies