chore(release): v3.0.0-beta.103 [skip ci]

## Description

Fixes https://github.com/payloadcms/payload/issues/8134

- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

<!-- Please delete options that are not relevant. -->

- [x] Bug fix (non-breaking change which fixes an issue)

## Checklist:

- [x] Existing test suite passes locally with my changes

.git-blame-ignore-revs

@@ -22,3 +22,9 @@ fb7d1be2f3325d076b7c967b1730afcef37922c2
 
 # 3.0 prettier & lint everywhere again
 83fd4c66222d7846eeb5cc332dfa99bf1e830831
+
+# Upgrade to typescript-eslint v8, then prettier & lint everywhere
+86fdad0bb8ab27810599c8a32f3d8cba1341e1df
+
+# Prettier and lint remaining db packages
+7fd736ea5b2e9fc4ef936e9dc9e5e3d722f6d8bf

.github/workflows/main.yml

@@ -17,7 +17,7 @@ concurrency:
   cancel-in-progress: true
 
 env:
-  NODE_VERSION: 18.20.2
+  NODE_VERSION: 22.6.0
   PNPM_VERSION: 9.7.1
   DO_NOT_TRACK: 1 # Disable Turbopack telemetry
   NEXT_TELEMETRY_DISABLED: 1 # Disable Next telemetry

.github/workflows/pr-title.yml

@@ -39,6 +39,7 @@ jobs:
             db-mongodb
             db-postgres
             db-sqlite
+            drizzle
             email-nodemailer
             eslint
             graphql
@@ -106,14 +107,15 @@ jobs:
   label-pr-on-open:
     name: label-pr-on-open
     runs-on: ubuntu-latest
+    if: github.event.action == 'opened'
     steps:
       - name: Tag with main branch with v2
-        if: github.event.action == 'opened' && github.event.pull_request.base.ref == 'main'
+        if: github.event.pull_request.base.ref == 'main'
         uses: actions-ecosystem/action-add-labels@v1
         with:
           labels: v2
       - name: Tag with beta branch with v3
-        if: github.event.action == 'opened' && github.event.pull_request.base.ref == 'beta'
+        if: github.event.pull_request.base.ref == 'beta'
         uses: actions-ecosystem/action-add-labels@v1
         with:
           labels: v3

.github/workflows/release-canary.yml

@@ -6,7 +6,7 @@ on:
       - beta
 
 env:
-  NODE_VERSION: 18.20.2
+  NODE_VERSION: 22.6.0
   PNPM_VERSION: 9.7.1
   DO_NOT_TRACK: 1 # Disable Turbopack telemetry
   NEXT_TELEMETRY_DISABLED: 1 # Disable Next telemetry

.node-version

@@ -1 +1 @@
-v18.20.2
+v22.6.0

.nvmrc

@@ -1 +1 @@
-v18.20.2
+v22.6.0

.tool-versions

@@ -0,0 +1,2 @@
+pnpm 9.7.1
+nodejs 22.6.0

.vscode/settings.json

@@ -31,8 +31,15 @@
     "editor.formatOnSave": true
   },
   "editor.formatOnSaveMode": "file",
-  // All ESLint rules to 'warn' to differentate from TypeScript's 'error' level
-  "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }],
+  "eslint.rules.customizations": [
+    // Defaultt all ESLint errors to 'warn' to differentate from TypeScript's 'error' level
+    { "rule": "*", "severity": "warn" },
+
+    // Silence some warnings that will get auto-fixed
+    { "rule": "perfectionist/*", "severity": "off", "fixable": true },
+    { "rule": "curly", "severity": "off", "fixable": true },
+    { "rule": "object-shorthand", "severity": "off", "fixable": true }
+  ],
   "typescript.tsdk": "node_modules/typescript/lib",
   // Load .git-blame-ignore-revs file
   "gitlens.advanced.blame.customArguments": ["--ignore-revs-file", ".git-blame-ignore-revs"],

README.md

@@ -1,6 +1,7 @@
 <a href="https://payloadcms.com"><img width="100%" src="https://github.com/payloadcms/payload/blob/main/packages/payload/src/admin/assets/images/github-banner-alt.jpg?raw=true" alt="Payload headless CMS Admin panel built with React" /></a>
 <br />
 <br />
+
 <p align="left">
   <a href="https://github.com/payloadcms/payload/actions"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/payloadcms/payload/main.yml?style=flat-square"></a>
   &nbsp;

docs/admin/components.mdx

@@ -196,6 +196,48 @@ import { MyFieldComponent } from 'my-external-package/client'
 
 which is a valid way to access MyFieldComponent that can be resolved by the consuming project.
 
+### Custom Components from unknown locations
+
+By default, any component paths from known locations are added to the import map. However, if you need to add any components from unknown locations to the import map, you can do so by adding them to the `admin.dependencies` array in your Payload Config. This is mostly only relevant for plugin authors and not for regular Payload users.
+
+Example:
+
+```ts
+export default {
+  // ...
+  admin: {
+    // ...
+    dependencies: {
+      myTestComponent: { // myTestComponent is the key - can be anything
+        path: '/components/TestComponent.js#TestComponent',
+        type: 'component',
+        clientProps: {
+          test: 'hello',
+        },
+      },
+    },
+  }
+}
+```
+
+This way, `TestComponent` is added to the import map, no matter if it's referenced in a known location or not. On the client, you can then use the component like this:
+
+```tsx
+'use client'
+
+import { RenderComponent, useConfig } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomView = () => {
+  const { config } = useConfig()
+  return (
+    <div>
+      <RenderComponent mappedComponent={config.admin.dependencies?.myTestComponent} />
+    </div>
+  )
+}
+```
+
 ## Root Components
 
 Root Components are those that effect the [Admin Panel](./overview) generally, such as the logo or the main nav.
@@ -389,14 +431,14 @@ export const MyClientComponent: React.FC = () => {
   See [Using Hooks](#using-hooks) for more details.
 </Banner>
 
-All [Field Components](./fields) automatically receive their respective Client Field Config through a common [`field`](./fields#the-field-prop) prop:
+All [Field Components](./fields) automatically receive their respective Field Config through a common [`field`](./fields#the-field-prop) prop:
 
 ```tsx
 'use client'
 import React from 'react'
-import type { TextFieldProps } from 'payload'
+import type { TextFieldClientComponent } from 'payload'
 
-export const MyClientFieldComponent: TextFieldProps = ({ field: { name } }) => {
+export const MyClientFieldComponent: TextFieldClientComponent = ({ field: { name } }) => {
   return (
     <p>
       {`This field's name is ${name}`}

docs/admin/fields.mdx

@@ -136,7 +136,7 @@ All Field Components receive the following props:
 | Property         | Description                                                                                                                                                                                                                      |
 | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **`docPreferences`** | An object that contains the [Preferences](./preferences) for the document.
-| **`field`** | The sanitized, client-friendly version of the field's config. [More details](#the-field-prop) |
+| **`field`** | The field's config. [More details](#the-field-prop) |
 | **`locale`**     | The locale of the field. [More details](../configuration/localization).                                                                                                                                                                   |
 | **`readOnly`**   | A boolean value that represents if the field is read-only or not.                                                                                                                                                                  |
 | **`user`**       | The currently authenticated user. [More details](../authentication/overview). |
@@ -175,46 +175,46 @@ export const CustomTextField: React.FC = () => {
 
 #### TypeScript
 
-When building Custom Field Components, you can import the component props to ensure type safety in your component. There is an explicit type for the Field Component, one for every [Field Type](../fields/overview). The convention is to append `Props` to the type of field, i.e. `TextFieldProps`.
+When building Custom Field Components, you can import the component type to ensure type safety. There is an explicit type for the Field Component, one for every [Field Type](../fields/overview) and for every client/server environment. The convention is to prepend the field type onto the target type, i.e. `TextFieldClientComponent`:
 
 ```tsx
 import type {
-  ArrayFieldProps,
-  BlocksFieldProps,
-  CheckboxFieldProps,
-  CodeFieldProps,
-  CollapsibleFieldProps,
-  DateFieldProps,
-  EmailFieldProps,
-  GroupFieldProps,
-  HiddenFieldProps,
-  JSONFieldProps,
-  NumberFieldProps,
-  PointFieldProps,
-  RadioFieldProps,
-  RelationshipFieldProps,
-  RichTextFieldProps,
-  RowFieldProps,
-  SelectFieldProps,
-  TabsFieldProps,
-  TextFieldProps,
-  TextareaFieldProps,
-  UploadFieldProps
+  TextFieldClientComponent,
+  TextFieldServerComponent,
+  TextFieldClientProps,
+  TextFieldServerProps,
+  // ...and so on for each Field Type
 } from 'payload'
 ```
 
 ### The `field` Prop
 
-All Field Components are passed a client-friendly version of their Field Config through a common `field` prop. Since the raw Field Config is [non-serializable](https://react.dev/reference/rsc/use-client#serializable-types), Payload sanitized it into a [Client Config](./components#accessing-the-payload-config) that is safe to pass into Client Components.
+All Field Components are passed their own Field Config through a common `field` prop. Within a Server Component, this is the raw Field Config. Within Client Components, however, the raw Field Config is [non-serializable](https://react.dev/reference/rsc/use-client#serializable-types). Instead, Client Components receives a [Client Config](./components#accessing-the-payload-config), which is a sanitizes version of the Field Config that is safe to pass into Client Components.
 
 The exact shape of this prop is unique to the specific [Field Type](../fields/overview) being rendered, minus all non-serializable properties. Any [Custom Components](../components) are also resolved into a "mapped component" that is safe to pass.
 
+```tsx
+import React from 'react'
+import type { TextFieldServerComponent } from 'payload'
+
+export const MyServerTextField: TextFieldServerComponent = ({ payload, field: { name } }) => {
+  const result = await payload.find({
+    collection: 'myCollection',
+    depth: 1,
+  })
+
+  // ...
+}
+```
+
+Client Component:
+
 ```tsx
 'use client'
 import React from 'react'
-import type { TextFieldProps } from 'payload'
+import type { TextFieldClientComponent } from 'payload'
 
-export const MyClientFieldComponent: React.FC<TextFieldProps> = ({ field: { name } }) => {
+export const MyClientTextField: TextFieldClientComponent = ({ field: { name } }) => {
   return (
     <p>
       {`This field's name is ${name}`}
@@ -238,40 +238,18 @@ The following additional properties are also provided to the `field` prop:
 
 #### TypeScript
 
-When building Custom Field Components, you can import the client field props to ensure type safety in your component. There is an explicit type for the Field Component, one for every [Field Type](../fields/overview). The convention is to append `Client` to the type of field, i.e. `TextFieldClient`.
+When building Custom Field Components, you can import the client field props to ensure type safety in your component. There is an explicit type for the Field Component, one for every [Field Type](../fields/overview) and server/client environment. The convention is to prepend the field type onto the target type, i.e. `TextFieldClientComponent`:
 
 ```tsx
 import type {
-  ArrayFieldClient,
-  BlocksFieldClient,
-  CheckboxFieldClient,
-  CodeFieldClient,
-  CollapsibleFieldClient,
-  DateFieldClient,
-  EmailFieldClient,
-  GroupFieldClient,
-  HiddenFieldClient,
-  JSONFieldClient,
-  NumberFieldClient,
-  PointFieldClient,
-  RadioFieldClient,
-  RelationshipFieldClient,
-  RichTextFieldClient,
-  RowFieldClient,
-  SelectFieldClient,
-  TabsFieldClient,
-  TextFieldClient,
-  TextareaFieldClient,
-  UploadFieldClient
+  TextFieldClientComponent,
+  TextFieldServerComponent,
+  TextFieldClientProps,
+  TextFieldServerProps,
+  // ...and so on for each Field Type
 } from 'payload'
 ```
 
-When working on the client, you will never have access to objects of type `Field`. This is reserved for the server-side. Instead, you can use `ClientField` which is a union type of all the client fields:
-
-```tsx
-import type { ClientField } from 'payload'
-```
-
 ### The Cell Component
 
 The Cell Component is rendered in the table of the List View. It represents the value of the field when displayed in a table cell.
@@ -353,7 +331,7 @@ When building Custom Label Components, you can import the component props to ens
 import type {
   TextFieldLabelServerComponent,
   TextFieldLabelClientComponent,
-  // And so on for each Field Type
+  // ...and so on for each Field Type
 } from 'payload'
 ```
 

docs/admin/views.mdx

@@ -31,8 +31,9 @@ const config = buildConfig({
   admin: {
     components: {
       views: {
-        dashboard: {
-          Component: '/path/to/MyCustomDashboardView#MyCustomDashboardViewComponent', // highlight-line
+        customView: {
+          Component: '/path/to/MyCustomView#MyCustomView', // highlight-line
+          path: '/my-custom-view',
         }
       },
     },
@@ -40,7 +41,42 @@ const config = buildConfig({
 })
 ```
 
-_For details on how to build Custom Views, see [Building Custom Views](#building-custom-views)._
+Your Custom Root Views can optionally use one of the templates that Payload provides. The most common of these is the Default Template which provides the basic layout and navigation. Here is an example of what that might look like:
+
+```tsx
+import type { AdminViewProps } from 'payload'
+
+import { DefaultTemplate } from '@payloadcms/next/templates'
+import { Gutter } from '@payloadcms/ui'
+import React from 'react'
+
+export const MyCustomView: React.FC<AdminViewProps> = ({
+  initPageResult,
+  params,
+  searchParams,
+}) => {
+  return (
+    <DefaultTemplate
+      i18n={initPageResult.req.i18n}
+      locale={initPageResult.locale}
+      params={params}
+      payload={initPageResult.req.payload}
+      permissions={initPageResult.permissions}
+      searchParams={searchParams}
+      user={initPageResult.req.user || undefined}
+      visibleEntities={initPageResult.visibleEntities}
+    >
+      <Gutter>
+        <h1>Custom Default Root View</h1>
+        <br />
+        <p>This view uses the Default Template.</p>
+      </Gutter>
+    </DefaultTemplate>
+  )
+}
+```
+
+_For details on how to build Custom Views, including all available props, see [Building Custom Views](#building-custom-views)._
 
 The following options are available:
 
@@ -133,7 +169,7 @@ export const MyCollectionConfig: SanitizedCollectionConfig = {
 }
 ```
 
-_For details on how to build Custom Views, see [Building Custom Views](#building-custom-views)._
+_For details on how to build Custom Views, including all available props, see [Building Custom Views](#building-custom-views)._
 
 <Banner type="warning">
   <strong>Note:</strong>
@@ -184,7 +220,7 @@ export const MyGlobalConfig: SanitizedGlobalConfig = {
 }
 ```
 
-_For details on how to build Custom Views, see [Building Custom Views](#building-custom-views)._
+_For details on how to build Custom Views, including all available props, see [Building Custom Views](#building-custom-views)._
 
 <Banner type="warning">
   <strong>Note:</strong>
@@ -227,7 +263,7 @@ export const MyCollectionOrGlobalConfig: SanitizedCollectionConfig = {
 }
 ```
 
-_For details on how to build Custom Views, see [Building Custom Views](#building-custom-views)._
+_For details on how to build Custom Views, including all available props, see [Building Custom Views](#building-custom-views)._
 
 <Banner type="warning">
  <strong>Note:</strong>
@@ -312,13 +348,11 @@ Your Custom Views will be provided with the following props:
 
 | Prop                      | Description                                                                                                                            |
 | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
-| **`user`**                    | The currently logged in user.                                                                                                          |
-| **`locale`**                  | The current [Locale](../configuration/localization) of the [Admin Panel](./overview).                                                  |
-| **`navGroups`**               | The grouped navigation items according to `admin.group` in your [Collection Config](../collections/overview) or [Global Config](../globals/overview). |
-| **`params`**                  | An object containing the [Dynamic Route Parameters](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes).     |
-| **`permissions`**             | The permissions of the currently logged in user.                                                                                       |
-| **`searchParams`**            | An object containing the [Search Parameters](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL#parameters).      |
-| **`visibleEntities`**         | The current user's visible entities according to your [Access Control](../access-control/overview).                                    |
+| **`initPageResult`**      | An object containing `req`, `payload`, `permissions`, etc.                                                                  |
+| **`clientConfig`**        | The Client Config object. [More details](../components#accessing-the-payload-config).                                                             |
+| **`importMap`**           | The import map object.                                                        |
+| **`params`**              | An object containing the [Dynamic Route Parameters](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes).     |
+| **`searchParams`**        | An object containing the [Search Parameters](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL#parameters).      |
 
 <Banner type="success">
   <strong>Reminder:</strong>

docs/authentication/overview.mdx

@@ -85,6 +85,7 @@ The following options are available:
 | **`lockTime`**             | Set the time (in milliseconds) that a user should be locked out if they fail authentication more times than `maxLoginAttempts` allows for.                                                                                          |
 | **`loginWithUsername`**    | Ability to allow users to login with username/password. [More](/docs/authentication/overview#login-with-username)                                                                                                                     |
 | **`maxLoginAttempts`**     | Only allow a user to attempt logging in X amount of times. Automatically locks out a user from authenticating if this limit is passed. Set to `0` to disable.                                                                       |
+| **`removeTokenFromResponses`** | Set to true if you want to remove the token from the returned authentication API responses such as login or refresh.                                                                                                                                                            |
 | **`strategies`**           | Advanced - an array of custom authentification strategies to extend this collection's authentication with. [More details](./custom-strategies).                                                                         |
 | **`tokenExpiration`**      | How long (in seconds) to keep the user logged in. JWTs and HTTP-only cookies will both expire at the same time.                                                                                                                     |
 | **`useAPIKey`**            | Payload Authentication provides for API keys to be set on each user within an Authentication-enabled Collection. [More details](./api-keys).                                                                       |

docs/configuration/overview.mdx

@@ -71,9 +71,11 @@ The following options are available:
 | **`db`** \*                | The Database Adapter which will be used by Payload. [More details](../database/overview).                                                                                                      |
 | **`serverURL`**            | A string used to define the absolute URL of your app. This includes the protocol, for example `https://example.com`. No paths allowed, only protocol, domain and (optionally) port.            |
 | **`collections`**          | An array of Collections for Payload to manage. [More details](./collections).                                                                                                                  |
+| **`compatibility`**        | Compatibility flags for earlier versions of Payload. [More details](#compatibility-flags).                                                                                                     |
 | **`globals`**              | An array of Globals for Payload to manage. [More details](./globals).                                                                                                                          |
 | **`cors`**                 | Cross-origin resource sharing (CORS) is a mechanism that accept incoming requests from given domains. You can also customize the `Access-Control-Allow-Headers` header. [More details](#cors). |
 | **`localization`**         | Opt-in to translate your content into multiple locales. [More details](./localization).                                                                                                        |
+| **`logger`**               | Logger options, logger options with a destination stream, or an instantiated logger instance. [More details](https://getpino.io/#/docs/api?id=options).                                        |
 | **`graphQL`**              | Manage GraphQL-specific functionality, including custom queries and mutations, query complexity limits, etc. [More details](../graphql/overview#graphql-options).                              |
 | **`cookiePrefix`**         | A string that will be prefixed to all cookies that Payload sets.                                                                                                                               |
 | **`csrf`**                 | A whitelist array of URLs to allow Payload to accept cookies from. [More details](../authentication/overview#csrf-protection).                                                                 |
@@ -253,3 +255,13 @@ import type { Config, SanitizedConfig } from 'payload'
 The Payload Config only lives on the server and is not allowed to contain any client-side code. That way, you can load up the Payload Config in any server environment or standalone script, without having to use Bundlers or Node.js loaders to handle importing client-only modules (e.g. scss files or React Components) without any errors.
 
 Behind the curtains, the Next.js-based Admin Panel generates a ClientConfig, which strips away any server-only code and enriches the config with React Components.
+
+## Compatibility flags
+
+The Payload Config can accept compatibility flags for running the newest versions but with older databases. You should only use these flags if you need to, and should confirm that you need to prior to enabling these flags.
+
+`allowLocalizedWithinLocalized`
+
+Payload localization works on a field-by-field basis. As you can nest fields within other fields, you could potentially nest a localized field within a localized field—but this would be redundant and unnecessary. There would be no reason to define a localized field within a localized parent field, given that the entire data structure from the parent field onward would be localized.
+
+By default, Payload will remove the `localized: true` property from sub-fields if a parent field is localized. Set this compatibility flag to `true` only if you have an existing Payload MongoDB database from pre-3.0, and you have nested localized fields that you would like to maintain without migrating.

docs/database/postgres.mdx

@@ -57,7 +57,6 @@ export default buildConfig({
 | `pool` \*                   | [Pool connection options](https://orm.drizzle.team/docs/quick-postgresql/node-postgres) that will be passed to Drizzle and `node-postgres` or to `@vercel/postgres`              |
 | `push`                      | Disable Drizzle's [`db push`](https://orm.drizzle.team/kit-docs/overview#prototyping-with-db-push) in development mode. By default, `push` is enabled for development mode only. |
 | `migrationDir`              | Customize the directory that migrations are stored.                                                                                                                              |
-| `logger`                    | The instance of the logger to be passed to drizzle. By default Payload's will be used.                                                                                           |
 | `schemaName` (experimental) | A string for the postgres schema to use, defaults to 'public'.                                                                                                                   |
 | `idType`                    | A string of 'serial', or 'uuid' that is used for the data type given to id columns.                                                                                              |
 | `transactionOptions`        | A PgTransactionConfig object for transactions, or set to `false` to disable using transactions. [More details](https://orm.drizzle.team/docs/transactions)                       |

docs/examples/overview.mdx

@@ -11,6 +11,7 @@ Payload provides a vast array of examples to help you get started with your proj
 Examples are changing every day, so be sure to check back often to see what new examples have been added. If you have a specific example you would like to see, please feel free to start a new [Discussion](https://github.com/payloadcms/payload/discussions) or open a new [PR](https://github.com/payloadcms/payload/pulls) to add it yourself.
 
 - [Auth](https://github.com/payloadcms/payload/tree/main/examples/auth)
+- [Custom Components](https://github.com/payloadcms/payload/tree/main/examples/custom-components)
 - [Custom Server](https://github.com/payloadcms/payload/tree/main/examples/custom-server)
 - [Draft Preview](https://github.com/payloadcms/payload/tree/main/examples/draft-preview)
 - [Email](https://github.com/payloadcms/payload/tree/main/examples/email)

docs/fields/rich-text.mdx

@@ -20,7 +20,7 @@ Payload's rich text field is built on an "adapter pattern" which lets you specif
 Right now, Payload is officially supporting two rich text editors:
 
 1. [SlateJS](/docs/rich-text/slate) - stable, backwards-compatible with 1.0
-2. [Lexical](/docs/rich-text/lexical) - beta, where things will be moving
+2. [Lexical](/docs/lexical/overview) - beta, where things will be moving
 
 <Banner type="success">
   <strong>
@@ -82,4 +82,4 @@ The Rich Text Field inherits all of the default options from the base [Field Adm
 
 ## Editor-specific Options
 
-For a ton more editor-specific options, including how to build custom rich text elements directly into your editor, take a look at either the [Slate docs](/docs/rich-text/slate) or the [Lexical docs](/docs/rich-text/lexical) depending on which editor you're using.
+For a ton more editor-specific options, including how to build custom rich text elements directly into your editor, take a look at either the [Slate docs](/docs/rich-text/slate) or the [Lexical docs](/docs/lexical/overview) depending on which editor you're using.

eslint.config.js

@@ -25,13 +25,12 @@ export const defaultESLintIgnores = [
 let FlatConfig
 
 export const rootParserOptions = {
-  EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
-  EXPERIMENTAL_useProjectService: {
-    allowDefaultProjectForFiles: ['./src/*.ts', './src/*.tsx'],
-    maximumDefaultProjectFileMatchCount_THIS_WILL_SLOW_DOWN_LINTING: 100,
-  },
   sourceType: 'module',
   ecmaVersion: 'latest',
+  projectService: {
+    maximumDefaultProjectFileMatchCount_THIS_WILL_SLOW_DOWN_LINTING: 40,
+    allowDefaultProject: ['scripts/*.ts', '*.js', '*.mjs', '*.spec.ts', '*.d.ts'],
+  },
 }
 
 /** @type {FlatConfig[]} */
@@ -40,20 +39,12 @@ export const rootEslintConfig = [
   {
     ignores: [
       ...defaultESLintIgnores,
+      'packages/eslint-*/**',
       'test/live-preview/next-app',
       'packages/**/*.spec.ts',
       'templates/**',
     ],
   },
-  {
-    languageOptions: {
-      parserOptions: {
-        project: './tsconfig.json',
-        tsconfigDirName: import.meta.dirname,
-        ...rootParserOptions,
-      },
-    },
-  },
   {
     plugins: {
       payload: payloadPlugin,
@@ -78,6 +69,15 @@ export const rootEslintConfig = [
 
 export default [
   ...rootEslintConfig,
+  {
+    languageOptions: {
+      parserOptions: {
+        ...rootParserOptions,
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
   {
     files: ['packages/eslint-config/**/*.ts'],
     rules: {

examples/auth/next-app/app/_components/Header/index.module.scss

@@ -15,7 +15,7 @@
   width: 150px;
 }
 
-:global([data-theme="light"]) {
+:global([data-theme='light']) {
   .logo {
     filter: invert(1);
   }

examples/auth/next-app/app/_components/RenderParams/index.tsx

@@ -10,12 +10,12 @@ export const RenderParams: React.FC<{
   className?: string
 }> = ({ params = ['error', 'message', 'success'], message, className }) => {
   const searchParams = useSearchParams()
-  const paramValues = params.map(param => searchParams.get(param)).filter(Boolean)
+  const paramValues = params.map((param) => searchParams.get(param)).filter(Boolean)
 
   if (paramValues.length) {
     return (
       <div className={className}>
-        {paramValues.map(paramValue => (
+        {paramValues.map((paramValue) => (
           <Message
             key={paramValue}
             message={(message || 'PARAM')?.replace('PARAM', paramValue || '')}

examples/auth/next-app/app/_css/app.scss

@@ -1,7 +1,7 @@
 @use './queries.scss' as *;
 @use './colors.scss' as *;
 @use './type.scss' as *;
-@import "./theme.scss";
+@import './theme.scss';
 
 :root {
   --base: 24px;
@@ -88,7 +88,7 @@ p {
   margin: var(--base) 0;
 
   @include mid-break {
-    margin: calc(var(--base) * .75) 0;
+    margin: calc(var(--base) * 0.75) 0;
   }
 }
 
@@ -102,12 +102,12 @@ a {
   color: currentColor;
 
   &:focus {
-    opacity: .8;
+    opacity: 0.8;
     outline: none;
   }
 
   &:active {
-    opacity: .7;
+    opacity: 0.7;
     outline: none;
   }
 }

examples/auth/next-app/app/_providers/Auth/index.tsx

@@ -16,7 +16,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
   const [user, setUser] = useState<User | null>()
 
   const create = useCallback<Create>(
-    async args => {
+    async (args) => {
       if (api === 'rest') {
         const user = await rest(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users`, args)
         setUser(user)
@@ -38,7 +38,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
   )
 
   const login = useCallback<Login>(
-    async args => {
+    async (args) => {
       if (api === 'rest') {
         const user = await rest(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/login`, args)
         setUser(user)
@@ -110,7 +110,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
   }, [api])
 
   const forgotPassword = useCallback<ForgotPassword>(
-    async args => {
+    async (args) => {
       if (api === 'rest') {
         const user = await rest(
           `${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/forgot-password`,
@@ -132,7 +132,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
   )
 
   const resetPassword = useCallback<ResetPassword>(
-    async args => {
+    async (args) => {
       if (api === 'rest') {
         const user = await rest(
           `${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/reset-password`,

examples/auth/next-app/app/account/AccountForm/index.module.scss

@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';
 
 .form {
   margin-bottom: var(--base);

examples/auth/next-app/app/account/AccountForm/index.tsx

@@ -139,7 +139,7 @@ export const AccountForm: React.FC = () => {
             label="Confirm Password"
             required
             register={register}
-            validate={value => value === password.current || 'The passwords do not match'}
+            validate={(value) => value === password.current || 'The passwords do not match'}
             error={errors.passwordConfirm}
           />
         </Fragment>

examples/auth/next-app/app/create-account/CreateAccountForm/index.module.scss

@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';
 
 .form {
   margin-bottom: var(--base);

examples/auth/next-app/app/create-account/CreateAccountForm/index.tsx

@@ -103,7 +103,7 @@ export const CreateAccountForm: React.FC = () => {
         label="Confirm Password"
         required
         register={register}
-        validate={value => value === password.current || 'The passwords do not match'}
+        validate={(value) => value === password.current || 'The passwords do not match'}
         error={errors.passwordConfirm}
       />
       <Button

examples/auth/next-app/app/create-account/index.module.scss

@@ -1,4 +1,4 @@
-@import "../_css/common";
+@import '../_css/common';
 
 .createAccount {
   margin-bottom: var(--block-padding);

examples/auth/next-app/app/login/LoginForm/index.module.scss

@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';
 
 .form {
   margin-bottom: var(--base);

examples/auth/next-app/app/login/index.module.scss

@@ -1,4 +1,4 @@
-@import "../_css/common";
+@import '../_css/common';
 
 .login {
   margin-bottom: var(--block-padding);

examples/auth/next-app/app/logout/LogoutPage/index.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 
 import { useAuth } from '../../_providers/Auth'
 
-export const LogoutPage: React.FC = props => {
+export const LogoutPage: React.FC = (props) => {
   const { logout } = useAuth()
   const [success, setSuccess] = useState('')
   const [error, setError] = useState('')

examples/auth/next-app/app/recover-password/RecoverPasswordForm/index.module.scss

@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';
 
 .error {
   color: red;
@@ -20,4 +20,3 @@
 .message {
   margin-bottom: var(--base);
 }
-

examples/auth/next-app/app/recover-password/index.module.scss

@@ -1,4 +1,4 @@
-@import "../_css/common";
+@import '../_css/common';
 
 .recoverPassword {
   margin-bottom: var(--block-padding);

examples/auth/next-app/app/reset-password/ResetPasswordForm/index.module.scss

@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';
 
 .form {
   width: 66.66%;

examples/auth/next-pages/src/components/Header/index.module.scss

@@ -15,7 +15,7 @@
   width: 150px;
 }
 
-:global([data-theme="light"]) {
+:global([data-theme='light']) {
   .logo {
     filter: invert(1);
   }

examples/auth/next-pages/src/components/RenderParams/index.tsx

@@ -9,12 +9,12 @@ export const RenderParams: React.FC<{
 }> = ({ params = ['error', 'message', 'success'], message, className }) => {
   const router = useRouter()
   const searchParams = new URLSearchParams(router.query as any)
-  const paramValues = params.map(param => searchParams.get(param)).filter(Boolean)
+  const paramValues = params.map((param) => searchParams.get(param)).filter(Boolean)
 
   if (paramValues.length) {
     return (
       <div className={className}>
-        {paramValues.map(paramValue => (
+        {paramValues.map((paramValue) => (
           <Message key={paramValue} message={(message || 'PARAM')?.replace('PARAM', paramValue)} />
         ))}
       </div>

examples/auth/next-pages/src/css/app.scss

@@ -1,7 +1,7 @@
 @use './queries.scss' as *;
 @use './colors.scss' as *;
 @use './type.scss' as *;
-@import "./theme.scss";
+@import './theme.scss';
 
 :root {
   --base: 24px;
@@ -88,7 +88,7 @@ p {
   margin: var(--base) 0;
 
   @include mid-break {
-    margin: calc(var(--base) * .75) 0;
+    margin: calc(var(--base) * 0.75) 0;
   }
 }
 
@@ -102,12 +102,12 @@ a {
   color: currentColor;
 
   &:focus {
-    opacity: .8;
+    opacity: 0.8;
     outline: none;
   }
 
   &:active {
-    opacity: .7;
+    opacity: 0.7;
     outline: none;
   }
 }

examples/auth/next-pages/src/pages/account/index.module.scss

@@ -1,4 +1,4 @@
-@import "../../css/common";
+@import '../../css/common';
 
 .account {
   margin-bottom: var(--block-padding);

examples/auth/next-pages/src/pages/account/index.tsx

@@ -150,7 +150,7 @@ const Account: React.FC = () => {
               label="Confirm Password"
               required
               register={register}
-              validate={value => value === password.current || 'The passwords do not match'}
+              validate={(value) => value === password.current || 'The passwords do not match'}
               error={errors.passwordConfirm}
             />
           </Fragment>

examples/auth/next-pages/src/pages/create-account/index.module.scss

@@ -1,4 +1,4 @@
-@import "../../css/common";
+@import '../../css/common';
 
 .createAccount {
   margin-bottom: var(--block-padding);

examples/auth/next-pages/src/pages/create-account/index.tsx

@@ -106,7 +106,7 @@ const CreateAccount: React.FC = () => {
           label="Confirm Password"
           required
           register={register}
-          validate={value => value === password.current || 'The passwords do not match'}
+          validate={(value) => value === password.current || 'The passwords do not match'}
           error={errors.passwordConfirm}
         />
         <Button

examples/auth/next-pages/src/pages/login/index.module.scss

@@ -1,4 +1,4 @@
-@import "../../css/common";
+@import '../../css/common';
 
 .login {
   margin-bottom: var(--block-padding);

examples/auth/next-pages/src/pages/recover-password/index.module.scss

@@ -1,4 +1,4 @@
-@import "../../css/common";
+@import '../../css/common';
 
 .recoverPassword {
   margin-bottom: var(--block-padding);
@@ -24,4 +24,3 @@
 .message {
   margin-bottom: var(--base);
 }
-

examples/auth/next-pages/src/pages/reset-password/index.module.scss

@@ -1,4 +1,4 @@
-@import "../../css/common";
+@import '../../css/common';
 
 .resetPassword {
   margin-bottom: var(--block-padding);

examples/auth/next-pages/src/providers/Auth/index.tsx

@@ -14,7 +14,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
   const [user, setUser] = useState<User | null>()
 
   const create = useCallback<Create>(
-    async args => {
+    async (args) => {
       if (api === 'rest') {
         const user = await rest(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users`, args)
         setUser(user)
@@ -36,7 +36,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
   )
 
   const login = useCallback<Login>(
-    async args => {
+    async (args) => {
       if (api === 'rest') {
         const user = await rest(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/login`, args)
         setUser(user)
@@ -108,7 +108,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
   }, [api])
 
   const forgotPassword = useCallback<ForgotPassword>(
-    async args => {
+    async (args) => {
       if (api === 'rest') {
         const user = await rest(
           `${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/forgot-password`,
@@ -130,7 +130,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
   )
 
   const resetPassword = useCallback<ResetPassword>(
-    async args => {
+    async (args) => {
       if (api === 'rest') {
         const user = await rest(
           `${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/reset-password`,

examples/auth/payload/src/app/(app)/_components/Button/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { ElementType } from 'react';
+import type { ElementType } from 'react'
 
 import Link from 'next/link'
 import React from 'react'

examples/auth/payload/src/app/(app)/_components/Gutter/index.tsx

@@ -1,4 +1,4 @@
-import type { Ref } from 'react';
+import type { Ref } from 'react'
 
 import React, { forwardRef } from 'react'
 

examples/auth/payload/src/app/(app)/_components/Header/index.module.scss

@@ -15,7 +15,7 @@
   width: 150px;
 }
 
-:global([data-theme="light"]) {
+:global([data-theme='light']) {
   .logo {
     filter: invert(1);
   }

examples/auth/payload/src/app/(app)/_components/RenderParams/index.tsx

@@ -10,12 +10,12 @@ export const RenderParams: React.FC<{
   params?: string[]
 }> = ({ className, message, params = ['error', 'message', 'success'] }) => {
   const searchParams = useSearchParams()
-  const paramValues = params.map(param => searchParams.get(param)).filter(Boolean)
+  const paramValues = params.map((param) => searchParams.get(param)).filter(Boolean)
 
   if (paramValues.length) {
     return (
       <div className={className}>
-        {paramValues.map(paramValue => (
+        {paramValues.map((paramValue) => (
           <Message
             key={paramValue}
             message={(message || 'PARAM')?.replace('PARAM', paramValue || '')}

examples/auth/payload/src/app/(app)/account/AccountForm/index.module.scss

@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';
 
 .form {
   margin-bottom: var(--base);

examples/auth/payload/src/app/(app)/account/AccountForm/index.tsx

@@ -136,7 +136,7 @@ export const AccountForm: React.FC = () => {
             register={register}
             required
             type="password"
-            validate={value => value === password.current || 'The passwords do not match'}
+            validate={(value) => value === password.current || 'The passwords do not match'}
           />
         </Fragment>
       )}

examples/auth/payload/src/app/(app)/create-account/CreateAccountForm/index.module.scss

@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';
 
 .form {
   margin-bottom: var(--base);

examples/auth/payload/src/app/(app)/create-account/CreateAccountForm/index.tsx

@@ -103,7 +103,7 @@ export const CreateAccountForm: React.FC = () => {
         register={register}
         required
         type="password"
-        validate={value => value === password.current || 'The passwords do not match'}
+        validate={(value) => value === password.current || 'The passwords do not match'}
       />
       <Button
         appearance="primary"

examples/auth/payload/src/app/(app)/create-account/index.module.scss

@@ -1,4 +1,4 @@
-@import "../_css/common";
+@import '../_css/common';
 
 .createAccount {
   margin-bottom: var(--block-padding);

examples/auth/payload/src/app/(app)/login/LoginForm/index.module.scss

@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';
 
 .form {
   margin-bottom: var(--base);

examples/auth/payload/src/app/(app)/login/index.module.scss

@@ -1,4 +1,4 @@
-@import "../_css/common";
+@import '../_css/common';
 
 .login {
   margin-bottom: var(--block-padding);

examples/auth/payload/src/app/(app)/recover-password/RecoverPasswordForm/index.module.scss

@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';
 
 .error {
   color: red;
@@ -20,4 +20,3 @@
 .message {
   margin-bottom: var(--base);
 }
-

examples/auth/payload/src/app/(app)/recover-password/index.module.scss

@@ -1,4 +1,4 @@
-@import "../_css/common";
+@import '../_css/common';
 
 .recoverPassword {
   margin-bottom: var(--block-padding);

examples/auth/payload/src/app/(app)/reset-password/ResetPasswordForm/index.module.scss

@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';
 
 .form {
   width: 66.66%;

examples/auth/payload/src/collections/access/checkRole.ts

@@ -3,8 +3,8 @@ import type { User } from '../../payload-types'
 export const checkRole = (allRoles: User['roles'] = [], user: User = undefined): boolean => {
   if (user) {
     if (
-      allRoles.some(role => {
-        return user?.roles?.some(individualRole => {
+      allRoles.some((role) => {
+        return user?.roles?.some((individualRole) => {
           return individualRole === role
         })
       })

examples/custom-components/.env.example

@@ -0,0 +1,3 @@
+DATABASE_URI=mongodb://127.0.0.1/payload-example-custom-fields
+PAYLOAD_SECRET=PAYLOAD_CUSTOM_FIELDS_EXAMPLE_SECRET_KEY
+PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000

examples/custom-components/.eslintrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['@payloadcms'],
+}

examples/custom-components/.gitignore

@@ -0,0 +1,5 @@
+build
+dist
+node_modules
+package-lock.json
+.env

examples/custom-components/.swcrc

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "sourceMaps": true,
+  "jsc": {
+    "target": "esnext",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "dts": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": true
+      }
+    }
+  },
+  "module": {
+    "type": "es6"
+  }
+}

examples/custom-components/README.md

@@ -0,0 +1,46 @@
+# Payload Custom Components Example
+
+This example demonstrates how to use Custom Components in [Payload](https://github.com/payloadcms/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:
+
+1. Clone this repo
+1. `cd` into this directory and run `pnpm i --ignore-workspace`\*, `yarn`, or `npm install`
+
+   > \*If you are running using pnpm within the Payload Monorepo, the `--ignore-workspace` flag is needed so that pnpm generates a lockfile in this example's directory despite the fact that one exists in root.
+
+1. `pnpm dev`, `yarn dev` or `npm run dev` to start the server
+   - Press `y` when prompted to seed the database
+1. `open http://localhost:3000` to access the home page
+1. `open http://localhost:3000/admin` to access the admin panel
+   - Login with email `demo@payloadcms.com` and password `demo`
+
+## How it works
+
+### Collections
+
+See the [Collections](https://payloadcms.com/docs/configuration/collections) docs for details on how to extend any of this functionality.
+
+- #### Users
+
+  The `users` collection is auth-enabled which provides access to the admin panel.
+
+  For additional help with authentication, see the official [Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth/cms#readme) or the [Authentication](https://payloadcms.com/docs/authentication/overview#authentication-overview) docs.
+
+- #### Fields
+
+  The `fields` collection 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 `views` collection demonstrates how to add collection-level views, including the default view and custom tabs.
+
+- #### Root Views
+
+  The `root-views` collection 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](https://discord.com/invite/payload) or start a [GitHub discussion](https://github.com/payloadcms/payload/discussions).

examples/custom-components/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/custom-components/next.config.mjs

@@ -0,0 +1,8 @@
+import { withPayload } from '@payloadcms/next/withPayload'
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Your Next.js config here
+}
+
+export default withPayload(nextConfig)

examples/custom-components/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "payload-example-custom-fields",
+  "version": "1.0.0",
+  "description": "An example of custom fields in Payload.",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "_dev": "cross-env NODE_OPTIONS=--no-deprecation && pnpm generate:importmap && next dev",
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation && pnpm generate:importmap && pnpm seed && next dev --turbo",
+    "generate:importmap": "payload generate:importmap",
+    "generate:schema": "payload-graphql generate:schema",
+    "generate:types": "payload generate:types",
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "seed": "npm run payload migrate:fresh",
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
+  },
+  "dependencies": {
+    "@payloadcms/db-mongodb": "3.0.0-beta.102",
+    "@payloadcms/next": "3.0.0-beta.102",
+    "@payloadcms/richtext-lexical": "3.0.0-beta.102",
+    "@payloadcms/ui": "3.0.0-beta.102",
+    "cross-env": "^7.0.3",
+    "dotenv": "^8.2.0",
+    "graphql": "^16.9.0",
+    "next": "15.0.0-canary.104",
+    "payload": "3.0.0-beta.102",
+    "react": "19.0.0-rc-06d0b89e-20240801",
+    "react-dom": "19.0.0-rc-06d0b89e-20240801"
+  },
+  "devDependencies": {
+    "@payloadcms/graphql": "3.0.0-beta.102",
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "15.0.0-canary.146",
+    "tsx": "^4.7.1",
+    "typescript": "5.5.2"
+  },
+  "engines": {
+    "node": "^18.20.2 || >=20.9.0"
+  }
+}

examples/custom-components/src/app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -0,0 +1,25 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import type { Metadata } from 'next'
+
+import config from '@payload-config'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { generatePageMetadata, NotFoundPage } from '@payloadcms/next/views'
+
+import { importMap } from '../importMap.js'
+
+type Args = {
+  params: {
+    segments: string[]
+  }
+  searchParams: {
+    [key: string]: string | string[]
+  }
+}
+
+export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams })
+
+const NotFound = ({ params, searchParams }: Args) =>
+  NotFoundPage({ config, importMap, params, searchParams })
+
+export default NotFound

examples/custom-components/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -0,0 +1,25 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import type { Metadata } from 'next'
+
+import config from '@payload-config'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { generatePageMetadata, RootPage } from '@payloadcms/next/views'
+
+import { importMap } from '../importMap.js'
+
+type Args = {
+  params: {
+    segments: string[]
+  }
+  searchParams: {
+    [key: string]: string | string[]
+  }
+}
+
+export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams })
+
+const Page = ({ params, searchParams }: Args) =>
+  RootPage({ config, importMap, params, searchParams })
+
+export default Page

examples/custom-components/src/app/(payload)/admin/importMap.js

@@ -0,0 +1,162 @@
+import { CustomArrayFieldLabelServer as CustomArrayFieldLabelServer_0 } from '@/collections/Fields/array/components/server/Label'
+import { CustomArrayFieldServer as CustomArrayFieldServer_1 } from '@/collections/Fields/array/components/server/Field'
+import { CustomArrayFieldLabelClient as CustomArrayFieldLabelClient_2 } from '@/collections/Fields/array/components/client/Label'
+import { CustomArrayFieldClient as CustomArrayFieldClient_3 } from '@/collections/Fields/array/components/client/Field'
+import { CustomBlocksFieldServer as CustomBlocksFieldServer_4 } from '@/collections/Fields/blocks/components/server/Field'
+import { CustomBlocksFieldClient as CustomBlocksFieldClient_5 } from '@/collections/Fields/blocks/components/client/Field'
+import { CustomCheckboxFieldLabelServer as CustomCheckboxFieldLabelServer_6 } from '@/collections/Fields/checkbox/components/server/Label'
+import { CustomCheckboxFieldServer as CustomCheckboxFieldServer_7 } from '@/collections/Fields/checkbox/components/server/Field'
+import { CustomCheckboxFieldLabelClient as CustomCheckboxFieldLabelClient_8 } from '@/collections/Fields/checkbox/components/client/Label'
+import { CustomCheckboxFieldClient as CustomCheckboxFieldClient_9 } from '@/collections/Fields/checkbox/components/client/Field'
+import { CustomDateFieldLabelServer as CustomDateFieldLabelServer_10 } from '@/collections/Fields/date/components/server/Label'
+import { CustomDateFieldServer as CustomDateFieldServer_11 } from '@/collections/Fields/date/components/server/Field'
+import { CustomDateFieldLabelClient as CustomDateFieldLabelClient_12 } from '@/collections/Fields/date/components/client/Label'
+import { CustomDateFieldClient as CustomDateFieldClient_13 } from '@/collections/Fields/date/components/client/Field'
+import { CustomEmailFieldLabelServer as CustomEmailFieldLabelServer_14 } from '@/collections/Fields/email/components/server/Label'
+import { CustomEmailFieldServer as CustomEmailFieldServer_15 } from '@/collections/Fields/email/components/server/Field'
+import { CustomEmailFieldLabelClient as CustomEmailFieldLabelClient_16 } from '@/collections/Fields/email/components/client/Label'
+import { CustomEmailFieldClient as CustomEmailFieldClient_17 } from '@/collections/Fields/email/components/client/Field'
+import { CustomNumberFieldLabelServer as CustomNumberFieldLabelServer_18 } from '@/collections/Fields/number/components/server/Label'
+import { CustomNumberFieldServer as CustomNumberFieldServer_19 } from '@/collections/Fields/number/components/server/Field'
+import { CustomNumberFieldLabelClient as CustomNumberFieldLabelClient_20 } from '@/collections/Fields/number/components/client/Label'
+import { CustomNumberFieldClient as CustomNumberFieldClient_21 } from '@/collections/Fields/number/components/client/Field'
+import { CustomPointFieldLabelServer as CustomPointFieldLabelServer_22 } from '@/collections/Fields/point/components/server/Label'
+import { CustomPointFieldServer as CustomPointFieldServer_23 } from '@/collections/Fields/point/components/server/Field'
+import { CustomPointFieldLabelClient as CustomPointFieldLabelClient_24 } from '@/collections/Fields/point/components/client/Label'
+import { CustomPointFieldClient as CustomPointFieldClient_25 } from '@/collections/Fields/point/components/client/Field'
+import { CustomRadioFieldLabelServer as CustomRadioFieldLabelServer_26 } from '@/collections/Fields/radio/components/server/Label'
+import { CustomRadioFieldServer as CustomRadioFieldServer_27 } from '@/collections/Fields/radio/components/server/Field'
+import { CustomRadioFieldLabelClient as CustomRadioFieldLabelClient_28 } from '@/collections/Fields/radio/components/client/Label'
+import { CustomRadioFieldClient as CustomRadioFieldClient_29 } from '@/collections/Fields/radio/components/client/Field'
+import { CustomRelationshipFieldLabelServer as CustomRelationshipFieldLabelServer_30 } from '@/collections/Fields/relationship/components/server/Label'
+import { CustomRelationshipFieldServer as CustomRelationshipFieldServer_31 } from '@/collections/Fields/relationship/components/server/Field'
+import { CustomRelationshipFieldLabelClient as CustomRelationshipFieldLabelClient_32 } from '@/collections/Fields/relationship/components/client/Label'
+import { CustomRelationshipFieldClient as CustomRelationshipFieldClient_33 } from '@/collections/Fields/relationship/components/client/Field'
+import { CustomSelectFieldLabelServer as CustomSelectFieldLabelServer_34 } from '@/collections/Fields/select/components/server/Label'
+import { CustomSelectFieldServer as CustomSelectFieldServer_35 } from '@/collections/Fields/select/components/server/Field'
+import { CustomSelectFieldLabelClient as CustomSelectFieldLabelClient_36 } from '@/collections/Fields/select/components/client/Label'
+import { CustomSelectFieldClient as CustomSelectFieldClient_37 } from '@/collections/Fields/select/components/client/Field'
+import { CustomTextFieldLabelServer as CustomTextFieldLabelServer_38 } from '@/collections/Fields/text/components/server/Label'
+import { CustomTextFieldServer as CustomTextFieldServer_39 } from '@/collections/Fields/text/components/server/Field'
+import { CustomTextFieldLabelClient as CustomTextFieldLabelClient_40 } from '@/collections/Fields/text/components/client/Label'
+import { CustomTextFieldClient as CustomTextFieldClient_41 } from '@/collections/Fields/text/components/client/Field'
+import { CustomTextareaFieldLabelServer as CustomTextareaFieldLabelServer_42 } from '@/collections/Fields/textarea/components/server/Label'
+import { CustomTextareaFieldServer as CustomTextareaFieldServer_43 } from '@/collections/Fields/textarea/components/server/Field'
+import { CustomTextareaFieldLabelClient as CustomTextareaFieldLabelClient_44 } from '@/collections/Fields/textarea/components/client/Label'
+import { CustomTextareaFieldClient as CustomTextareaFieldClient_45 } from '@/collections/Fields/textarea/components/client/Field'
+import { CustomTabEditView as CustomTabEditView_46 } from '@/collections/Views/components/CustomTabEditView'
+import { CustomDefaultEditView as CustomDefaultEditView_47 } from '@/collections/Views/components/CustomDefaultEditView'
+import { CustomRootEditView as CustomRootEditView_48 } from '@/collections/RootViews/components/CustomRootEditView'
+import { LinkToCustomView as LinkToCustomView_49 } from '@/components/afterNavLinks/LinkToCustomView'
+import { LinkToCustomMinimalView as LinkToCustomMinimalView_50 } from '@/components/afterNavLinks/LinkToCustomMinimalView'
+import { LinkToCustomDefaultView as LinkToCustomDefaultView_51 } from '@/components/afterNavLinks/LinkToCustomDefaultView'
+import { CustomRootView as CustomRootView_52 } from '@/components/views/CustomRootView'
+import { CustomDefaultRootView as CustomDefaultRootView_53 } from '@/components/views/CustomDefaultRootView'
+import { CustomMinimalRootView as CustomMinimalRootView_54 } from '@/components/views/CustomMinimalRootView'
+
+export const importMap = {
+  '@/collections/Fields/array/components/server/Label#CustomArrayFieldLabelServer':
+    CustomArrayFieldLabelServer_0,
+  '@/collections/Fields/array/components/server/Field#CustomArrayFieldServer':
+    CustomArrayFieldServer_1,
+  '@/collections/Fields/array/components/client/Label#CustomArrayFieldLabelClient':
+    CustomArrayFieldLabelClient_2,
+  '@/collections/Fields/array/components/client/Field#CustomArrayFieldClient':
+    CustomArrayFieldClient_3,
+  '@/collections/Fields/blocks/components/server/Field#CustomBlocksFieldServer':
+    CustomBlocksFieldServer_4,
+  '@/collections/Fields/blocks/components/client/Field#CustomBlocksFieldClient':
+    CustomBlocksFieldClient_5,
+  '@/collections/Fields/checkbox/components/server/Label#CustomCheckboxFieldLabelServer':
+    CustomCheckboxFieldLabelServer_6,
+  '@/collections/Fields/checkbox/components/server/Field#CustomCheckboxFieldServer':
+    CustomCheckboxFieldServer_7,
+  '@/collections/Fields/checkbox/components/client/Label#CustomCheckboxFieldLabelClient':
+    CustomCheckboxFieldLabelClient_8,
+  '@/collections/Fields/checkbox/components/client/Field#CustomCheckboxFieldClient':
+    CustomCheckboxFieldClient_9,
+  '@/collections/Fields/date/components/server/Label#CustomDateFieldLabelServer':
+    CustomDateFieldLabelServer_10,
+  '@/collections/Fields/date/components/server/Field#CustomDateFieldServer':
+    CustomDateFieldServer_11,
+  '@/collections/Fields/date/components/client/Label#CustomDateFieldLabelClient':
+    CustomDateFieldLabelClient_12,
+  '@/collections/Fields/date/components/client/Field#CustomDateFieldClient':
+    CustomDateFieldClient_13,
+  '@/collections/Fields/email/components/server/Label#CustomEmailFieldLabelServer':
+    CustomEmailFieldLabelServer_14,
+  '@/collections/Fields/email/components/server/Field#CustomEmailFieldServer':
+    CustomEmailFieldServer_15,
+  '@/collections/Fields/email/components/client/Label#CustomEmailFieldLabelClient':
+    CustomEmailFieldLabelClient_16,
+  '@/collections/Fields/email/components/client/Field#CustomEmailFieldClient':
+    CustomEmailFieldClient_17,
+  '@/collections/Fields/number/components/server/Label#CustomNumberFieldLabelServer':
+    CustomNumberFieldLabelServer_18,
+  '@/collections/Fields/number/components/server/Field#CustomNumberFieldServer':
+    CustomNumberFieldServer_19,
+  '@/collections/Fields/number/components/client/Label#CustomNumberFieldLabelClient':
+    CustomNumberFieldLabelClient_20,
+  '@/collections/Fields/number/components/client/Field#CustomNumberFieldClient':
+    CustomNumberFieldClient_21,
+  '@/collections/Fields/point/components/server/Label#CustomPointFieldLabelServer':
+    CustomPointFieldLabelServer_22,
+  '@/collections/Fields/point/components/server/Field#CustomPointFieldServer':
+    CustomPointFieldServer_23,
+  '@/collections/Fields/point/components/client/Label#CustomPointFieldLabelClient':
+    CustomPointFieldLabelClient_24,
+  '@/collections/Fields/point/components/client/Field#CustomPointFieldClient':
+    CustomPointFieldClient_25,
+  '@/collections/Fields/radio/components/server/Label#CustomRadioFieldLabelServer':
+    CustomRadioFieldLabelServer_26,
+  '@/collections/Fields/radio/components/server/Field#CustomRadioFieldServer':
+    CustomRadioFieldServer_27,
+  '@/collections/Fields/radio/components/client/Label#CustomRadioFieldLabelClient':
+    CustomRadioFieldLabelClient_28,
+  '@/collections/Fields/radio/components/client/Field#CustomRadioFieldClient':
+    CustomRadioFieldClient_29,
+  '@/collections/Fields/relationship/components/server/Label#CustomRelationshipFieldLabelServer':
+    CustomRelationshipFieldLabelServer_30,
+  '@/collections/Fields/relationship/components/server/Field#CustomRelationshipFieldServer':
+    CustomRelationshipFieldServer_31,
+  '@/collections/Fields/relationship/components/client/Label#CustomRelationshipFieldLabelClient':
+    CustomRelationshipFieldLabelClient_32,
+  '@/collections/Fields/relationship/components/client/Field#CustomRelationshipFieldClient':
+    CustomRelationshipFieldClient_33,
+  '@/collections/Fields/select/components/server/Label#CustomSelectFieldLabelServer':
+    CustomSelectFieldLabelServer_34,
+  '@/collections/Fields/select/components/server/Field#CustomSelectFieldServer':
+    CustomSelectFieldServer_35,
+  '@/collections/Fields/select/components/client/Label#CustomSelectFieldLabelClient':
+    CustomSelectFieldLabelClient_36,
+  '@/collections/Fields/select/components/client/Field#CustomSelectFieldClient':
+    CustomSelectFieldClient_37,
+  '@/collections/Fields/text/components/server/Label#CustomTextFieldLabelServer':
+    CustomTextFieldLabelServer_38,
+  '@/collections/Fields/text/components/server/Field#CustomTextFieldServer':
+    CustomTextFieldServer_39,
+  '@/collections/Fields/text/components/client/Label#CustomTextFieldLabelClient':
+    CustomTextFieldLabelClient_40,
+  '@/collections/Fields/text/components/client/Field#CustomTextFieldClient':
+    CustomTextFieldClient_41,
+  '@/collections/Fields/textarea/components/server/Label#CustomTextareaFieldLabelServer':
+    CustomTextareaFieldLabelServer_42,
+  '@/collections/Fields/textarea/components/server/Field#CustomTextareaFieldServer':
+    CustomTextareaFieldServer_43,
+  '@/collections/Fields/textarea/components/client/Label#CustomTextareaFieldLabelClient':
+    CustomTextareaFieldLabelClient_44,
+  '@/collections/Fields/textarea/components/client/Field#CustomTextareaFieldClient':
+    CustomTextareaFieldClient_45,
+  '@/collections/Views/components/CustomTabEditView#CustomTabEditView': CustomTabEditView_46,
+  '@/collections/Views/components/CustomDefaultEditView#CustomDefaultEditView':
+    CustomDefaultEditView_47,
+  '@/collections/RootViews/components/CustomRootEditView#CustomRootEditView': CustomRootEditView_48,
+  '@/components/afterNavLinks/LinkToCustomView#LinkToCustomView': LinkToCustomView_49,
+  '@/components/afterNavLinks/LinkToCustomMinimalView#LinkToCustomMinimalView':
+    LinkToCustomMinimalView_50,
+  '@/components/afterNavLinks/LinkToCustomDefaultView#LinkToCustomDefaultView':
+    LinkToCustomDefaultView_51,
+  '@/components/views/CustomRootView#CustomRootView': CustomRootView_52,
+  '@/components/views/CustomDefaultRootView#CustomDefaultRootView': CustomDefaultRootView_53,
+  '@/components/views/CustomMinimalRootView#CustomMinimalRootView': CustomMinimalRootView_54,
+}

examples/custom-components/src/app/(payload)/api/[...slug]/route.ts

@@ -0,0 +1,10 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)
+export const OPTIONS = REST_OPTIONS(config)

examples/custom-components/src/app/(payload)/api/graphql-playground/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)

examples/custom-components/src/app/(payload)/api/graphql/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_POST } from '@payloadcms/next/routes'
+
+export const POST = GRAPHQL_POST(config)

examples/custom-components/src/app/(payload)/layout.tsx

@@ -0,0 +1,21 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import configPromise from '@payload-config'
+import '@payloadcms/next/css'
+import { RootLayout } from '@payloadcms/next/layouts'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+
+import { importMap } from './admin/importMap.js'
+import './custom.scss'
+
+type Args = {
+  children: React.ReactNode
+}
+
+const Layout = ({ children }: Args) => (
+  <RootLayout config={configPromise} importMap={importMap}>
+    {children}
+  </RootLayout>
+)
+
+export default Layout

examples/custom-components/src/collections/Fields/Text/components/client/Field.tsx

@@ -0,0 +1,11 @@
+'use client'
+import type { TextFieldClientComponent } from 'payload'
+
+import { TextField } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomTextFieldClient: TextFieldClientComponent = (props) => {
+  const { field } = props
+
+  return <TextField field={field} />
+}

examples/custom-components/src/collections/Fields/Text/components/client/Label.tsx

@@ -0,0 +1,11 @@
+'use client'
+import type { TextFieldLabelClientComponent } from 'payload'
+
+import { FieldLabel } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomTextFieldLabelClient: TextFieldLabelClientComponent = (props) => {
+  const { field, label } = props
+
+  return <FieldLabel field={field} label={label} />
+}

examples/custom-components/src/collections/Fields/Text/components/server/Field.tsx

@@ -0,0 +1,15 @@
+import type { TextFieldServerComponent } from 'payload'
+
+// import { TextField } from '@payloadcms/ui'
+// import { createClientField } from '@payloadcms/ui/shared'
+import type React from 'react'
+
+export const CustomTextFieldServer: TextFieldServerComponent = (props) => {
+  const { field } = props
+
+  // const clientField = createClientField(field)
+
+  // return <TextField field={clientField} />
+
+  return 'This is a server component for the text field.'
+}

examples/custom-components/src/collections/Fields/Text/components/server/Label.tsx

@@ -0,0 +1,12 @@
+import type { TextFieldLabelServerComponent } from 'payload'
+
+import { FieldLabel } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomTextFieldLabelServer: TextFieldLabelServerComponent = (props) => {
+  const { field } = props
+
+  // return <FieldLabel field={field} />
+
+  return 'This is a server component for the text field label.'
+}

examples/custom-components/src/collections/Fields/Text/index.ts

@@ -0,0 +1,24 @@
+import type { CollectionConfig } from 'payload'
+
+export const textFields: CollectionConfig['fields'] = [
+  {
+    name: 'textFieldServerComponent',
+    type: 'text',
+    admin: {
+      components: {
+        Field: '@/collections/Fields/text/components/server/Field#CustomTextFieldServer',
+        Label: '@/collections/Fields/text/components/server/Label#CustomTextFieldLabelServer',
+      },
+    },
+  },
+  {
+    name: 'textFieldClientComponent',
+    type: 'text',
+    admin: {
+      components: {
+        Field: '@/collections/Fields/text/components/client/Field#CustomTextFieldClient',
+        Label: '@/collections/Fields/text/components/client/Label#CustomTextFieldLabelClient',
+      },
+    },
+  },
+]

examples/custom-components/src/collections/Fields/Textarea/components/client/Field.tsx

@@ -0,0 +1,11 @@
+'use client'
+import type { TextareaFieldClientComponent } from 'payload'
+
+import { TextareaField } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomTextareaFieldClient: TextareaFieldClientComponent = (props) => {
+  const { field } = props
+
+  return <TextareaField field={field} />
+}

examples/custom-components/src/collections/Fields/Textarea/components/client/Label.tsx

@@ -0,0 +1,11 @@
+'use client'
+import type { TextareaFieldLabelClientComponent } from 'payload'
+
+import { FieldLabel } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomTextareaFieldLabelClient: TextareaFieldLabelClientComponent = (props) => {
+  const { field, label } = props
+
+  return <FieldLabel field={field} label={label} />
+}

examples/custom-components/src/collections/Fields/Textarea/components/server/Field.tsx

@@ -0,0 +1,15 @@
+import type { TextareaFieldServerComponent } from 'payload'
+
+// import { TextareaField } from '@payloadcms/ui'
+// import { createClientField } from '@payloadcms/ui/shared'
+import type React from 'react'
+
+export const CustomTextareaFieldServer: TextareaFieldServerComponent = (props) => {
+  const { field } = props
+
+  // const clientField = createClientField(field)
+
+  // return <TextareaField field={clientField} />
+
+  return 'This is a server component for the textarea field.'
+}

examples/custom-components/src/collections/Fields/Textarea/components/server/Label.tsx

@@ -0,0 +1,12 @@
+import type { TextareaFieldLabelServerComponent } from 'payload'
+
+import { FieldLabel } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomTextareaFieldLabelServer: TextareaFieldLabelServerComponent = (props) => {
+  const { field } = props
+
+  // return <FieldLabel field={field} />
+
+  return 'This is a server component for the textarea field label.'
+}

examples/custom-components/src/collections/Fields/Textarea/index.ts

@@ -0,0 +1,26 @@
+import type { CollectionConfig } from 'payload'
+
+export const textareaFields: CollectionConfig['fields'] = [
+  {
+    name: 'textareaFieldServerComponent',
+    type: 'textarea',
+    admin: {
+      components: {
+        Field: '@/collections/Fields/textarea/components/server/Field#CustomTextareaFieldServer',
+        Label:
+          '@/collections/Fields/textarea/components/server/Label#CustomTextareaFieldLabelServer',
+      },
+    },
+  },
+  {
+    name: 'textareaFieldClientComponent',
+    type: 'textarea',
+    admin: {
+      components: {
+        Field: '@/collections/Fields/textarea/components/client/Field#CustomTextareaFieldClient',
+        Label:
+          '@/collections/Fields/textarea/components/client/Label#CustomTextareaFieldLabelClient',
+      },
+    },
+  },
+]

examples/custom-components/src/collections/Fields/array/components/client/Field.tsx

@@ -0,0 +1,11 @@
+'use client'
+import type { ArrayFieldClientComponent } from 'payload'
+
+import { ArrayField } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomArrayFieldClient: ArrayFieldClientComponent = (props) => {
+  const { field } = props
+
+  return <ArrayField field={field} />
+}

examples/custom-components/src/collections/Fields/array/components/client/Label.tsx

@@ -0,0 +1,11 @@
+'use client'
+import type { ArrayFieldLabelClientComponent } from 'payload'
+
+import { FieldLabel } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomArrayFieldLabelClient: ArrayFieldLabelClientComponent = (props) => {
+  const { field, label } = props
+
+  return <FieldLabel field={field} label={label} />
+}

examples/custom-components/src/collections/Fields/array/components/server/Field.tsx

@@ -0,0 +1,15 @@
+import type { ArrayFieldServerComponent } from 'payload'
+
+// import { ArrayField } from '@payloadcms/ui'
+// import { createClientField } from '@payloadcms/ui/shared'
+import type React from 'react'
+
+export const CustomArrayFieldServer: ArrayFieldServerComponent = (props) => {
+  const { field } = props
+
+  // const clientField = createClientField(field)
+
+  // return <ArrayField field={clientField} />
+
+  return 'This is a server component for the array field.'
+}

examples/custom-components/src/collections/Fields/array/components/server/Label.tsx

@@ -0,0 +1,12 @@
+import type { ArrayFieldLabelServerComponent } from 'payload'
+
+import { FieldLabel } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomArrayFieldLabelServer: ArrayFieldLabelServerComponent = (props) => {
+  const { field } = props
+
+  // return <FieldLabel field={field} />
+
+  return 'This is a server component for the array field label.'
+}

examples/custom-components/src/collections/Fields/array/index.ts

@@ -0,0 +1,38 @@
+import type { CollectionConfig } from 'payload'
+
+export const arrayFields: CollectionConfig['fields'] = [
+  {
+    name: 'arrayFieldServerComponent',
+    type: 'array',
+    admin: {
+      components: {
+        Field: '@/collections/Fields/array/components/server/Field#CustomArrayFieldServer',
+        Label: '@/collections/Fields/array/components/server/Label#CustomArrayFieldLabelServer',
+      },
+    },
+    fields: [
+      {
+        name: 'title',
+        type: 'text',
+        label: 'Title',
+      },
+    ],
+  },
+  {
+    name: 'arrayFieldClientComponent',
+    type: 'array',
+    admin: {
+      components: {
+        Field: '@/collections/Fields/array/components/client/Field#CustomArrayFieldClient',
+        Label: '@/collections/Fields/array/components/client/Label#CustomArrayFieldLabelClient',
+      },
+    },
+    fields: [
+      {
+        name: 'title',
+        type: 'text',
+        label: 'Title',
+      },
+    ],
+  },
+]

examples/custom-components/src/collections/Fields/blocks/components/client/Field.tsx

@@ -0,0 +1,11 @@
+'use client'
+import type { BlocksFieldClientComponent } from 'payload'
+
+import { BlocksField } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomBlocksFieldClient: BlocksFieldClientComponent = (props) => {
+  const { field } = props
+
+  return <BlocksField field={field} />
+}

examples/custom-components/src/collections/Fields/blocks/components/client/Label.tsx

@@ -0,0 +1,11 @@
+'use client'
+import type { BlocksFieldLabelClientComponent } from 'payload'
+
+import { FieldLabel } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomBlocksFieldLabelClient: BlocksFieldLabelClientComponent = (props) => {
+  const { field, label } = props
+
+  return <FieldLabel field={field} label={label} />
+}

examples/custom-components/src/collections/Fields/blocks/components/server/Field.tsx

@@ -0,0 +1,15 @@
+import type { BlocksFieldServerComponent } from 'payload'
+
+// import { BlocksField } from '@payloadcms/ui'
+// import { createClientField } from '@payloadcms/ui/shared'
+import type React from 'react'
+
+export const CustomBlocksFieldServer: BlocksFieldServerComponent = (props) => {
+  const { field } = props
+
+  // const clientField = createClientField(field)
+
+  // return <BlocksField field={clientField} />
+
+  return 'This is a server component for the blocks field.'
+}

examples/custom-components/src/collections/Fields/blocks/components/server/Label.tsx

@@ -0,0 +1,12 @@
+import type { BlockFieldLabelServerComponent } from 'payload'
+
+import { FieldLabel } from '@payloadcms/ui'
+import React from 'react'
+
+export const CustomBlocksFieldLabelServer: BlockFieldLabelServerComponent = (props) => {
+  const { field } = props
+
+  // return <FieldLabel field={field} />
+
+  return 'This is a server component for the blocks field label.'
+}

examples/custom-components/src/collections/Fields/blocks/index.ts

@@ -0,0 +1,54 @@
+import type { CollectionConfig } from 'payload'
+
+export const blocksFields: CollectionConfig['fields'] = [
+  {
+    name: 'blocksFieldServerComponent',
+    type: 'blocks',
+    admin: {
+      components: {
+        Field: '@/collections/Fields/blocks/components/server/Field#CustomBlocksFieldServer',
+      },
+    },
+    blocks: [
+      {
+        slug: 'text',
+        fields: [
+          {
+            name: 'content',
+            type: 'textarea',
+            label: 'Content',
+          },
+        ],
+        labels: {
+          plural: 'Text Blocks',
+          singular: 'Text Block',
+        },
+      },
+    ],
+  },
+  {
+    name: 'blocksFieldClientComponent',
+    type: 'blocks',
+    admin: {
+      components: {
+        Field: '@/collections/Fields/blocks/components/client/Field#CustomBlocksFieldClient',
+      },
+    },
+    blocks: [
+      {
+        slug: 'text',
+        fields: [
+          {
+            name: 'content',
+            type: 'textarea',
+            label: 'Content',
+          },
+        ],
+        labels: {
+          plural: 'Text Blocks',
+          singular: 'Text Block',
+        },
+      },
+    ],
+  },
+]