1afcaa30ed
Fixes https://github.com/payloadcms/payload/issues/8013 **BREAKING:** - Upgrades minimum supported @types/react version from npm:types-react@19.0.0-rc.0 to npm:types-react@19.0.0-rc.1 - Upgrades minimum supported @types/react-dom version from npm:types-react-dom@19.0.0-rc.0 to npm:types-react-dom@19.0.0-rc.1 - Upgrades minimum supported react and react-dom version from 19.0.0-rc-06d0b89e-20240801 to 19.0.0-rc-5dcb0097-20240918 - Upgrades minimum supported Next.js version from 15.0.0-canary.104 to 15.0.0-canary.160 --------- Co-authored-by: PatrikKozak <patrik@payloadcms.com> Co-authored-by: Jacob Fletcher <jacobsfletch@gmail.com>
Payload Custom Components Example
This example demonstrates how to use Custom Components in Payload Admin Panel. This example includes custom components for every field type available in Payload, including both server and client components. It also includes custom views, custom nav links, and more.
Quick Start
To spin up this example locally, follow these steps:
-
Clone this repo
-
cdinto this directory and runpnpm i --ignore-workspace*,yarn, ornpm install*If you are running using pnpm within the Payload Monorepo, the
--ignore-workspaceflag is needed so that pnpm generates a lockfile in this example's directory despite the fact that one exists in root. -
pnpm dev,yarn devornpm run devto start the server- Press
ywhen prompted to seed the database
- Press
-
open http://localhost:3000to access the home page -
open http://localhost:3000/adminto access the admin panel- Login with email
demo@payloadcms.comand passworddemo
- Login with email
How it works
Collections
See the Collections docs for details on how to extend any of this functionality.
-
Users
The
userscollection is auth-enabled which provides access to the admin panel.For additional help with authentication, see the official Auth Example or the Authentication docs.
-
Fields
The
fieldscollection contains every field type available in Payload, each with custom components filled in every available "slot", i.e.admin.components.Field,admin.components.Label, etc. There are two of every field, one for server components, and the other for client components. This pattern shows how to use custom components in both environments, no matter which field type you are using. -
Views
The
viewscollection demonstrates how to add collection-level views, including the default view and custom tabs. -
Root Views
The
root-viewscollection demonstrates how to add a root document-level view to the admin panel.
Questions
If you have any issues or questions, reach out to us on Discord or start a GitHub discussion.