November 11, 2025 at 11:11 - this important date will go down in MoonShine history. Four ones = fourth version. Symbolism? Perhaps. But behind these numbers is something more - 11 months of continuous work, with the last 6 in super intensive development mode. In this article, we'll break down all the changes in MoonShine 4: from the new palette and token system to AI-generated interfaces. MoonShine 4 truly changes the rules for working with admin panels. I wrote this article for those interested in open-source/Laravel/Filament/admin panels. Enjoy reading.
MoonShine is an open source admin panel for Laravel projects. And not just for Laravel.
History and Context
The Story of One Decision
When I started working on version four, I could have taken the easy path: a small refactoring, updating dependencies to current versions, updating Tailwind to version 4 - and calling it MoonShine 4. Safe. Planned. Boring.
But deep down, I didn't want such a release. I wanted to do something cool. Each MoonShine release has been a challenge for me, and I want to maintain this trend. And then the decision was made to create a new design. Despite the fact that crowdfunding for the new design raised only a small portion of what was needed. Despite the fact that the main contributors couldn't actively participate. Despite everything.
What Came of It
MoonShine 4 is not just an update. It's a serious transformation:
Everything in order.
Thanks to Sponsors
I want to immediately say a big thank you again to everyone who supports MoonShine on GitHub, through direct donations and on Boosty. I estimated the design and layout update for MoonShine at $3,000, but we raised much less. The rest had to be added from my own funds. But I'm confident the situation will change for the better.
Release Date 11.11
As for the date 11.11 - it happened by accident. But there's an interesting moment I'd like to share with you. I didn't associate this number with MoonShine in any way, but probably for the last year, I've been periodically looking at the time and seeing 11:11.
Initially, the release was planned for November 1st. But I had to think about a postponement date. I'm choosing a date in the calendar. I look: 11.11. And I think: "How cool! That's 4 ones - that's exactly MoonShine 4!"
We added 4 stripes-sticks to the artwork. And many people wrote: "But those aren't Roman numerals! You wrote it wrong!" But actually, it's 4 ones. And I posted in Telegram with the promo video at 11.11 at 11:11. Such moments are cool. Surely, this will bring great success 😄
What is MoonShine
MoonShine is a convenient and multifunctional admin panel that helps developers quickly create administrative interfaces for their web applications based on the Laravel framework (one of the most popular tools for creating websites in PHP), as well as other frameworks.
Brief overview of MoonShine capabilities:
Ultra-Fast Development (Time Saving):
MoonShine is a ready-made constructor for an admin panel. You don't need to write forms, tables, and buttons for data management from scratch. You use ready-made components, which dramatically speeds up project creation. You can use MoonShine components not only inside the admin panel - with their help, you can build a personal cabinet or an entire project.
Simple Data Management (CRUD):
The main task of an admin panel is to manage information. MoonShine allows you to easily perform all CRUD operations (Create, Read, Update, Delete) for users, orders, articles, and other data in your database or through an API. Everything is intuitive and doesn't require complex code.
AI Assistant (Forty-Five) - Creating Interfaces in One Prompt:
The built-in AI agent MoonShine Forty-Five is your personal assistant. You can literally ask it to create an entire page in one prompt (request), for example: "Make a page with a list of users, a filter, and an add button." This incredibly speeds up work.
Branding and Appearance in 1 Minute:
With the new Palette and Design Token system, you can instantly change the color scheme, fonts, and panel spacing so it looks like your brand. There are 20+ ready-made palettes and a special generator that simplifies this process.
Admin Panel Always With You (Telegram Mini App):
Thanks to Telegram Mini App integration, your admin panel opens right inside Telegram. This means that to work from a mobile phone, you don't need a separate, complex to develop mobile app.
MoonShine vs Competitors
Quickly evaluate the differences between the most popular admin panels for Laravel:
* No admin panel received high performance. Not because they're all bad, but because admin panels aren't about performance, they're about speed of implementation.
In fact, MoonShine has a lot in common with Filament. And here everyone chooses a tool to their liking - if you want a lot of sugar and like to use ready-made elements, then Filament is closer to you, but one step to the left - and you already face problems and run to the chat for help. If you consider yourself a developer, then MoonShine will be better here - there are ready-made solutions for popular tasks, and if you need something custom, it's convenient to do it yourself. That was yesterday. And today MoonShine has Forty-Five, and any component can be made in one prompt.
A small advertisement. Here's the result of executing one prompt:
"Make a field with Yandex Maps integration":
And one more difference - MoonShine has already gone beyond Laravel. There's a basic admin panel MoonShine for Symfony, there's the possibility to make an implementation for Yii and other frameworks! If you're interested - write, we'll discuss!
Main Features
New Structure: Order in Code
What are Resources, Pages, Components and Fields (basics for beginners)
Any page opened in a browser within the MoonShine admin panel is called just that - a page. It consists of a template (Layout) which can be different for each page. By default, there's a template for the login page, for CRUD pages, and a template for error pages. And the content of the page is MoonShine components. In MoonShine, everything is broken down into components, each HTML tag is a component, and you can configure your templates and pages with them.
CRUD pages operate with data. By default, data is based on Eloquent models, and pages created for CRUD operations within a specific model are combined into a resource. A resource groups a set of pages with a common data type, helps retrieve data, save and delete: a complete CRUD set. The basis for CRUD pages is, of course, a form for editing them and a table for displaying the entire list. The table and form are also MoonShine components. And how to display data inside is the task of fields, by analogy with fields in tables. With fields, we configure what we display: a text field or a field with an image.
CRUD Module
Everything related to CRUD has been extracted into a separate module. This was done so that CRUD modules can be used outside Laravel. This idea came when I was making an implementation of MoonShine for Symfony. You can take this CRUD module and make it for any framework. Or use it in Laravel for any data type other than Eloquent.
The Problem with the Old Structure (MoonShine 3)
Before version 4, you had to configure the set of fields for all pages from the resource. You could move to separate pages, but that was already an option. With this approach, the resource itself grew, there was a lot of logic about which fields to display on which page. In chats, there were many questions: how do I check which page I'm currently on to properly configure fields? And it seemed convenient - everything in one place, but in fact, it wasn't.
Solution in MoonShine 4
By default, when creating a resource, three pages are also created for the data list, editing/creation, and detailed display. Now this is not an option, and each page has responsibility for everything that happens on it. Also, the main page components - on the index - table, for creation/editing - form, and table on the detail page are extracted into separate layers and can also be overridden and customized.
Tailwind 4 and Design Tokens: Customization Without Limits
What Changed
A lot of work was done to upgrade Tailwind to version 4. Done by Artem Vaco. This is not just a new number in the metrics - the appearance of Tailwind 4 gave great opportunities for working with color schemes and layout. A design token system was created, with which you can quickly customize the appearance.
Design tokens are the basic components of a design system: variables that store colors, sizes, spacing, and typography. In our case, they allow you to quickly make global changes to the layout by changing just one token value.
For example, there's spacing. You can simply override spacing through the main template - and instead of 1.5, set 1.0. And the entire theme will become more compact, since everything here is implemented on spacing.
Any color, any border radius, any padding - everything is implemented on design tokens. You can generally override anything you want.
protected function assets(): array
{
return [
InlineCss::make(
<<
MoonShine is an open source admin panel for Laravel projects. And not just for Laravel.
History and Context
The Story of One Decision
When I started working on version four, I could have taken the easy path: a small refactoring, updating dependencies to current versions, updating Tailwind to version 4 - and calling it MoonShine 4. Safe. Planned. Boring.
But deep down, I didn't want such a release. I wanted to do something cool. Each MoonShine release has been a challenge for me, and I want to maintain this trend. And then the decision was made to create a new design. Despite the fact that crowdfunding for the new design raised only a small portion of what was needed. Despite the fact that the main contributors couldn't actively participate. Despite everything.
What Came of It
MoonShine 4 is not just an update. It's a serious transformation:
- New design - UI work, taking into account all past mistakes
- New architecture - CRUD extracted into a separate module for use outside Laravel with any data type
- Design token system - ability to customize every interface element
- AI integration - MoonShine Forty-Five - generator for working with Claude Code
- Telegram Mini App - quick integration
- 20+ ready-made palettes - and a generator for creating your own
- Comprehensive documentation - documentation almost entirely prepared by the community
Everything in order.
Thanks to Sponsors
I want to immediately say a big thank you again to everyone who supports MoonShine on GitHub, through direct donations and on Boosty. I estimated the design and layout update for MoonShine at $3,000, but we raised much less. The rest had to be added from my own funds. But I'm confident the situation will change for the better.
Release Date 11.11
As for the date 11.11 - it happened by accident. But there's an interesting moment I'd like to share with you. I didn't associate this number with MoonShine in any way, but probably for the last year, I've been periodically looking at the time and seeing 11:11.
Initially, the release was planned for November 1st. But I had to think about a postponement date. I'm choosing a date in the calendar. I look: 11.11. And I think: "How cool! That's 4 ones - that's exactly MoonShine 4!"
We added 4 stripes-sticks to the artwork. And many people wrote: "But those aren't Roman numerals! You wrote it wrong!" But actually, it's 4 ones. And I posted in Telegram with the promo video at 11.11 at 11:11. Such moments are cool. Surely, this will bring great success 😄
What is MoonShine
MoonShine is a convenient and multifunctional admin panel that helps developers quickly create administrative interfaces for their web applications based on the Laravel framework (one of the most popular tools for creating websites in PHP), as well as other frameworks.
Brief overview of MoonShine capabilities:
Ultra-Fast Development (Time Saving):
MoonShine is a ready-made constructor for an admin panel. You don't need to write forms, tables, and buttons for data management from scratch. You use ready-made components, which dramatically speeds up project creation. You can use MoonShine components not only inside the admin panel - with their help, you can build a personal cabinet or an entire project.
Simple Data Management (CRUD):
The main task of an admin panel is to manage information. MoonShine allows you to easily perform all CRUD operations (Create, Read, Update, Delete) for users, orders, articles, and other data in your database or through an API. Everything is intuitive and doesn't require complex code.
AI Assistant (Forty-Five) - Creating Interfaces in One Prompt:
The built-in AI agent MoonShine Forty-Five is your personal assistant. You can literally ask it to create an entire page in one prompt (request), for example: "Make a page with a list of users, a filter, and an add button." This incredibly speeds up work.
Branding and Appearance in 1 Minute:
With the new Palette and Design Token system, you can instantly change the color scheme, fonts, and panel spacing so it looks like your brand. There are 20+ ready-made palettes and a special generator that simplifies this process.
Admin Panel Always With You (Telegram Mini App):
Thanks to Telegram Mini App integration, your admin panel opens right inside Telegram. This means that to work from a mobile phone, you don't need a separate, complex to develop mobile app.
MoonShine vs Competitors
Quickly evaluate the differences between the most popular admin panels for Laravel:
| Performance* | Medium | Low | Medium | Medium |
| Free | + | + | + | - |
| Highly Customizable | + | +/- | +/- | - |
| Detailed Documentation | + | + | + | + |
| Frequently Updated | + | + | - (Aug 13) | + |
| Beginner Friendly | + | + | - | + |
| Color Palette Customization | + | + | - | + |
| Video Guides | + | + | - | + |
| Stack | TAL | TALL | LBH | VILT |
| Any Data Type | + | Eloquent | + | Eloquent |
| Ability to Use Components | + | +/- | +/- | - |
| Convenient for MVP Development | + | - | - | - |
| Ecosystem | +/- | + | +/- | + |
| Online Demo Availability (quantity) | + (3) | + (1) | - | + |
| Ready-Made Solutions Marketplace | + | + | - | + |
* No admin panel received high performance. Not because they're all bad, but because admin panels aren't about performance, they're about speed of implementation.
In fact, MoonShine has a lot in common with Filament. And here everyone chooses a tool to their liking - if you want a lot of sugar and like to use ready-made elements, then Filament is closer to you, but one step to the left - and you already face problems and run to the chat for help. If you consider yourself a developer, then MoonShine will be better here - there are ready-made solutions for popular tasks, and if you need something custom, it's convenient to do it yourself. That was yesterday. And today MoonShine has Forty-Five, and any component can be made in one prompt.
A small advertisement. Here's the result of executing one prompt:
"Make a field with Yandex Maps integration":
And one more difference - MoonShine has already gone beyond Laravel. There's a basic admin panel MoonShine for Symfony, there's the possibility to make an implementation for Yii and other frameworks! If you're interested - write, we'll discuss!
Main Features
New Structure: Order in Code
What are Resources, Pages, Components and Fields (basics for beginners)
Any page opened in a browser within the MoonShine admin panel is called just that - a page. It consists of a template (Layout) which can be different for each page. By default, there's a template for the login page, for CRUD pages, and a template for error pages. And the content of the page is MoonShine components. In MoonShine, everything is broken down into components, each HTML tag is a component, and you can configure your templates and pages with them.
CRUD pages operate with data. By default, data is based on Eloquent models, and pages created for CRUD operations within a specific model are combined into a resource. A resource groups a set of pages with a common data type, helps retrieve data, save and delete: a complete CRUD set. The basis for CRUD pages is, of course, a form for editing them and a table for displaying the entire list. The table and form are also MoonShine components. And how to display data inside is the task of fields, by analogy with fields in tables. With fields, we configure what we display: a text field or a field with an image.
CRUD Module
Everything related to CRUD has been extracted into a separate module. This was done so that CRUD modules can be used outside Laravel. This idea came when I was making an implementation of MoonShine for Symfony. You can take this CRUD module and make it for any framework. Or use it in Laravel for any data type other than Eloquent.
The Problem with the Old Structure (MoonShine 3)
Before version 4, you had to configure the set of fields for all pages from the resource. You could move to separate pages, but that was already an option. With this approach, the resource itself grew, there was a lot of logic about which fields to display on which page. In chats, there were many questions: how do I check which page I'm currently on to properly configure fields? And it seemed convenient - everything in one place, but in fact, it wasn't.
Solution in MoonShine 4
By default, when creating a resource, three pages are also created for the data list, editing/creation, and detailed display. Now this is not an option, and each page has responsibility for everything that happens on it. Also, the main page components - on the index - table, for creation/editing - form, and table on the detail page are extracted into separate layers and can also be overridden and customized.
Tailwind 4 and Design Tokens: Customization Without Limits
What Changed
A lot of work was done to upgrade Tailwind to version 4. Done by Artem Vaco. This is not just a new number in the metrics - the appearance of Tailwind 4 gave great opportunities for working with color schemes and layout. A design token system was created, with which you can quickly customize the appearance.
Design tokens are the basic components of a design system: variables that store colors, sizes, spacing, and typography. In our case, they allow you to quickly make global changes to the layout by changing just one token value.
For example, there's spacing. You can simply override spacing through the main template - and instead of 1.5, set 1.0. And the entire theme will become more compact, since everything here is implemented on spacing.
Any color, any border radius, any padding - everything is implemented on design tokens. You can generally override anything you want.
protected function assets(): array
{
return [
InlineCss::make(
<<