Back to Blog

Tools

Admiral

Backend

Frontend

Customizing the Admin Panel UI in Admiral

Artur Valokhin

Artur Valokhin, lead frontend developer

Jun 16, 2025

7 minutes

Contents
We know that many web developers find the lack of flexible UI customization in admin panels to be problematic, especially when those panels are prepackaged npm libraries. Often, these solutions are too limiting in terms of styling, making minor visual adjustments, adapting components to brand guidelines, and overriding styles time-consuming and frustrating.
When building our component library in Admiral, we focused on making the UI layer as developer-friendly and customizable as possible.
In this article, we’ll explain how Admiral’s styling system is structured, which techniques and tools make it flexible, and how you can easily apply your own styles or override the defaults with minimal effort.

Changing the Application Theme

Themes in Admiral are based on Consta.design. Without going into too much detail, the main requirement is to include variable definition files in your project using a predefined naming convention.
A directory containing all the necessary files has already been set up for you. You can find it here. Simply update the variable values to match the visual style of your project.
Once that's done, you can pass your custom presets for light and dark themes directly into the Admin component.

import themeLight from './config/theme/themeLight'
import themeDark from './config/theme/themeDark'


<Admin
    themePresets={{light: themeMaterialLight, dark: themeMaterialDark}}
>
    <Routes />
</Admin>
The base color definitions are located at the top of the theme variable files and serve as the foundation for the entire color palette. Updating the values of these base variables automatically adjusts all derived theme colors.

--color-base-base: #171a22;
   --color-base-essential: #fff;
   --color-base-project: #472f92;
   --color-base-phantom: #bb2121;
   --color-base-path: #5856d6;
   --color-base-system: #ced8de;
   --color-base-success: #62bb46;
   --color-base-alert: #eb5757;
   --color-base-warning: #f38b00;
   --color-base-caution: #f2c94c;
   --color-base-normal: #56b9f2;
   --color-base-critical: #33000f;

Customizing Component Styles

When designing the Admiral component library, we intentionally included support for CSS-based style overrides. So you can open the needed component (for example, Card component), and identify which CSS variables must be defined in your project to customize specific styles.
Card.module.scss
.card {
   width: var(--card-width, 100%);
   padding: var(--card-pt, var(--space-3xl)) var(--card-pr, var(--space-3xl))
       var(--card-pb, var(--space-3xl)) var(--card-pl, var(--space-3xl));


   border-radius: var(--card-radius, var(--radius-m));
   background: var(--card-bg, var(--color-control-bg-default));
   color: var(--card-color, var(--color-control-typo-default));
   box-shadow: var(--shadow-group);
}
In the example above, to change the background color of the Card component, simply define the --card-bg, CSS variable. To adjust the border radius, use the --card-radius variable.
There are three ways to apply these variables:
  1. Globally
  2. Per-page
  3. Locally
Let’s briefly go over each approach.

Global Variable Creation

To apply styles to all Card components across the project, define the necessary CSS variables in a global stylesheet and assign them to the :root pseudo-class. If you already have a global styles file, declare the variables at the top. If you don’t, create one in a suitable location and import it into your main.tsx file like this:
main.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './global.css'


ReactDOM.render(
   <React.StrictMode>
       <App />
   </React.StrictMode>,
   document.getElementById('root'),
)
global.css

:root {
   --card-bg: red;
   --card-radius: 8px;
}

Page-Level Variable Creation

To override component styles on specific pages, wrap the page content in a CSS class and define your variables within that class's scope.
Create a component for the page.
index.tsx

import React from 'react'
import { CRUD } from '@/src/crud/users'
import styles from './UsersPage.module.scss'


const UsersPage = () => (
   <div className={styles.users_page}>
       <CRUD.IndexPage />
   </div>
)


export default UsersPage
UsersPage.module.scss
Create a CSS file for the page.

.users_page {
   --card-bg: blue;
   --card-radius: 30px;
}
Import the page component into the appropriate directory within the Pages directory to establish routing.
pages/users/index.tsx

import UsersPage from '@/src/components/pages/UsersPage'


export default UsersPage

Local Variable Creation

If we need to override the styles of specific components, we wrap them in a CSS class that is given variables.
For instance, if there is a Card component at the top of the CRUD page's content and we want to change its style, we can do so by doing the following:
index.tsx

export const CRUD = createCRUD({
   ...config,
   topContent: (
       <div className={styles.topContent}>
           <Card>
               <h2>Hello!</h2>
           </Card>
       </div>
   ),
})
css-file

.topContent {
   --card-bg: green;
   --card-radius: 8px;
}
✍ Local variables have the highest priority, even if variables are already defined in the global file.
In the example below, both local and page-level modifications are applied, where local variables override page-level ones.
In addition to customizing the theme with CSS variables, you can pass a className to most components. This allows you to modify a specific component. This makes customizing your admin panel much easier with Admiral.
Still have questions about customizing the appearance of the admin panel in Admiral? We are here to help!
📩 Email us
Tags:
ReactJS
Аdmin-panel

You may also like: