How to customize Strapi Dashboard / Home Page

Q: What specific files need to be modified or created to implement this customization?

You need to rename 'src/admin/app.example.tsx' to 'app.tsx' and then create a new file named 'Homepage.tsx' within the same 'src/admin' directory.

Q: What kind of content can I include on my custom Strapi homepage?

Since the custom homepage is defined as a React component (Homepage.tsx), you can include any valid JSX. This allows for custom text, images, links, or more complex interactive elements to be displayed.

7 Dec 2024 2 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

Frequently Asked Questions

What is the primary purpose of customizing the Strapi Dashboard homepage?

The main purpose is to personalize the Strapi Admin Panel for branding, to provide a custom welcome message, or to tailor the initial experience for users logging into the CMS. It replaces the default Strapi welcome screen.

What specific files need to be modified or created to implement this customization?

You need to rename src/admin/app.example.tsx to app.tsx and then create a new file named Homepage.tsx within the same src/admin directory.

What kind of content can I include on my custom Strapi homepage?

Since the custom homepage is defined as a React component (Homepage.tsx), you can include any valid JSX. This allows for custom text, images, links, or more complex interactive elements to be displayed.

Does this customization method require deep knowledge of Strapi's internal architecture?

No, the guide provides exact code snippets and clear, step-by-step instructions. While a basic understanding of React and TypeScript is helpful for further customization, the provided solution is straightforward to implement.

What version of Strapi does this customization apply to?

Strapi v5.

Can I revert the changes and go back to the default Strapi homepage?

Yes, you can easily revert the changes by undoing the modifications made to app.tsx and deleting the Homepage.tsx file. If you kept a backup of the original app.example.tsx before renaming, that would also help in restoring the default.

Thanks for reading! I hope you learned something useful.

~ Buy Me A Coffee ☕