Open Closed

React: Admin console #10798

User avatar
0
Frontis2 created

How can we customize the styling of the admin console? It looks like it's provided as a NuGet package, so while we're able to style the frontend, the admin console always keeps its default appearance. Is there a recommended way to apply our own styling to it?

Markdown supported.
Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Go to accepted answer
9 Answer(s)
  • User Avatar
    0
    AI-Bot created
    Support Team ABP Agent
    • In the modern React templates, the Admin Console is a separate, pre-built React application delivered via the Volo.Abp.AdminConsole NuGet package and hosted under /admin-console/*. Because it’s not part of your React app’s source code, you can’t style it the same way you style your own frontend (e.g., by editing Tailwind config or app-level CSS).
    • The recommended customization approach is:
      1. Do your product-specific UI/styling in your developer-owned React app (full control).
      2. For the Admin Console, use the supported host-side customization options, which include providing a theme override CSS path (i.e., inject your own CSS override file for the Admin Console) and other limited settings (app name, localization, etc.).
      3. If you need deeper UI changes than CSS overrides (layout/components), ABP’s guidance is to build those pages in your own React app rather than trying to “take over” the Admin Console UI (it’s designed to stay upgradeable via package updates).

    Sources (validated):

    • https://abp.io/docs/10.4/framework/ui/react/admin-console
    • https://abp.io/docs/10.5/framework/ui/react/admin-console
    • https://abp.io/community/articles/7rfmgb2v

    This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Frontis2 created

    Could you please verify the AI's answer? I'd also like to understand the roadmap. Specifically, is this something that's currently on the roadmap, or not?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Hi,

    The Admin Console ships as a packaged React app, but you don't have to live with its default look — it's designed to be re-skinned from the host side, and the React template already wires this up for you.

    Your generated solution already contains a wwwroot/theme-override.css file, and the host's appsettings.json already points to it:

    {
  "AdminConsole": {
    "ThemeOverrideCssPath": "/theme-override.css"
  }
}

    So the styling entry point is that file — just edit it. The Admin Console is built on a shadcn/Tailwind CSS-variable theme, and the generated theme-override.css already defines the full light/dark token set (:root and .dark). Change the values you want and the whole UI follows — colors, surfaces, borders, radius:

    :root {
  --primary: oklch(0.62 0.19 260);
  --primary-foreground: oklch(1 0 0);
  --background: oklch(1 0 0);
  --secondary: oklch(0.97 0.01 260);
  --accent: oklch(0.96 0.02 260);
  --border: oklch(0.92 0.01 260);
  --radius: 0.375rem;
}

.dark {
  --primary: oklch(0.68 0.17 260);
  --background: oklch(0.18 0.02 268);
}

    The file already lists the other tokens too (--foreground, --card, --popover, --muted, --destructive, --input, --ring, etc.), so you can adjust as much or as little as you want. This file is loaded after the console's own stylesheet, so overriding these theme variables takes precedence. If you go beyond the variables and target specific elements with your own selectors, that works as well — just keep in mind the internal class names can change across package upgrades, and a few third-party widgets (code editor, date picker) use their own colors that the tokens won't fully drive.

    For branding, use ApplicationName and LogoUrl in the same AdminConsole section. An SVG logo is the safest choice, since the same URL is also used for the favicon. There's no separate font option, but you can set body { font-family: ... } in the override CSS.

    If you'd rather manage these at runtime instead of in config, set CustomizationPermissionName (the template already defines AdminConsole.Customization). Users with that permission get a Customization page inside the Admin Console for the application name, logo, and theme-override CSS path, stored as settings.

    On how far this goes: the packaged Admin Console is intentionally kept as an upgradeable surface, so the supported customization model is host-side branding plus the CSS override above — that's the path for restyling it. It's not meant to be edited as source in a layered/single-layer solution, so for structural UI changes (custom layout or components, not just styling) the place to build those is your own React app. The microservice template is the one shape where the Admin Console is shipped as a real source app (apps/react-admin-console/).

    If there's a specific change you have in mind that the CSS override can't reach, tell us exactly what you want to adjust and we'll point you at the best way to do it.

    Thanks

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Frontis2 created

    Thanks for the clarification. If I understand correctly, the takeaway is that if you want to significantly customize the look and feel, you'll end up rebuilding quite a few of the built-in pages yourself.

    That also applies to the Account/Profile pages, since they are part of the Admin Console. In practice, this means you would need to recreate those pages in each application as well if you want a consistent branded experience.

    Is that a correct understanding? And is the ABP team considering improvements in this area, so that applications can achieve a custom look and feel without having to reimplement so much of the existing functionality?

    AS in ....

    Are there any plans to make the React Account module more similar to the classic UI approach? In the classic UI, the Account module UI (login, registration, password reset, etc.) can be downloaded as part of the ABP modules and customized within the application. It would be great if React offered a similar option, allowing developers to use and customize those pages without having to recreate them from scratch while still benefiting from the built-in ABP Account functionality.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    alper created
    Support Team Director

    actually in the AI era, customizing the UI look is simple and everybody has different UI customization level. therefore ABP Studio'a AI agent can do the rest for you. and it'll customize exactly how you want.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Hi,

    Building on Alper's answer: the AI agent helps with the editable files in your solution — the theme override, your own React app, your Razor overrides. The boundary is that in a layered/single-layer solution the Admin Console ships as a package, so its pages aren't generated source you edit directly; you brand it rather than rewrite it. How that splits out:

    Branding the Admin Console (colors, surfaces, borders, radius) is one file. Your solution already ships wwwroot/theme-override.css, wired through AdminConsole:ThemeOverrideCssPath; editing it re-skins the whole console, including its account and profile screens (my account, sessions, linked/external logins, security logs) — they share the same shadcn/Tailwind tokens, so there's nothing to redo page by page. App name and logo are separate options (AdminConsole:ApplicationName / LogoUrl).

    The boundary is that it's token-level. A few fixed status colors (badges and the like) aren't token-driven — you can still target them with your own CSS selectors, but those rely on internal class names that can change on package upgrades. Genuine structural or content changes aren't CSS at all, and in a layered solution there's no page source to edit for that.

    The sign-in flow is separate: the default OIDC sign-in, and the register/forgot/reset pages it links to, are the classic server-side MVC Account module (/Account/*) — the same module you can already pull as source and customize through your MVC theme and Razor overrides. Your main React app (react/) also ships its own Login, Register, Forgot Password and Reset Password pages as editable source, though those are your app's auth pages, not the packaged Admin Console's profile screens.

    To answer your last question directly: for layered/single-layer there isn't a separate downloadable React Account UI module like the MVC one — those profile screens live inside the packaged Admin Console. The microservice template is the exception: there the Admin Console is generated as source (apps/react-admin-console/), so you edit its pages directly.

    Thanks

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Frontis2 created

    Thanks for the detailed explanation. I can understand the reasoning from ABP’s perspective, especially the goal of keeping the Admin Console separately upgradeable.

    However, from a developer’s perspective—particularly for a junior developer starting a new project—the generated solution now seems to contain three separate UI surfaces:

    • The main React frontend
    • The Admin Console
    • The Bootstrap/LeptonX-based login and registration flow

    Although I understand that we can generate code against the backend, I would expect a newly generated project to feel clean, consistent, and ready to use. At the moment, it is not immediately clear which application should be used for what or where development should begin.

    Having the login and registration flow hosted separately is understandable. The Admin Console as a third distinct UI, however, makes the overall solution feel somewhat fragmented.

    Is there a roadmap for bringing these experiences closer together or otherwise simplifying it?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Hi,

    You're right that in a layered or single-layer solution the Admin Console being a package you can't touch is the part that feels separate.

    We're considering adding an option to include it as source in these templates, the way the microservice template already does. With that you could keep the Admin Console in your own solution and shape it like the rest of your app, while the default stays as the package for teams who'd rather keep it simple and upgradeable.

    Thanks

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    Frontis2 created

    Thanks, i'll close this topic..

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
    1
Assignee
User avatar maliming
Question details
Labels
None yet
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.8.0-preview. Updated on September 28, 2026, 11:44
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.