How can the Admin Welcome page UI be overridden in Strapi V4?

edit

In Strapi v4, the Admin Welcome page UI can be overridden by creating a custom plugin. Here are the steps to do so:

1. Create a new plugin using the command:

strapi generate:plugin my-custom-welcome-page

1. Create a new file called index.js inside the ./admin/src/containers/Main/Main.js directory of your plugin.

2. Add the following code to your index.js file to import and extend the default welcome page component:

import React from 'react';
import { Main as StrapiMain } from '@strapi/strapi-plugin-content-manager/admin/src/containers/Main';
import CustomWelcome from '../components/CustomWelcome';

const Main = () => {
  return (
    <StrapiMain>
      <CustomWelcome />
    </StrapiMain>
  );
};

export default Main;

1. Create a new file called CustomWelcome.js inside the ./admin/src/components/ directory of your plugin.

2. Add your custom UI to the CustomWelcome.js file:

import React from 'react';

const CustomWelcome = () => {
  return (
    <div>
      <h1>Welcome to my custom Strapi Admin panel!</h1>
      <p>This is my custom welcome message.</p>
    </div>
  );
};

export default CustomWelcome;

1. Register your plugin in the ./admin/src/index.js file of your Strapi application:

import pluginPkg from '../../package.json';
import pluginId from './pluginId';
import MyCustomWelcomePage from './containers/Main';

const strapi = window.strapi;

strapi.registerPlugin({
  id: pluginId,
  name: pluginPkg.strapi.name,
  description: pluginPkg.strapi.description,
  icon: pluginPkg.strapi.icon,
  pluginRequirements: pluginPkg.strapi.pluginRequirements,
  isReady: true,
  contentTypes: [],
  injectables: [],
  mainComponent: MyCustomWelcomePage,
});

That's it! Your custom welcome page will now be displayed when you login to your Strapi Admin panel.