patload-theme-quantum-leap

Dark admin UI theme for Payload with a custom dashboard home and login view

Overview

Summary generated from the README

A demo theme for the Payload admin panel built with Next.js and MongoDB, based on a white-label admin mockup. It overrides existing Payload styles with SCSS and adds custom components for the login screen, dashboard home, feature cards and navigation. It covers the admin UI only and has no frontend application. Light mode is not supported, and the list and edit views are not themed.

Features

SCSS overrides of existing Payload admin styles
Custom BeforeLogin component for the login view
Custom Dashboard home with feature cards
Custom Nav component
MongoDB database adapter with local disk storage
Lexical rich text editor configured

Good for

Reference for customizing the Payload admin UI with styles and custom components
Starting point for a white-label admin panel with a dark dashboard and login design

From the author

A blank template to get started with Payload 3.0

Get started

git clone https://github.com/akhrarovsaid/payload-theme-quantum-leap.git

README

readme-banner1

Quantum Leap - a PayloadCMS theme

This is a demo theme for PayloadCMS based on this excellent mockup on the Payload website. This theme is primarily focused on the Dashboard home and Login views.

Preview video

Getting started

Clone this repo
Copy .env.example to .env and populate as needed
Run pnpm dev

Navigating the files

The bulk of the theming is done in the theme folder where you have the .scss files. These are mostly overrides for existing Payload styles. There are various components included, the most interesting ones here are the BeforeLogin, Dashboard, FeatureCard, and Nav components as they make up the bulk of the dashboard view.

Some notes

Light mode is not supported right now, this is meant to be just a simple demo of how easy it can be to customize virtually anything in the admin ui.
The List/Edit views weren't the focus of this demo theme and may come at a later time.
This is a simple demo that includes a theme for the admin ui only. There is no frontend application attached to this theme.