How to customize Strapi Dashboard / Home Page

Customize Strapi Dashboard / Home Page

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.

~ Buy Me A Coffee ☕

Strapi admin panel customizationChange Strapi Dashboard textHow to change Strapi Dashboard name