How to customize Strapi Dashboard / Home Page: The Right Way

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
     >



<p>This is how the final version of app.tsx looks like and you are done. ?<br>
</p>

<pre class="brush:php;toolbar:false">// 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

The above is the detailed content of How to customize Strapi Dashboard / Home Page: The Right Way. For more information, please follow other related articles on the PHP Chinese website!