Skip to main content

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 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:

ParameterTypeDescription
authObjectAccepts a logo key to replace the default Strapi logo on login screen
headObjectAccepts a favicon key to replace the default Strapi favicon
localesArray of StringsDefines availables locales
translationsObjectExtends the translations
menuObjectAccepts the logo key to change the logo in the main navigation
theme.light and theme.darkObjectOverwrite theme properties for light and dark modes
tutorialsBooleanToggles displaying the video tutorials
notificationsObjectAccepts 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:

Basic example

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

/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() {},
};
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.