New in EasyAdmin 5.2: Twig Components, Polished UI, and Theming Groundwork

EasyAdmin 5.2 is out, and this release focuses on the visual experience. It introduces (1) more of the UI as reusable Twig components, (2) a polished, more modern interface, and (3) the groundwork for backend theming.

Best of all, none of this introduces breaking changes. Every existing backend continues to work exactly as before, while looking a little better.

The road to a fully component-based UI

One of EasyAdmin's long-term goals is to render the entire UI using Twig components. Why does that matter? Because as soon as part of the interface becomes a component, you can reuse it in your own templates, whether for custom pages, dashboard widgets, or custom actions, while maintaining exactly the same look and feel as the rest of your backend.

EasyAdmin already provides components such as Button, Badge, Icon, Alert, ActionMenu, and Flag:

<twig:ea:Alert variant="warning" title="Disk space low" withDismissButton>
    The server is running out of disk space.
</twig:ea:Alert>

<twig:ea:Badge variant="success" class="product-status" data-status="published">
    Published
</twig:ea:Badge>

EasyAdmin 5.2 adds three more: Switch, Pagination, and Modal. It also expands several existing components with new features. To make them easier to discover, there's a new Twig Components documentation page with practical examples for every component.

Modals that finally look the part

Let's start with my favorite new feature. EasyAdmin has always used modal dialogs for delete confirmations, batch actions, filters, and more. Until now, they used Bootstrap's default styling, which looked functional but somewhat dated.

BEFORE: default styling, including a dark backdrop, shown at the top of the screen and with a slide in/out animation

In EasyAdmin 5.2, modals have been completely refreshed with a cleaner, more modern design inspired by projects such as shadcn/ui.

AFTER: custom styling, with a slightly blurred backdrop, shown at the center of the screen and with a fade in/out animation

The best part is that modals are now available as a reusable component. Opening and closing them is handled by two lightweight helper components, so you no longer need to remember Bootstrap's data-bs-* attributes:

{# a button that opens the modal #}
<twig:ea:Modal:Trigger target="#delete-modal" variant="danger" icon="internal:delete">
    Delete
</twig:ea:Modal:Trigger>

{# the modal itself #}
<twig:ea:Modal id="delete-modal" title="Delete this item?" description="This action cannot be undone.">
    <twig:block name="footer">
        <twig:ea:Modal:Close>Cancel</twig:ea:Modal:Close>
        <twig:ea:Button variant="danger">Delete</twig:ea:Button>
    </twig:block>
</twig:ea:Modal>

Modal:Trigger and Modal:Close both wrap <twig:ea:Button>, so they support all of the same props (variant, icon, size, etc.). Need something more sophisticated? Modals also support multiple sizes (sm, lg, xl), an optional icon above the content, and fully customizable body and footer blocks:

<twig:ea:Modal id="warn-modal" size="lg" topIcon="internal:circle-exclamation" title="Are you sure?">
    <twig:block name="body">
        <p>Any markup you need goes here.</p>
    </twig:block>
    <twig:block name="footer">
        <twig:ea:Modal:Close>No</twig:ea:Modal:Close>
        <twig:ea:Button variant="primary" data-bs-dismiss="modal">Yes</twig:ea:Button>
    </twig:block>
</twig:ea:Modal>

Note: Under the hood, these modals still rely on Bootstrap's JavaScript implementation. Only the visual design and developer experience have changed.

Better Looking Switches

Rather than waiting for a major release to redesign the entire interface, we're gradually modernizing EasyAdmin through smaller improvements in each minor release. Switches (the on/off toggles) are a good example. In EasyAdmin 5.2, they've been redesigned with a more polished appearance and are now available as a reusable component:

<twig:ea:Switch checked />

<twig:ea:Switch checked variant="success" size="sm" ariaLabel="Enable notifications" />

Previously, switches always used the same size and color. They now support multiple color variants (success, warning, danger) and sizes (sm, md).

Badges in form tabs

Outside the component work, here's a small but useful addition: you can now display a badge next to a form tab label. This is perfect for showing the number of related items or highlighting sections that need attention:

use EasyCorp\Bundle\EasyAdminBundle\Field\FormField;

yield FormField::addTab('Shipping')->setBadge($order->getShipments()->count());

yield FormField::addTab('Reviews')->setBadge('New', 'warning');

Badge content can be a string, number, boolean, any Stringable object, or even a callable, which is evaluated lazily. If the resolved value is null or false, the badge is hidden automatically. This makes expressions such as ->setBadge($errorCount ?: null) work exactly as expected.

Theming, coming soon

The biggest change in EasyAdmin 5.2 (and recent versions) is also the least visible. We're laying the foundation for a future theming system that will let you customize the entire backend using a small set of global design variables, much like shadcn/ui.

Building that theming feature requires a lot of internal work. EasyAdmin's CSS is being reorganized so that colors, spacing, border radii, and other visual properties are driven by a compact set of design tokens. Much of that refactoring has already landed in 5.2, although there's still more work ahead.

Summary

EasyAdmin 5.2 introduces more reusable Twig components, incremental visual improvements, and the foundation for theming, all while remaining 100% backwards compatible.

---

✨ If you enjoyed this feature and want to see more like it, consider sponsoring the EasyAdmin project 🙌💡