129 lines
9.6 KiB
Plaintext
129 lines
9.6 KiB
Plaintext
---
|
|
title: The Admin Panel
|
|
label: Overview
|
|
order: 10
|
|
desc: Manage your data and customize the Admin Panel by swapping in your own React components. Create, modify or remove views, fields, styles and much more.
|
|
keywords: admin, components, custom, customize, documentation, Content Management System, cms, headless, javascript, node, react, express
|
|
---
|
|
|
|
Payload dynamically generates a beautiful, fully functional Admin Panel to manage your users and data. The Payload Admin Panel is highly performant, even with 100+ fields, and is written fully in TypeScript. It is built with [React](https://react.dev) using the [Next.js App Router](https://nextjs.org/docs/app) and fully supports [React Server Components](https://react.dev/reference/rsc/server-components) which enables the use of the [Local API](/docs/local-api/overview) on the front-end.
|
|
|
|
You can endlessly customize and extend the Admin UI by swapping out your own [Custom Components](./components) for everything from field labels to entire views. You can also modify built-in views, build your own fields, [swap out Payload branding for your own](https://payloadcms.com/blog/white-label-admin-ui), and so much more.
|
|
|
|
<Banner type="success">
|
|
The Admin Panel is meant to be simple enough to give you a starting point but not bring too much
|
|
complexity, so that you can easily customize it to suit the needs of your application and your
|
|
editors.
|
|
</Banner>
|
|
|
|
<LightDarkImage
|
|
srcLight="https://payloadcms.com/images/docs/admin.jpg"
|
|
srcDark="https://payloadcms.com/images/docs/admin-dark.jpg"
|
|
alt="Admin Panel with collapsible sidebar"
|
|
caption="Redesigned Admin Panel with a collapsible sidebar that's open by default, providing greater extensibility and enhanced horizontal real estate."
|
|
/>
|
|
|
|
## Admin Options
|
|
|
|
All high-level options for the Admin Panel are defined in your Payload config under the `admin` key:
|
|
|
|
| Option | Description |
|
|
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| `user` | The `slug` of a Collection that you want to be used to log in to the Admin Panel. [More](/docs/admin/overview#the-admin-user-collection) |
|
|
| `buildPath` | Specify an absolute path for where to store the built Admin bundle used in production. Defaults to `path.resolve(process.cwd(), 'build')`. |
|
|
| `meta` | Base meta data to use for the Admin Panel. Included properties are `titleSuffix`, `icons`, and `openGraph`. Can be overridden on a per collection or per global basis. |
|
|
| `disable` | If set to `true`, the entire Admin Panel will be disabled. |
|
|
| `dateFormat` | Global date format that will be used for all dates in the Admin Panel. Any valid [date-fns](https://date-fns.org/) format pattern can be used. |
|
|
| `avatar` | Set account profile picture. Options: `gravatar`, `default` or a custom React component. |
|
|
| `autoLogin` | Used to automate admin log-in for dev and demonstration convenience. [More](/docs/authentication/config). |
|
|
| `livePreview` | Enable real-time editing for instant visual feedback of your front-end application. [More](/docs/live-preview/overview). |
|
|
| `components` | Component overrides that affect the entirety of the Admin Panel. [More](/docs/admin/components) |
|
|
| `routes` | Replace built-in Admin Panel routes with your own custom routes. I.e. `{ logout: '/custom-logout', inactivity: 'custom-inactivity' }` |
|
|
|
|
### The Admin User Collection
|
|
|
|
<Banner type="warning">
|
|
<strong>Important:</strong>
|
|
<br />
|
|
The Admin Panel can only be used by a single auth-enabled Collection. To enable authentication for a Collection, simply set `auth: true` in the Collection's configuration. See [Authentication](/docs/authentication/overview) for more information.
|
|
</Banner>
|
|
|
|
To specify which Collection to allow to login to the Admin Panel, pass the `admin.user` key equal to the slug of any auth-enabled Collection. See [Authentication](/docs/authentication/overview) for more information.
|
|
|
|
`payload.config.js`:
|
|
|
|
```ts
|
|
import { buildConfig } from 'payload/config'
|
|
|
|
const config = buildConfig({
|
|
admin: {
|
|
user: 'admins', // highlight-line
|
|
},
|
|
})
|
|
```
|
|
|
|
<Banner type="info">
|
|
By default, if you have not specified a Collection, Payload will automatically provide a `User` Collection with access the Admin Panel. You can customize or override the fields and settings of the default `User` Collection by adding your own Collection with `slug: 'users'`. Doing this will force Payload to use your provided `User` Collection instead of its default version.
|
|
</Banner>
|
|
|
|
<Banner type="warning">
|
|
<strong>Note:</strong>
|
|
<br />
|
|
You can use whatever Collection you'd like to access the Admin Panel as long as the Collection supports [Authentication](/docs/authentication/overview). It doesn't need to be called `users`. For example, you could use a Collection called `admins` or `editors` instead.
|
|
</Banner>
|
|
|
|
For example, you may wish to have two Collections that both support Authentication:
|
|
|
|
- `admins` - meant to have a higher level of permissions to manage your data and access the Admin Panel
|
|
- `customers` - meant for end users of your app that should not be allowed to log into the Admin Panel
|
|
|
|
This is totally possible. For the above scenario, by specifying `admin: { user: 'admins' }`, your Admin Panel will use `admins`. Any users logged in as `customers` will not be able to log in via the Admin Panel.
|
|
|
|
### Restricting user access
|
|
|
|
It is also possible to allow _multiple admin user types_ into the Admin Panel with limited permissions. To do this, add a `roles` or similar field to your auth-enabled Collection and use the `access.admin` property to limit access. See [Access Control](/docs/access-control/overview) for full details. For a working example, check out the [Auth Example](https://github.com/payloadcms/payload/tree/main/examples/auth/payload).
|
|
|
|
### I18n
|
|
|
|
The Payload Admin Panel is translated in over 30 languages and counting. The language is automatically detected based on the user's browser and all text displays in that language. If no language was detected, or if the user's language is not yet supported, English will be chosen. Users can easily change their language by adjusting their user preferences through their account page. See [I18n](../configuration/i18n) for more information.
|
|
|
|
<Banner>
|
|
<strong>Note:</strong>
|
|
<br />
|
|
If there is a language that Payload does not yet support, we accept code
|
|
[contributions](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md).
|
|
</Banner>
|
|
|
|
### Light and dark modes
|
|
|
|
Users in the Admin Panel have access to choosing between light mode and dark mode for their editing experience. The setting is managed while logged into the admin UI within the user account page and will be stored with the browser. By default, the operating system preference is detected and used.
|
|
|
|
### Custom admin panel routes
|
|
|
|
You can configure custom routes in the Admin Panel for the following routes:
|
|
|
|
| Option | Default route |
|
|
| ----------------- | ----------------------- |
|
|
| `account` | `/account` |
|
|
| `createFirstUser` | `/create-first-user` |
|
|
| `forgot` | `/forgot` |
|
|
| `inactivity` | `/logout-inactivity` |
|
|
| `login` | `/login` |
|
|
| `logout` | `/logout` |
|
|
| `reset` | `/reset` |
|
|
| `unauthorized` | `/unauthorized` |
|
|
|
|
`payload.config.js`:
|
|
|
|
```ts
|
|
import { buildConfig } from 'payload/config'
|
|
|
|
const config = buildConfig({
|
|
admin: {
|
|
routes: {
|
|
admin: '/custom-admin-route'
|
|
}
|
|
},
|
|
})
|
|
```
|