Across the Admin UI, the branding from Payload is minimal so that the focus stays where it should be—on your application. By updating the Payload branding, you can create a customized interface and your client (or team, or whoever will access your admin panel) will be greeted with a dynamic interface that is consistent with your application branding.
In this blog post, you will learn how to rebrand and white label the Payload admin panel for your application by modifying the following elements:
You can use your own Payload app or start a new one for this tutorial. If you haven't started a project yet, you can get set up easily by running
npx create-payload-app in your terminal.
For more details on how to start an application, including how to do so from scratch, read the installation documentation.
Start by navigating to your base Payload config file in which all options for the Admin panel are defined.
Below is an example config file:
Next, add the admin option to your payload config file this can start as an empty object.
The admin property takes the following sub-properties:
titleSuffix: Text that appends the meta/page title displayed in the browser tab—must be a string.
favicon: Image that will be displayed as the tab icon.
ogImage: Image that will appear in the preview when you share links to your admin panel online and through social media.
Now, let’s add the meta-object and the above properties.
We need to ensure the images are served somewhere they can be downloaded by the browser. We could have saved an absolute URL if the assets are hosted somewhere. Instead of that we set relative paths to an assets folder for
logo.svg above; we can serve them from the same express app as Payload is using. Create a directory called
assets and save your images there.
Then in your
server.js or wherever you have defined express routes, add the line that serves
At this point, if we check out our app in the browser—the tab will display your updated favicon and title suffix.
To test that the ogImage has successfully updated, use the browser inspector to view the metadata or test your app through your social media of choice or a web developer tool e.g. Twitter’s Card Validator.
In addition to metadata, the admin option also takes custom components to override the default configuration.
The properties we are interested in for rebranding the admin panel are:
graphics.Logo: Image component to be displayed as the logo on the Sign Up / Login view.
graphics.Icon: Image component displayed above the Nav in the admin panel, often a condensed version of a full logo.
Now let's set up these custom components:
componentsand open an object
graphicsproperty and open another object
These graphics need to be React components that can render whatever you'd like. They could render
img tags or full React SVGs. In this example, we're going to include images, css and other html too.
Optionally we can include some styling too.
Final step, let’s check out the new logo and icons.
There you have it! With around 10 lines of code you can brand the admin panel, update metadata and add custom components to effectively white label the admin panel for your clients or users.
Payload gives you the freedom and control to customize other aspects too, like the swapping out the Dashboard or creating custom inputs, to learn more about the admin panel and custom components—check out the pages below.
Join us on GitHub discussions.