36:I[785930,["/_next/static/chunks/0z6glri_ynjka.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/3gubybbngp2qm.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1a1yoot52xn6a.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/36bmrmq388gfb.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/25iah0ttg18gk.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2z5lx46yo95b7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/11wtuihyk9yk1.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jrz3a08x3tnu.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jp7f5swiv6tg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2l09q34zhqapg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1gbwln3k9mrj7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d"],"Image"] 37:I[40979,["/_next/static/chunks/0z6glri_ynjka.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/3gubybbngp2qm.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1a1yoot52xn6a.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/36bmrmq388gfb.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/25iah0ttg18gk.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2z5lx46yo95b7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/11wtuihyk9yk1.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jrz3a08x3tnu.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jp7f5swiv6tg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2l09q34zhqapg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1gbwln3k9mrj7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d"],"ResourceGate"] 38:I[895679,["/_next/static/chunks/0z6glri_ynjka.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/3gubybbngp2qm.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1a1yoot52xn6a.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/36bmrmq388gfb.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/25iah0ttg18gk.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2z5lx46yo95b7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/11wtuihyk9yk1.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jrz3a08x3tnu.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jp7f5swiv6tg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2l09q34zhqapg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1gbwln3k9mrj7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d"],"MemberGate"] 39:I[369503,["/_next/static/chunks/0z6glri_ynjka.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/3gubybbngp2qm.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1a1yoot52xn6a.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/36bmrmq388gfb.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/25iah0ttg18gk.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2z5lx46yo95b7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/11wtuihyk9yk1.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jrz3a08x3tnu.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jp7f5swiv6tg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2l09q34zhqapg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1gbwln3k9mrj7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d"],"RichTextPreview"] 3c:I[955340,["/_next/static/chunks/0z6glri_ynjka.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/3gubybbngp2qm.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1a1yoot52xn6a.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/36bmrmq388gfb.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/25iah0ttg18gk.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2z5lx46yo95b7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/11wtuihyk9yk1.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jrz3a08x3tnu.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jp7f5swiv6tg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2l09q34zhqapg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1gbwln3k9mrj7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d"],"ArticleToc"] 3d:I[459300,["/_next/static/chunks/0z6glri_ynjka.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/3gubybbngp2qm.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1a1yoot52xn6a.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/36bmrmq388gfb.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/25iah0ttg18gk.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2z5lx46yo95b7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/11wtuihyk9yk1.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jrz3a08x3tnu.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1jp7f5swiv6tg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/2l09q34zhqapg.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d","/_next/static/chunks/1gbwln3k9mrj7.js?dpl=30bf9835d4f3b7bd6d44061e006f207af136936d"],"TutorialPagination"] 2a:["$","$L18",null,{"href":"/category/payload-cms","className":"hover:underline","children":["$","span",null,{"className":"inline-flex items-center whitespace-nowrap rounded-full border border-border px-2.5 py-0.5 text-xs font-medium leading-relaxed text-muted-foreground","children":"Payload CMS"}]}] 2b:["$","span",null,{"className":"text-sm text-muted-foreground","children":"16:20 video • ~9 min read"}] 2c:["$","time",null,{"dateTime":"2025-11-17T13:00:00.000Z","className":"text-sm text-muted-foreground","children":"November 17, 2025"}] 2d:["$","span",null,{"className":"inline-flex shrink-0 items-center whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-medium leading-relaxed bg-secondary text-secondary-foreground","children":"Members only"}] 2e:["$","p",null,{"className":"mb-8 max-w-[56ch] text-lg break-words text-muted-foreground","children":"Learn how to white-label your Payload CMS admin UI."}] 2f:["$","div",null,{"className":"mb-8","children":[["$","div",null,{"className":"relative aspect-video rounded-[--radius] overflow-hidden bg-overlay group","children":[["$","$L36",null,{"src":"https://images.nlvcodes.com/nlvcodes/youtube-thumb-k-NACt_USmQ.jpg","alt":"White label Payload CMS in minutes","fill":true,"className":"object-cover","priority":true,"loading":"eager","blurDataURL":"","placeholder":"$undefined"}],["$","a",null,{"href":"https://www.youtube.com/watch?v=k-NACt_USmQ","target":"_blank","rel":"noopener noreferrer","className":"absolute inset-0 flex flex-col items-center justify-center bg-overlay/40 hover:bg-overlay/60 transition-colors","children":[["$","svg",null,{"className":"w-20 h-20 text-overlay-foreground mb-4 group-hover:scale-110 motion-safe:transition-transform drop-shadow-lg","viewBox":"0 0 24 24","fill":"currentColor","children":["$","path",null,{"d":"M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"}]}],["$","p",null,{"className":"text-overlay-foreground font-medium text-lg group-hover:underline drop-shadow-lg","children":"Watch on YouTube"}],["$","p",null,{"className":"text-overlay-foreground/80 text-sm mt-2 max-w-md text-center px-4 drop-shadow","children":"White label Payload CMS in minutes"}]]}]]}],["$","div",null,{"className":"rounded-xl border border-border/50 bg-muted mt-6 p-4","children":["$","$L24",null,{"showLabel":true}]}]]}] 30:["$","div",null,{"className":"my-8","children":["$","$L37",null,{"githubUrl":"https://github.com/nick-vogel/nlv_codes_examples/tree/main/payload/white-label","document":"$undefined","isGated":true}]}] 31:["$","div",null,{"id":"tutorial-body","className":"mb-12","children":["$","$L38",null,{"fallback":[["$","div",null,{"className":"mb-8","children":["$","$L39",null,{"data":{"root":{"type":"root","children":[{"type":"heading","tag":"h2","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Introduction","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"What's up, everyone? Payload CMS makes it easy to add your own branding to your CMS. This is a process known as white-labeling. In this guide, I’ll show you where you can white-label and share best practices. In a few minutes, you'll have a CMS that fits your brand or your clients' brand.","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"If you want the code I use in this guide, there's a link to the repo above the embedded video. Now, let's dive in.","format":0,"version":1}]},{"type":"heading","tag":"h2","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Preparing the images","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"I want to allow editors to update their logos and favicons without asking their dev teams. To do this, we need to include these as media and store that media somewhere in Payload. I great place to do this is in a global one might call \"Settings.\"","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Let's create that global with a ","format":0,"version":1},{"type":"text","text":"config.ts","format":16,"version":1},{"type":"text","text":" file in a new ","format":0,"version":1},{"type":"text","text":"globals/","format":16,"version":1},{"type":"text","text":" directory. The global will need four images: an icon and a logo with light and dark mode variations.","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"typescript","code":"import {GlobalConfig} from 'payload' \n \nexport const Settings: GlobalConfig = { \n slug: 'settings', \n fields: [ \n { \n name: 'lightModeIcon', \n type: 'upload', \n relationTo: 'media', \n }, \n { \n name: 'darkModeIcon', \n type: 'upload', \n relationTo: 'media', \n }, \n { \n name: 'lightModeLogo', \n type: 'upload', \n relationTo: 'media', \n }, \n { \n name: 'darkModeLogo', \n type: 'upload', \n relationTo: 'media', \n }, \n ], \n}","filename":"@/globals/config.ts","id":"68e01e8b4ec00400014c36e6"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Once we create that global, we can import it into our ","format":0,"version":1},{"type":"text","text":"payload.config.ts","format":16,"version":1},{"type":"text","text":" file. Once imported, add it to your ","format":0,"version":1},{"type":"text","text":"globals","format":16,"version":1},{"type":"text","text":" array. Then, run ","format":0,"version":1},{"type":"text","text":"payload generate:types","format":16,"version":1},{"type":"text","text":".","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"I've already uploaded a few images to use for this example, so we'll see those in action in a moment.","format":0,"version":1}]},{"type":"heading","tag":"h2","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Login logo","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"The first place you can add your branding is the login page. This is the page your editors will see when they go to your /admin route. By default, the Payload CMS logo shows up above the form, but you can change it.","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"First, let's create a new file in a new folder called ","format":0,"version":1},{"type":"text","text":"graphics/Logo/index.tsx","format":16,"version":1},{"type":"text","text":".","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"In this file, we'll ","format":0,"version":1},{"type":"text","text":"import React from 'react'","format":16,"version":1},{"type":"text","text":". Then, we'll export a new constant called ","format":0,"version":1},{"type":"text","text":"Logo","format":16,"version":1},{"type":"text","text":". In the ","format":0,"version":1},{"type":"text","text":"Logo","format":16,"version":1},{"type":"text","text":" constant, we need to set up our Payload constant. This uses the config from ","format":0,"version":1},{"type":"text","text":"@payload-config","format":16,"version":1},{"type":"text","text":". From there, we can fetch our settings global. We'll make a new constant named ","format":0,"version":1},{"type":"text","text":"lightModeLogo","format":16,"version":1},{"type":"text","text":". It will hold the light mode version of the logo we uploaded. We'll cast this as our ","format":0,"version":1},{"type":"text","text":"Media","format":16,"version":1},{"type":"text","text":" type.","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Now, we can return an ","format":0,"version":1},{"type":"text","text":"Image","format":16,"version":1},{"type":"text","text":" component with our image's URL along with the width, height, and alt. We'll wrap the ","format":0,"version":1},{"type":"text","text":"Image","format":16,"version":1},{"type":"text","text":" component in a React ","format":0,"version":1},{"type":"text","text":"Fragment","format":16,"version":1},{"type":"text","text":".","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"tsx","code":"import React from 'react'\nimport config from '@payload-config'\nimport { getPayload } from 'payload'\nimport Image from 'next/image'\nimport { Media } from '@/payload-types'\n\nexport const Logo = async () => {\n const payload = await getPayload({ config })\n const settings = await payload.findGlobal({ slug: 'settings' })\n const lightModeLogo = settings.lightModeLogo as Media\n\n return (\n <>\n \n \n )\n}\n","filename":null,"id":"68e01e8b4ec00400014c36e7"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Next, we need to pass this over to our ","format":0,"version":1},{"type":"text","text":"payload.config.ts","format":16,"version":1},{"type":"text","text":" file. Payload CMS uses an import map to make this happen. To add your ","format":0,"version":1},{"type":"text","text":"Logo","format":16,"version":1},{"type":"text","text":" using an import map, we need to add the ","format":0,"version":1},{"type":"text","text":"components","format":16,"version":1},{"type":"text","text":" option to our admin configuration. Inside components, we need to add graphics. The last step is to add the ","format":0,"version":1},{"type":"text","text":"Logo","format":16,"version":1},{"type":"text","text":" option and assign it the path to our logo: ","format":0,"version":1},{"type":"text","text":"/graphics/Logo/index.tsx#Logo","format":16,"version":1},{"type":"text","text":".","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Now we can run:","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"bash","code":"payload generate:importmap","filename":null,"id":"68e01e8b4ec00400014c36e8"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Once we do this, we'll see that our logo shows up on our admin screen.","format":0,"version":1}]},{"type":"heading","tag":"h3","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Light vs. Dark Mode","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Earlier in the guide, I added a light and dark mode version of my logo. Let's set up our admin page to accept either version depending on the users' settings.","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Back in our ","format":0,"version":1},{"type":"text","text":"Logo/index.tsx","format":16,"version":1},{"type":"text","text":" file, I'll add a ","format":0,"version":1},{"type":"text","text":"className","format":16,"version":1},{"type":"text","text":" attribute to the ","format":0,"version":1},{"type":"text","text":"Image","format":16,"version":1},{"type":"text","text":" component. The ","format":0,"version":1},{"type":"text","text":"className","format":16,"version":1},{"type":"text","text":" should be something we can reuse for our Icon, so we'll call it 'light-mode-image.' We can duplicate this image within the React ","format":0,"version":1},{"type":"text","text":"Fragment","format":16,"version":1},{"type":"text","text":". Then we'll go up to our Local API and pull out our ","format":0,"version":1},{"type":"text","text":"darkModeLogo","format":16,"version":1},{"type":"text","text":". Let's store it in a constant to keep our code clean. We'll change the duplicated ","format":0,"version":1},{"type":"text","text":"Image","format":16,"version":1},{"type":"text","text":" component's ","format":0,"version":1},{"type":"text","text":"className","format":16,"version":1},{"type":"text","text":" to 'dark-mode-image'.","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"tsx","code":"import React from 'react'\nimport config from '@payload-config'\nimport { getPayload } from 'payload'\nimport Image from 'next/image'\nimport { Media } from '@/payload-types'\n\nexport const Logo = async () => {\n const payload = await getPayload({ config })\n const settings = await payload.findGlobal({ slug: 'settings' })\n const lightModeLogo = settings.lightModeLogo as Media\n const darkModeLogo = settings.darkModeLogo as Media\n\n return (\n <>\n \n \n \n )\n}\n","filename":"/graphics/Logo/index.tsx","id":"68e01e8b4ec00400014c36e9"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Now we need a way to tell our admin UI to render only one of these logos at a time. We can do that in our ","format":0,"version":1},{"type":"text","text":"app/(payload)/custom.scss","format":16,"version":1},{"type":"text","text":" file. Let's add the code we need:","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"css","code":"/* data-theme is how Payload tells us the user is using light or dark mode */\nhtml[data-theme=\"dark\"] .light-mode-image {\n display: none;\n}\n\nhtml[data-theme=\"light\"] .dark-mode-image {\n display: none;\n}","filename":"@/app/(payload)/custom.scss","id":"68e01e8b4ec00400014c36ea"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"When we load up the login page, we should see only one logo. If we switch from light mode to dark mode, the logo should change.","format":0,"version":1}]},{"type":"heading","tag":"h2","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Icon","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"This next segment of the guide will go over how to change the bug icon in your admin UI. By the end of this section, you'll have rendered the icon you uploaded earlier in your dashboard.","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"This is like how we replaced the logo. Let's duplicate the ","format":0,"version":1},{"type":"text","text":"Logo/index.tsx","format":16,"version":1},{"type":"text","text":" file and create an ","format":0,"version":1},{"type":"text","text":"Icon/index.tsx","format":16,"version":1},{"type":"text","text":" file. We'll change everything that says \"logo\" to \"icon.\"","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"tsx","code":"import React from 'react'\nimport config from '@payload-config'\nimport { getPayload } from 'payload'\nimport Image from 'next/image'\nimport { Media } from '@/payload-types'\n\nexport const Icon = async () => {\n const payload = await getPayload({ config })\n const settings = await payload.findGlobal({ slug: 'settings' })\n const lightModeIcon = settings.lightModeIcon as Media\n const darkModeIcon = settings.darkModeIcon as Media\n\n return (\n <>\n \n \n \n )\n}\n","filename":"@/graphics/Icon/index.tsx","id":"68e01e8b4ec00400014c36eb"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"We’ve handled the switch between dark and light mode. Now, we can see the icons change based on what the user prefers.","format":0,"version":1}]},{"type":"block","fields":{"blockType":"membership","heading":null,"message":null,"id":"68e01e8b4ec00400014c36ec"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Right now, we can't use the REST or Local APIs to get our favicons in the ","format":0,"version":1},{"type":"text","text":"payload.config.ts","format":16,"version":1},{"type":"text","text":" file. This means that we also can't fetch our metadata and open graph image here. This is a limitation of Payload CMS. But if you have your website separated from Payload CMS, you can still use the REST API. The limitation comes when you have Payload CMS and your website in the same project.","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"You have two options. The first is using the URL from the icons we uploaded a moment ago. Your second option is including a local version of your image in your repo. I recommend the first option if it's available to you. Regardless, you will need to hard-code this information.","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"typescript","code":"\n// more code\n\nconst iconUrl = 'http://localhost:3000/api/media/file/Square%20light.png'\nconst darkIconUrl = 'http://localhost:3000/api/media/file/Square.png'\n\nexport default buildConfig({\n admin: {\n // more code\n components: {\n graphics: {\n Logo: '/graphics/Logo/index.tsx#Logo',\n Icon: '/graphics/Icon/index.tsx#Icon',\n },\n },\n meta: {\n icons: [\n {\n fetchPriority: 'high',\n url: iconUrl,\n sizes: '16x16 32x32 48x48 64x64',\n type: 'image/webp',\n rel: 'icon',\n },\n {\n media: '(prefers-color-scheme: dark)',\n fetchPriority: 'high',\n url: darkIconUrl,\n sizes: '16x16 32x32 48x48 64x64',\n type: 'image/webp',\n rel: 'icon',\n },\n ],\n },\n },\n collections: [Users, Media],\n globals: [Settings],\n // more code\n})\n","filename":"@/payload.config.ts","id":"68e01e8b4ec00400014c36ed"}},{"type":"heading","tag":"h2","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Metadata","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"The last area to consider with white-labeling your project is the metadata. At the end of this segment, you will have replaced the default values provided by Payload CMS.","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"We'll place the metadata information in the same place as our favicons. Below the ","format":0,"version":1},{"type":"text","text":"icons","format":16,"version":1},{"type":"text","text":" array, we'll start with placing the ","format":0,"version":1},{"type":"text","text":"titleSuffix","format":16,"version":1},{"type":"text","text":" option. This is what comes after the title of the page you're on. You can change the ","format":0,"version":1},{"type":"text","text":"title","format":16,"version":1},{"type":"text","text":", but it's best to set it elsewhere, like in a collection or global. I'll leave my ","format":0,"version":1},{"type":"text","text":"title","format":16,"version":1},{"type":"text","text":" undefined and set ","format":0,"version":1},{"type":"text","text":"titleSuffix","format":16,"version":1},{"type":"text","text":" to \"White Label.\"","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"typescript","code":"meta: {\n icons: [\n {\n fetchPriority: 'high',\n url: iconUrl,\n sizes: '16x16 32x32 48x48 64x64',\n type: 'image/webp',\n rel: 'icon',\n },\n {\n media: '(prefers-color-scheme: dark)',\n fetchPriority: 'high',\n url: darkIconUrl,\n sizes: '16x16 32x32 48x48 64x64',\n type: 'image/webp',\n rel: 'icon',\n },\n ],\n titleSuffix: 'White Label',\n },","filename":"payload.config.ts","id":"68e01e8b4ec00400014c36ee"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"You can also add a ","format":0,"version":1},{"type":"text","text":"description","format":16,"version":1},{"type":"text","text":". This is what shows up in search engine results if you allow search engines to index your admin UI. Payload CMS includes it by default, so this can still be useful to set.","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"typescript","code":"meta: {\n icons: [\n {\n fetchPriority: 'high',\n url: iconUrl,\n sizes: '16x16 32x32 48x48 64x64',\n type: 'image/webp',\n rel: 'icon',\n },\n {\n media: '(prefers-color-scheme: dark)',\n fetchPriority: 'high',\n url: darkIconUrl,\n sizes: '16x16 32x32 48x48 64x64',\n type: 'image/webp',\n rel: 'icon',\n },\n ],\n titleSuffix: 'White Label',\n description: 'A white label template for Payload',\n },","filename":"payload.config.ts","id":"68e01e8b4ec00400014c36ef"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"If you want to add other metadata, you can. Payload allows you to set any metadata that's available through Next.js. All you need to do is add the key from Next.js and then assign it a value.","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"For example, you can add the ","format":0,"version":1},{"type":"text","text":"applicationName","format":16,"version":1},{"type":"text","text":" key to your meta object. I'll assign it the value of \"White Label Example.\" Then we can inspect the code and see this option show up there.","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"typescript","code":"meta: {\n icons: [\n {\n fetchPriority: 'high',\n url: iconUrl,\n sizes: '16x16 32x32 48x48 64x64',\n type: 'image/webp',\n rel: 'icon',\n },\n {\n media: '(prefers-color-scheme: dark)',\n fetchPriority: 'high',\n url: darkIconUrl,\n sizes: '16x16 32x32 48x48 64x64',\n type: 'image/webp',\n rel: 'icon',\n },\n ],\n titleSuffix: 'White Label',\n description: 'A white label template for Payload',\n applicationName: 'White Label Example',\n },","filename":"payload.config.ts","id":"68e01e8b4ec00400014c36f0"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"In the same way, you can add any open graph options you want to add. You do this by opening the ","format":0,"version":1},{"type":"text","text":"openGraph","format":16,"version":1},{"type":"text","text":" option. Like with metadata, you can set a ","format":0,"version":1},{"type":"text","text":"title","format":16,"version":1},{"type":"text","text":" to use across the admin UI. This isn't too helpful, but I'll add the ","format":0,"version":1},{"type":"text","text":"description","format":16,"version":1},{"type":"text","text":" option. I'll copy my meta description and paste it into my ","format":0,"version":1},{"type":"text","text":"openGraph","format":16,"version":1},{"type":"text","text":".","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"typescript","code":"openGraph: {\n description: 'A white label example for Payload',\n }","filename":"payload.config.ts","id":"68e01e8b4ec00400014c36f1"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"You also have the option to add a ","format":0,"version":1},{"type":"text","text":"siteName","format":16,"version":1},{"type":"text","text":". I'll set this to \"White Label Example.\"","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"typescript","code":"openGraph: {\n description: 'A white label example for Payload',\n siteName: 'White Label Example',\n }","filename":"payload.config.ts","id":"68e01e8b4ec00400014c36f2"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"The last option I'll add is the open graph image. First, I'll upload the image I'll use for this. Now, I can copy the url from the API. Over in the ","format":0,"version":1},{"type":"text","text":"payload.config.ts","format":16,"version":1},{"type":"text","text":", we can add an ","format":0,"version":1},{"type":"text","text":"images","format":16,"version":1},{"type":"text","text":" array to the ","format":0,"version":1},{"type":"text","text":"openGraph","format":16,"version":1},{"type":"text","text":" option. This option expects an array of objects. I'll open an object and pass in the ","format":0,"version":1},{"type":"text","text":"url","format":16,"version":1},{"type":"text","text":" prop. I'll paste the url I copied here.","format":0,"version":1}]},{"type":"block","fields":{"blockType":"code","language":"typescript","code":"\nconst openGraphImageUrl = 'http://localhost:3000/api/media/file/nlv_codes.png'\n\n// more code\n\nopenGraph: {\n description: 'A white label example for Payload',\n siteName: 'White Label Example',\n images: [\n {\n url: openGraphImageUrl,\n }\n ]\n }","filename":"payload.config.ts","id":"68e01e8b4ec00400014c36f3"}},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Now I can load this up and review the changes I made.","format":0,"version":1}]},{"type":"heading","tag":"h2","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"Conclusion","format":0,"version":1}]},{"type":"paragraph","format":"","indent":0,"version":1,"direction":null,"children":[{"type":"text","text":"You've now white-labeled your Payload CMS admin UI. There are limitations that prevent you from fetching your favicons and metadata. But you now have a dashboard that looks like it belongs to you.","format":0,"version":1}]}],"direction":"ltr","format":"","indent":0,"version":1}},"paragraphLimit":2,"className":"prose max-w-[70ch]"}]}],"$L3a"],"children":"$L3b"}]}] 32:["$","div",null,{"className":"mb-8 flex flex-wrap gap-2","children":[["$","span",null,{"className":"sr-only","children":"Tags"}],[["$","span","0",{"className":"inline-flex items-center whitespace-nowrap rounded-full border border-border px-2.5 py-0.5 text-xs font-medium leading-relaxed text-muted-foreground","children":"branding"}],["$","span","1",{"className":"inline-flex items-center whitespace-nowrap rounded-full border border-border px-2.5 py-0.5 text-xs font-medium leading-relaxed text-muted-foreground","children":"design"}],["$","span","2",{"className":"inline-flex items-center whitespace-nowrap rounded-full border border-border px-2.5 py-0.5 text-xs font-medium leading-relaxed text-muted-foreground","children":"white-label"}]]]}] 33:["$","section",null,{"aria-labelledby":"keep-going","className":"mt-10 mb-14","children":[["$","h2",null,{"id":"keep-going","className":"mb-4 text-[1.375rem] font-extrabold tracking-tight","children":"Keep going"}],["$","div",null,{"className":"grid grid-cols-1 gap-5 md:grid-cols-3","children":[["$","article","6ab59e435089277f93874a38",{"className":"rounded-xl border border-border/50 bg-muted p-6 relative","children":[["$","span",null,{"className":"text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground","children":["Tutorial · ","8:27 video • ~8 min read"]}],["$","h3",null,{"className":"mt-2 text-base font-bold leading-snug","children":["$","$L18",null,{"href":"/tutorials/payload-local-api-query-your-data-without-fetch","className":"text-foreground hover:underline after:absolute after:inset-0","children":"Payload Local API: Query Your Data Without Fetch"}]}]]}],["$","article","6ab59c7c5089277f93874513",{"className":"rounded-xl border border-border/50 bg-muted p-6 relative","children":[["$","span",null,{"className":"text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground","children":["Tutorial · ","10:12 video • ~9 min read"]}],["$","h3",null,{"className":"mt-2 text-base font-bold leading-snug","children":["$","$L18",null,{"href":"/tutorials/payload-cms-fields-blocks-relationship-upload-join-and-more","className":"text-foreground hover:underline after:absolute after:inset-0","children":"Payload CMS Fields: Blocks, Relationship, Upload, Join, and more"}]}]]}],["$","article","6ab599d15089277f93873e61",{"className":"rounded-xl border border-border/50 bg-muted p-6 relative","children":[["$","span",null,{"className":"text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground","children":["Tutorial · ","7:36 video • ~7 min read"]}],["$","h3",null,{"className":"mt-2 text-base font-bold leading-snug","children":["$","$L18",null,{"href":"/tutorials/payload-collections-build-your-first-collection","className":"text-foreground hover:underline after:absolute after:inset-0","children":"Payload Collections: Build Your First Collection"}]}]]}]]}]]}] 34:["$","$L3c",null,{"contentId":"tutorial-body"}] 35:["$","$L3d",null,{"previous":{"title":"Ultimate Guide to Server Actions","slug":"ultimate-guide-to-server-actions","id":"68f83071556c13aca37dc930"},"next":{"title":"How to use Payload CMS's MCP Plugin [beta]","slug":"how-to-use-payload-cmss-mcp-plugin-beta","id":"691e4725bb9cd6bd6dbdad9c"}}]