Introduction

Custom fields, utility components, and plugins for PayloadCMS.

PayloadCMS Extensions

A growing collection of customizable, accessible fields, utility components, and plugins built specifically for PayloadCMS.

What's Included?

🎨 Custom Fields

Enhanced input fields for your PayloadCMS admin panel. Each field includes both the UI component and utility function to easily integrate into your schemas.

Examples: Color Picker, Lucide Icon Picker

🛠️ Utility Components

Helper components to enhance your PayloadCMS development experience. These are reusable components that solve common UI and UX challenges.

Examples: Array Row Label

🔌 Plugins

Powerful npm packages that extend PayloadCMS capabilities with advanced features and integrations.

Examples: Algolia Search Plugin

Installation Methods

Fields & Components (Copy & Paste)

No npm packages required. Copy the code directly into your project and customize as needed.

# Using CLI (recommended)
npx shadcn@latest add https://payload.veiag.dev/r/color-picker.json

# Or copy manually from the docs

Plugins (npm Package)

Install via your preferred package manager:

pnpm add @veiag/payload-algolia-search
# or
npm install @veiag/payload-algolia-search

Why use this collection?

Built with best practices, fully customizable, and ready to drop into your PayloadCMS projects.

Copy & Paste (Fields & Components)

No npm packages required for fields and components. Copy the code directly into your project and customize as needed. Full control over your codebase.

Fully Customizable

Every component is built to be customized. Change colors, styles, and behavior to match your needs. You own the code.

PayloadCMS Native

Built specifically for PayloadCMS with proper type definitions and admin UI integration. Each field includes both the UI component and a utility function for seamless schema integration.

Production Ready

All components and plugins are tested and used in production environments. They follow PayloadCMS best practices and conventions.

Getting Started

Choose your path:

• Browse Custom Fields - Enhanced input fields for your admin panel
• Explore Utility Components - Helper components for common use cases
• Check Plugins - Powerful integrations and features

Or jump directly to a specific component:

• Color Picker - Customizable color picker field
• Lucide Icon Picker - Icon picker with fuzzy search
• Array Row Label - Custom labels for array items
• Algolia Search Plugin - Full-text search with Algolia

Quick Example

Using a Field

import { colorField } from '@/fields/color-picker/field'

export const MyCollection = {
  slug: 'my-collection',
  fields: [
    colorField({
      name: 'primaryColor',
      required: true,
    }),
  ],
}

Using a Component

import { customRowLabel } from '@/components/array-custom-label'

export const MyCollection = {
  slug: 'articles',
  fields: [
    {
      name: 'sections',
      type: 'array',
      fields: [...],
      admin: {
        ...customRowLabel({ fieldToUse: 'title' }),
      },
    },
  ],
}

Using a Plugin

import { algoliaSearchPlugin } from '@veiag/payload-algolia-search'

export default buildConfig({
  plugins: [
    algoliaSearchPlugin({
      credentials: { /* ... */ },
      collections: [{ slug: 'posts', indexFields: ['title', 'content'] }],
    }),
  ],
})

Contributing

We welcome contributions! If you have ideas for new fields, components, or plugins, please open an issue or submit a pull request on GitHub.

Support

• Documentation: Browse the docs for detailed guides
• GitHub Issues: Report bugs or request features
• Discussions: Ask questions and share ideas

Ready to enhance your PayloadCMS project? Start exploring the collection!