EasyAdmin Is Getting a Brand New Design

EasyAdmin recently passed 20 million downloads, and to celebrate it we've been working on a big redesign. Don't worry: your users won't get lost, because all pages keep the same structure. It just looks better now.

Here's a first look. This is how a backend looks by default now:

And this is how the exact same backend will look in the next EasyAdmin version:

A closer comparison between both:

All the screenshots in this post show the same application with the same data, using the default design of each version. We didn't customize anything yet. The next post in this series shows a full customization example.

New Default Look

Before, backends looked blue by default: blue gray palette and blue/indigo accent color. Now, backends use a neutral gray palette and accent color, which makes it less opinionated. The new design also uses less color, so your data and your main actions stand out more:

This is only the default, though. You can change all the colors, fonts and spacing with a few config options.

The app shell has changed too. Your content now lives in its own panel, with a thin border and a small margin around it, and the sidebar blends with the background. It's a small change, but it makes your backend look like a modern application instead of a set of web pages:

We've also redesigned the handles that expand and collapse the sidebar and the content. The old narrow vertical line was hard to click. The new handles sit in the middle of the page and have a large invisible click area. Resizing is animated too.

Tables

People spend most of their time in a backend looking at tables, so we've polished the spacing, headers, badges, actions and search highlights.

Detail Pages

Labels are now aligned to the start of the line, and all fields use the same order. Booleans no longer swap their label and value. Here's a close up detail:

Forms

Form pages also have a new look, as shown in this mockup comparison:

Fieldsets show the biggest design difference, but we have tweaked and polished many form parts. For example, read-only fields now look like plain text, so nobody tries to edit them, and validation errors no longer turn the field labels red. This is the same form in both versions:

Help Messages

The help of a page used to be hidden behind a big, ugly icon, and you had to interact with it to read the message. Now the first line is always visible, and you can click a small button to read the rest.

Custom Pages

Most backends need some custom pages: a report, a help page, instructions for your team. Until now, headings, lists, quotes and tables had almost no styles on those pages, so you had to write your own CSS.

EasyAdmin now includes a stylesheet that makes your contents look good by default. Extend the @EasyAdmin/page/content.html.twig template, write regular HTML and you're done. See the difference:

Components

Everything else has a new look too: buttons (now with solid, outline, light, ghost and link variants), dropdown menus, filters, alerts, tabs, modals and pagination.

Animations

We've reviewed all animations and interactions. For example, batch actions now slide into place instead of appearing suddenly:

If you've enabled reduced motion in your system, you won't see these animations.

Dark Mode and Small Screens

Dark mode gets the same treatment:

And we've redesigned the page header on small screens:

What About Your Existing Backends?

You won't need to change any PHP code to get the new look. Update EasyAdmin when the new version is out, and that's it.

If your backend has custom CSS, templates or pages, some of them may need small adjustments. You can also remove a lot of the custom CSS you added to make things look good, such as the styles of your text contents. We've written two upgrade guides to help you:

• UPGRADE.md is for humans, with a concise overview of the changes that affect you.
• UPGRADE-AI.md is for AI coding agents, with a detailed list of the low-level changes. Paste the given prompt into Claude Code, Codex, Cursor or similar tools, and the agent will look for what needs updating in your backend.

If you prefer to keep the current design, changing the look and feel of your backend is very simple. The following PHP config brings you very close to it:

namespace App\Controller\Admin;

use EasyCorp\Bundle\EasyAdminBundle\Attribute\AdminDashboard;
use EasyCorp\Bundle\EasyAdminBundle\Config\Dashboard;
use EasyCorp\Bundle\EasyAdminBundle\Config\Option\Font;
use EasyCorp\Bundle\EasyAdminBundle\Config\Option\GrayScale;
use EasyCorp\Bundle\EasyAdminBundle\Config\Theme;
use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractDashboardController;

#[AdminDashboard(routePath: '/admin', routeName: 'admin')]
class DashboardController extends AbstractDashboardController
{
    public function configureDashboard(): Dashboard
    {
        return Dashboard::new()
            // ...
            ->setTheme(Theme::new()
                ->primaryColor('hsl(230, 61%, 58%)', dark: 'hsl(224, 84%, 49%)')
                ->grays(GrayScale::SLATE, dark: GrayScale::NEUTRAL)
                ->radius('xs')
                ->font(base: Font::System, monospace: Font::System)
            );
    }

    // ...
}

Coming Soon

The new design is coming in the next EasyAdmin release. To get notified, watch the EasyAdmin repository on GitHub or follow me here on dev.to.

Everything you've seen in this post is just what EasyAdmin gives you by default. In the next post, we'll change all of it: colors, fonts, corners, spacing... The same backend will look like a different product, with only a few lines of PHP.

Support EasyAdmin development:

⭐ Upgrade to EasyAdmin Pro for advanced features like Audit Log and Content Lock
❤️ Become a sponsor if EasyAdmin helps your company ship faster