Admin panel customization

The front-end part of Strapi is called the admin panel. The admin panel presents a graphical user interface to help you structure and manage the content that will be accessible through the Content API. To get an overview of the admin panel, please refer to the Getting Started > Admin panel page.

From a developer point of view, Strapi's admin panel is a React-based single-page application that encapsulates all the features and installed plugins of a Strapi application.

Admin panel customization is done by tweaking the code of the src/admin/app file or other files included in the src/admin folder (see project structure). By doing so, you can:

• Customize some parts of the admin panel to better reflect your brand identity (logos, favicon) or your language,
• Replace some other parts of the admin panel, such as the Rich text editor and the bundler,
• Extend the theme or the admin panel to add new features or customize the existing user interface.

General considerations

Prerequisites

Before updating code to customize the admin panel:

• Rename the default app.example.tsx|js file into app.ts|js.
• Create a new extensions folder in /src/admin/.
• If you want to see your changes applied live while developing, ensure the admin panel server is running (it's usually done with the yarn develop or npm run develop command if you have not changed the default host, port, and path of the admin panel).

Most basic admin panel customizations will be done in the /src/admin/app file, which includes a config object.

Any file used by the config object (e.g., a custom logo) should be placed in a /src/admin/extensions/ folder and imported inside /src/admin/app.js.

Tip: Hot reloading while developing

In Strapi 5, the server runs in watch-admin mode by default, so the admin panel auto-reloads whenever you change its code. This simplifies admin panel and front-end plugins development. To disable this, run yarn develop --no-watch-admin (see CLI reference).

Before deployment, the admin panel needs to be built, by running the following command from the project's root directory:

yarn

yarn build

npm

npm run build

This will replace the folder's content located at ./build. Visit http://localhost:1337/admin to make sure customizations have been taken into account.

Note: Admin panel extensions vs. plugins extensions

By default, Strapi projects already contain another extensions folder in /src but it is for plugins extensions only (see Plugins extension).

Available customizations

The config object of /src/admin/app accepts the following parameters:

Parameter	Type	Description
auth	Object	Accepts a logo key to replace the default Strapi logo on login screen
head	Object	Accepts a favicon key to replace the default Strapi favicon
locales	Array of Strings	Defines availables locales
translations	Object	Extends the translations
menu	Object	Accepts the logo key to change the logo in the main navigation
theme.light and theme.dark	Object	Overwrite theme properties for light and dark modes
tutorials	Boolean	Toggles displaying the video tutorials
notifications	Object	Accepts the releases key (Boolean) to toggle displaying notifications about new releases

Click on any of the following cards to get more details about a specific topic:

Logos

Update the logos displayed in the admin panel to match your own brand.

Favicon

Update the favicon to match your own brand.

Locales & translations

Define locales and extend translations available in the admin panel.

Rich text editor

Learn more about the possible strategies to replace the built-in Rich text editor.

Bundlers

Choose between the Vite and webpack bundlers and configure them.

Theme extension

Learn the basics of extending the built-in theme of the admin panel.

Admin panel extension

Learn the basics of extending the admin panel.

Basic example

The following is an example of a basic customization of the admin panel:

JavaScript

/src/admin/app.js

import AuthLogo from "./extensions/my-logo.png";
import MenuLogo from "./extensions/logo.png";
import favicon from "./extensions/favicon.png";

export default {
  config: {
    // Replace the Strapi logo in auth (login) views
    auth: {
      logo: AuthLogo,
    },
    // Replace the favicon
    head: {
      favicon: favicon,
    },
    // Add a new locale, other than 'en'
    locales: ["fr", "de"],
    // Replace the Strapi logo in the main navigation
    menu: {
      logo: MenuLogo,
    },
    // Override or extend the theme
    theme: {
      // overwrite light theme properties
      light: {
        colors: {
          primary100: "#f6ecfc",
          primary200: "#e0c1f4",
          primary500: "#ac73e6",
          primary600: "#9736e8",
          primary700: "#8312d1",
          danger700: "#b72b1a",
        },
      },

      // overwrite dark theme properties
      dark: {
        // ...
      },
    },
    // Extend the translations
    translations: {
      fr: {
        "Auth.form.email.label": "test",
        Users: "Utilisateurs",
        City: "CITY (FRENCH)",
        // Customize the label of the Content Manager table.
        Id: "ID french",
      },
    },
    // Disable video tutorials
    tutorials: false,
    // Disable notifications about new Strapi releases
    notifications: { releases: false },
  },

  bootstrap() {},
};

TypeScript

/src/admin/app.ts

// Note: you may see some ts errors, don't worry about them
import AuthLogo from "./extensions/my-logo.png";
import MenuLogo from "./extensions/logo.png";
import favicon from "./extensions/favicon.png";

export default {
  config: {
    // Replace the Strapi logo in auth (login) views
    auth: {
      logo: AuthLogo,
    },
    // Replace the favicon
    head: {
      // Try to change the origin favicon.png file in the
      // root of strapi project if this config don't work.
      favicon: favicon, 
    },
    // Add a new locale, other than 'en'
    locales: ["fr", "de"],
    // Replace the Strapi logo in the main navigation
    menu: {
      logo: MenuLogo,
    },
    // Override or extend the theme
    theme: {
	    dark:{
	      colors: {
			  alternative100: '#f6ecfc',
			  alternative200: '#e0c1f4',
			  alternative500: '#ac73e6',
			  alternative600: '#9736e8',
			  alternative700: '#8312d1',
			  buttonNeutral0: '#ffffff',
			  buttonPrimary500: '#7b79ff',
			  // you can see other colors in the link below
			  },
		},
		light:{
			// you can see the light color here just like dark colors https://github.com/strapi/design-system/blob/main/packages/design-system/src/themes/lightTheme/light-colors.ts
		},
  },
    },
    // Extend the translations
    // you can see the traslations keys here https://github.com/strapi/strapi/blob/develop/packages/core/admin/admin/src/translations
    translations: {
      fr: {
        "Auth.form.email.label": "test",
        Users: "Utilisateurs",
        City: "CITY (FRENCH)",
        // Customize the label of the Content Manager table.
        Id: "ID french",
      },
    },
    // Disable video tutorials
    tutorials: false,
    // Disable notifications about new Strapi releases
    notifications: { releases: false },
  },

  bootstrap() {},
};

Detailed examples in the codebase

• You can see the full translation keys, for instance to change the welcome message, on GitHub.
• Light and dark colors are also found on GitHub.