How to customize Strapi Dashboard / Home Page

7 Dec 2024 1 min

Table of Contents

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

function 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 ☕