docs: accessing the config from custom components (#6942)

docs/admin/components.mdx

@@ -221,7 +221,7 @@ Custom Components also receive various other props that are specific to the cont
   See [Root Components](#custom-root-components), [Collection Components](#custom-collection-components), [Global Components](#custom-global-components), or [Field Components](#custom-field-components) for a complete list of all available components.
 </Banner>
 
-#### Client Components
+### Client Components
 
 When [Building Custom Components](#building-custom-components), it's still possible to use client-side code such as `useState` or the `window` object. To do this, simply add the `use client` directive at the top of your file. Payload will automatically detect and remove all default [non-serializable props](https://react.dev/reference/rsc/use-client#serializable-types) before rendering your component.
 
@@ -245,7 +245,50 @@ export const MyClientComponent: React.FC = () => {
   Client Components cannot be passed [non-serializable props](https://react.dev/reference/rsc/use-client#serializable-types). If you are rendering your Client Component _from within_ a Server Component, ensure that its props are serializable.
 </Banner>
 
-#### Using Hooks
+### Accessing the Payload Config
+
+From any Server Component, the [Payload Config](../configuration/overview) can be retrieved using the `payload` prop:
+
+```tsx
+import React from 'react'
+
+export default async function MyServerComponent({
+  payload: {
+    config // highlight-line
+  }
+}) {
+  return (
+    <Link href={config.serverURL}>
+      Go Home
+    </Link>
+  )
+}
+```
+
+But the Payload Config is [non-serializable](https://react.dev/reference/rsc/use-client#serializable-types) by design. It is full of custom validation functions, React components, etc. This means that the Payload Config, in its entirety, cannot be passed directly to Client Components.
+
+For this reason, Payload creates a Client Config and passes it into the Config Provider. This is a serializable version of the Payload Config that can be accessed from any Client Component via the [`useConfig`](./hooks#useconfig) hook:
+
+```tsx
+import React from 'react'
+import { useConfig } from '@payloadcms/ui'
+
+export const MyClientComponent: React.FC = () => {
+  const { serverURL } = useConfig() // highlight-line
+
+  return (
+    <Link href={serverURL}>
+      Go Home
+    </Link>
+  )
+}
+```
+
+<Banner type="success">
+  See [Using Hooks](#using-hooks) for more details.
+</Banner>
+
+### Using Hooks
 
 To make it easier to [build your Custom Components](#building-custom-components), you can use [Payload's built-in React Hooks](./hooks) in any Client Component. For example, you might want to interact with one of Payload's many React Contexts:
 
@@ -255,7 +298,7 @@ import React from 'react'
 import { useDocumentInfo } from '@payloadcms/ui'
 
 export const MyClientComponent: React.FC = () => {
-  const { slug } = useDocumentInfo()
+  const { slug } = useDocumentInfo() // highlight-line
 
   return (
     <p>{`Entity slug: ${slug}`}</p>
@@ -267,7 +310,7 @@ export const MyClientComponent: React.FC = () => {
   See the [Hooks](./hooks) documentation for a full list of available hooks.
 </Banner>
 
-#### Getting the Current Language
+### Getting the Current Language
 
 All Custom Components can support multiple languages to be consistent with Payload's [Internationalization](../configuration/i18n). To do this, first add your translation resources to the [I18n Config](../configuration/i18n).
 
@@ -309,7 +352,7 @@ export const MyClientComponent: React.FC = () => {
   See the [Hooks](./hooks) documentation for a full list of available hooks.
 </Banner>
 
-#### Getting the Current Locale
+### Getting the Current Locale
 
 All [Custom Views](./views) can support multiple locales to be consistent with Payload's [Localization](../configuration/localization). They automatically receive the `locale` object as a prop by default. This can be used to scope API requests, etc.:
 
@@ -353,7 +396,7 @@ const Greeting: React.FC = () => {
   See the [Hooks](./hooks) documentation for a full list of available hooks.
 </Banner>
 
-#### Styling Custom Components
+### Styling Custom Components
 
 Payload has a robust [CSS Library](./customizing-css) that you can style your Custom Components similarly to Payload's built-in styling. This will ensure that your Custom Component matches the existing design system, and so that it automatically adapts to any theme changes.
 

docs/admin/hooks.mdx

@@ -780,7 +780,7 @@ const Greeting: React.FC = () => {
 
 ## useConfig
 
-Used to easily fetch the Payload Client Config.
+Used to easily retrieve the Payload [Client Config](./components#accessing-the-payload-config).
 
 ```tsx
 'use client'

docs/admin/overview.mdx

@@ -130,7 +130,7 @@ You can use whatever Collection you'd like to access the Admin Panel as long as
 
 To do this, specify `admin: { user: 'admins' }` in your config. This will provide access to the Admin Panel to only `admins`. Any users authenticated as `customers` will be prevented from accessing the Admin Panel.  See [Access Control](/docs/access-control/overview) for full details.
 
-#### Role-based access control
+### Role-based Access Control
 
 It is also possible to allow multiple user types into the Admin Panel with limited permissions. For example, you may wish to have two roles within the `admins` Collection:
 
@@ -143,7 +143,7 @@ To do this, add a `roles` or similar field to your auth-enabled Collection, then
 
 You have full control over the routes that Payload binds itself to. This includes both [Root-level Routes](#root-level-routes) such as the [REST API](../rest-api/overview), and [Admin-level Routes](#admin-level-routes) such as the user's account page. You can customize these routes to meet the needs of your application simply by specifying the desired paths in your config.
 
-#### Root-level Routes
+### Root-level Routes
 
 Root-level routes are those that are not behind the `/admin` path, such as the [REST API](../rest-api/overview) and [GraphQL API](../graphql/overview), or the root path of the Admin Panel itself.
 
@@ -179,7 +179,7 @@ You can configure custom paths for the following root-level routes through the `
    You can easily add _new_ routes to the Admin Panel through the `endpoints` property of the Payload Config. See [Custom Endpoints](../rest-api/overview#custom-endpoints) for more information.
 </Banner>
 
-#### Admin-level Routes
+### Admin-level Routes
 
 Admin-level routes are those behind the `/admin` path. These are the routes that are part of the Admin Panel itself, such as the user's account page, the login page, etc.
 

docs/admin/views.mdx

@@ -57,7 +57,7 @@ For more granular control, pass a configuration object instead. Payload exposes
 
 _\* An asterisk denotes that a property is required._
 
-#### Adding New Views
+### Adding New Views
 
 To add a _new_ views to the [Admin Panel](./overview), simply add your own key to the `views` object with at least a `path` and `Component` property. For example:
 
@@ -209,7 +209,7 @@ The following options are available:
 | **`API`**         | The API view is used to display the REST API JSON response for a given document.                                            |
 | **`LivePreview`** | The LivePreview view is used to display the Live Preview interface. [More details](../live-preview).                        |
 
-#### Document Tabs
+### Document Tabs
 
 Each Document View can be given a new tab in the Edit View, if desired. Tabs are highly configurable, from as simple as changing the label to swapping out the entire component, they can be modified in any way. To add or customize tabs in the Edit View, use the `Component.Tab` key: