Payload CMS Custom Admin Components Development

Custom Payload CMS Admin Panel Components

Payload allows overriding and extending the admin panel using React components. This is not patching — Payload provides official slots for injecting custom components into the header, navigation, dashboard, and individual fields.

Dashboard Components

// payload.config.ts
export default buildConfig({
  admin: {
    components: {
      // Main dashboard page
      views: {
        Dashboard: '/components/admin/Dashboard#CustomDashboard',
      },
      // Additional navigation elements
      afterNavLinks: ['/components/admin/NavExtras#NavExtras'],
      // Header elements
      afterDashboard: ['/components/admin/DashboardStats#DashboardStats'],
      // Logo
      graphics: {
        Logo: '/components/admin/Logo#Logo',
        Icon: '/components/admin/Icon#Icon',
      },
    },
  },
})

// components/admin/DashboardStats.tsx
'use client'
import { useEffect, useState } from 'react'

interface Stats {
  totalOrders: number
  totalRevenue: number
  newUsers: number
}

export const DashboardStats = () => {
  const [stats, setStats] = useState<Stats | null>(null)

  useEffect(() => {
    fetch('/api/admin/stats')
      .then(r => r.json())
      .then(setStats)
  }, [])

  if (!stats) return <div>Loading...</div>

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, padding: '16px 0' }}>
      <StatCard label="Orders Today" value={stats.totalOrders} />
      <StatCard label="Revenue" value={`$${stats.totalRevenue.toLocaleString()}`} />
      <StatCard label="New Users" value={stats.newUsers} />
    </div>
  )
}

const StatCard = ({ label, value }: { label: string; value: any }) => (
  <div style={{ background: '#fff', border: '1px solid #e0e0e0', borderRadius: 8, padding: 16 }}>
    <div style={{ fontSize: 12, color: '#666' }}>{label}</div>
    <div style={{ fontSize: 24, fontWeight: 700 }}>{value}</div>
  </div>
)

Custom Collection View

// collections/Orders.ts
const Orders: CollectionConfig = {
  slug: 'orders',
  admin: {
    components: {
      views: {
        // Add "Analytics" tab to collection
        Edit: {
          Analytics: {
            Component: '/components/admin/OrderAnalytics#OrderAnalytics',
            path: '/analytics',
            Tab: {
              label: 'Analytics',
              href: '/analytics',
            },
          },
        },
      },
    },
  },
}

// components/admin/OrderAnalytics.tsx
'use client'
import { useDocumentInfo } from 'payload/components/utilities'

export const OrderAnalytics = () => {
  const { id } = useDocumentInfo()

  // Display analytics for specific order
  return (
    <div>
      <h2>Analytics for Order {id}</h2>
      {/* Custom charts, timeline */}
    </div>
  )
}

Custom Field Component

// components/admin/fields/SlugField.tsx
'use client'
import { useField, useFormFields } from 'payload/components/forms'
import { useEffect } from 'react'

export const SlugField = ({ path }: { path: string }) => {
  const { value, setValue } = useField<string>({ path })
  const title = useFormFields(([fields]) => fields.title?.value as string)

  const generateSlug = (str: string) =>
    str.toLowerCase()
      .replace(/\s+/g, '-')
      .replace(/[^\w-]/g, '')

  return (
    <div>
      <label>URL Slug</label>
      <div style={{ display: 'flex', gap: 8 }}>
        <input
          type="text"
          value={value || ''}
          onChange={e => setValue(e.target.value)}
        />
        <button
          type="button"
          onClick={() => title && setValue(generateSlug(title))}
        >
          From Title
        </button>
      </div>
    </div>
  )
}

Action Buttons in Edit Form

// collections/Products.ts
{
  admin: {
    components: {
      edit: {
        // Additional buttons in form header
        SaveButton: '/components/admin/ProductActions#ProductActions',
      },
    },
  },
}

// components/admin/ProductActions.tsx
'use client'
import { useDocumentInfo, useForm } from 'payload/components/utilities'

export const ProductActions = () => {
  const { id } = useDocumentInfo()
  const { submit } = useForm()

  const handleDuplicate = async () => {
    await fetch(`/api/products/${id}/duplicate`, { method: 'POST' })
  }

  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <button onClick={handleDuplicate} type="button">
        Duplicate
      </button>
      <button onClick={submit} type="button">
        Save
      </button>
    </div>
  )
}

Custom Logo

// components/admin/Logo.tsx
export const Logo = () => (
  <img src="/logo.svg" alt="Company Name" height={40} />
)

// payload.config.ts
admin: {
  components: {
    graphics: {
      Logo: '/components/admin/Logo#Logo',
    },
  },
  css: '/styles/admin-custom.css',  // custom CSS styles for admin
}

Timeline

Developing custom admin components (dashboard with statistics, custom fields, additional tabs) — 2–4 days depending on UI complexity.