Strapi is a powerful headless CMS that provides a robust admin panel. But sometimes, you want to make it your own for branding, but the Strapi official docs miss the how-tos of customizing the admin homepage. This quick guide shows you how to customize Strapi’s Admin Panel the right way, and easy as well.
Rename src/admin/app.example.tsx to app.tsx
Change the contents to
// src/admin/app.tsx
import type { StrapiApp } from "@strapi/strapi/admin"
export default {
config: {
locales: [],
},
bootstrap() {},
}
Just create a Homepage.tsx file with your custom Homepage
// src/admin/Homepage.tsx
const Homepage = () => {
return (
<div
style={{
textAlign: "center",
backgroundColor: "#f1f1f1",
padding: "20px",
borderRadius: "5px",
fontFamily: "Arial, sans-serif",
fontSize: "24px",
color: "#333",
fontWeight: "bold",
}}
>
Welcome to the CMS!
</div>
)
}
export { Homepage }
This is how the final version of app.tsx looks like and you are done. 😉
// src/admin/app.tsx
import type { StrapiApp } from "@strapi/strapi/admin"
export default {
config: {
tutorials: false,
locales: [],
},
bootstrap() {},
register(app: StrapiApp) {
const indexRoute = app.router.routes.find(({ index }) => index)
if (!indexRoute) throw new Error("unable to find index page")
indexRoute.lazy = async () => {
const { Homepage } = await import("./Homepage")
return { Component: Homepage }
}
},
}
Kind credits to Andrew Bone for his solution in https://feedback.strapi.io/feature-requests/p/customize-the-admin-panel-welcome-page-strapi-5
Thanks for reading! I hope you learned something useful.
Have questions or ideas for improving this guide? Let me know in the comments below
Top comments (0)