In this lesson, we'll create a practical Admin extension to white-label the Webiny Admin application. You'll learn how to customize the logo, title, and theme colors to match your organization's branding.

What Is White-Labeling?

White-labeling is the process of customizing the Admin application with your own branding - logos, colors, and titles. This is important when:

• Building a SaaS product
• Creating a custom CMS for clients
• Meeting corporate branding guidelines
• Supporting multi-tenant setups with different branding per tenant

Webiny makes white-labeling straightforward through simple Admin extensions.

Creating the AdminBranding Extension

Let's create a white-label extension step by step. We'll customize:

1. The application title
2. The logo
3. The color theme

Step 1: Create the Extension Folder

Create a new folder structure in your extensions/ directory:

extensions/
└── AdminBranding/
    ├── AdminTheme.tsx
    ├── AdminTitleLogo.tsx
    └── logo.png

Add your logo image to this folder (use your company logo or any image for now).

Step 2: Create the Theme Extension

Create extensions/AdminBranding/AdminTheme.tsx:

This extension:

• Sets the primary color to purple
• Sets the neutral color to light-green
• Uses AdminConfig.Public to make this configuration available to the Admin app

Step 3: Create the Logo and Title Extension

Create extensions/AdminBranding/AdminTitleLogo.tsx:

This extension:

• Sets the application title to "ACME Corp"
• Configures both square and horizontal logos (for different layouts)
• Imports the logo image from the same folder

Step 4: Register the Extensions

Add both extensions to your webiny.config.tsx:

Step 5: Test Locally

Start the Admin development server:

Open http://localhost:3001 in your browser. You should see:

• Your custom logo
• "ACME Corp" as the application title
• Purple primary color and light-green neutral color

Combining Into a Single Extension

You can also combine both extensions into a single file for simplicity:

Create extensions/AdminBranding/AdminBranding.tsx:

Then register only this single extension in webiny.config.tsx:

Summary

White-labeling in Webiny is straightforward:

• Simple extensions using AdminConfig components
• Title, Logo, and Theme are the main customization points
• Combine or separate - Use single or multiple extension files

The extension system makes it easy to create fully branded Admin applications. In the next lesson, we'll explore debugging and best practices for Webiny development.