1 | initial version |
In Strapi v4, the Admin Welcome page UI can be overridden by creating a custom plugin. Here are the steps to do so:
strapi generate:plugin my-custom-welcome-page
Create a new file called index.js
inside the ./admin/src/containers/Main/Main.js
directory of your plugin.
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;
Create a new file called CustomWelcome.js
inside the ./admin/src/components/
directory of your plugin.
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;
./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.