EasyAdmin 5.7 is out with a new development tool for everyone who creates custom pages and custom actions in their backends: the UI Kit. It lists all the Twig components included in EasyAdmin and, for each of them, it shows live examples, their source code and all their options.
If you know tools like Storybook, the idea is similar. But you don't have to install, configure or run anything: the UI Kit is already part of EasyAdmin and it's rendered inside your own backend.
The Problem: Which Components Exist?
EasyAdmin builds its interface with Twig components (<twig:ea:Button>, <twig:ea:Alert>, <twig:ea:Modal>, etc.) and you can use them in your own templates too. The documentation explains how to use them but we also wanted a visual guide.
The Solution: a UI Kit Inside Your Backend
When your application runs in debug mode, every dashboard now includes a new page at the /_ea_ui_kit path (e.g. https://example.com/admin/_ea_ui_kit). The easiest way to get there is the Symfony profiler: open any page of your backend, click on the EasyAdmin panel and you'll see a direct link to the UI Kit in the Resources section.
The first page lists all the available components:
Click on any component to see its page, which includes lots of examples, the full API reference and all its sub-components.
You See What Your Users See
This is my favorite part of the UI Kit: the examples are rendered in real time inside your own dashboard, so they use your assets, your theme and all the design changes you made to your backend (custom colors, border radius, CSS overrides, etc.).
You don't see how components look in a generic demo application, you see exactly how they will look in your backend when you use them. If you changed the primary color or removed the rounded corners, the UI Kit reflects that.
Note: The UI Kit is a development tool, so it's only enabled in debug mode. In production, this feature and its URL don't even exist, so they don't impact performance in any way.
A Refreshed Profiler Panel
While working on this, we also refreshed the EasyAdmin panel of the Symfony profiler. It was designed for the old query string URLs, so with the new pretty admin URLs it showed very little information. Now it displays the route, the CRUD controller, entity, action and page (or the controller and method of custom admin routes), the list state (sort, filters, search query and page number) and the dashboard details, such as the title, locale, icon set and theme.
Always Use EasyAdmin Components
There's another reason why we built the UI Kit. When you create a custom page or a custom action in your backend, always build it with EasyAdmin components. Don't use Bootstrap classes directly and don't create your own HTML and CSS unless EasyAdmin doesn't provide a component for what you need yet.
The reason is simple: when you use EasyAdmin components, your custom pages get better every time EasyAdmin improves its components, and you don't have to do anything. Better design, better accessibility, dark mode, new options... you get all of that just by upgrading EasyAdmin. Your custom pages also look the same as the rest of your backend.
The list of components is short today, but we're going to add many more components very soon.
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
Top comments (0)