DEV Community

Cover image for How to customize Strapi Dashboard / Home Page: The Right Way
Gaurav Adhikari
Gaurav Adhikari

Posted on • Originally published at gauravadhikari.com

1

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() {},
}
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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 }
    }
  },
}
Enter fullscreen mode Exit fullscreen mode

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay