DEV Community

Cover image for MoonShine 4: AI-Powered Admin Panel Revolution
Danil Shutsky
Danil Shutsky

Posted on • Edited on

MoonShine 4: AI-Powered Admin Panel Revolution

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:

  • 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:

Criteria / Feature MoonShine Filament Orchid Nova
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(
            <<<CSS
                :root {
                    --spacing: 0.25rem;
                    --text-xs: 14px;
                    --text-sm: 14px;
                    --ms-btn-icon-size:16px;
                }
                CSS,
        ),
    ];
}
Enter fullscreen mode Exit fullscreen mode

Palettes: Branding in 1 Minute

Problem and Solution

Branding is an important part of an admin panel. And replacing the logo doesn't solve all needs. But if the admin panel uses brand colors, it gives the feeling that the entire panel was written from scratch for business needs, the client will feel maximally comfortable in it! Previously, you had to manually work with styles. Now, using design tokens, you can override all template parameters at once through a separate layer, which we called Palettes.

Palettes - Default and Brand

For the new design, we initially wanted to make a black-and-white palette the default. Since many complained: "MoonShine is a bad admin panel - we don't like the purple color." But later we decided that after all, it's MoonShine - it's already a certain brand that we want to initially demonstrate. And we left the default palette in familiar colors.

But you can switch to another palette in a second or create your own.

final class MoonShineLayout extends AppLayout
{
   protected ?string $palette = NeutralPalette::class;
}
Enter fullscreen mode Exit fullscreen mode

Palette Generator

A palette generator appeared on getmoonshine.app. Here you can see all the box palettes. When you install MoonShine, it will offer you a palette to choose from. Here's the neutral theme, it looked like this.

There are more unusual color schemes, for example, Halloween.

Notably, the palette generator is implemented on MoonShine. There's no additional JS here, no additional CSS, no additional components - completely on MoonShine.

The feature of this generator is that you can customize the palette to the necessary colors, see how it will look and export it for your project. Simple and convenient.

Generating Palettes with Forty-Five

And with Forty-Five, you can generate a color scheme in one prompt and the LLM itself will create a class, put it in the right directory and connect it to the system. But I won't get ahead of myself, I'll tell you about Forty-Five below.

New Design: Creation History

Design History

Often in comments people wrote to me that MoonShine's design is bad, looks scary. But I understood that design is a matter of taste - you can't please everyone. But there were many reviews about weak design of MoonShine 3 and I decided. I wrote to the same person (a cool specialist who made the landing page for Yii3) who last time made the default design for MoonShine 1.5, only now taking into account all the shortcomings. We collected feedback and rolled up our sleeves.

In the end, we succeeded. My opinion - it's fire. But already in the MoonShine chat I saw that again people write: "The design is not very good, we should have used shadcn." But essentially this will always be the case, there will always be people who don't like something.

New Template Capabilities

Layout Customization

In the third version of MoonShine, the sidebar was always pressed to the left side of the screen. And the content area was pressed to it. And you couldn't add a second sidebar (without CSS dances). Now there's the ability to make any sidebar combinations.

Here are sidebars both on the left and right.

Now let's return to customizing the content block. If you need to center the content block, just change the template property:

final class MoonShineLayout extends AppLayout
{
    protected bool $contentCentered = true;

    // …
}
Enter fullscreen mode Exit fullscreen mode

By default false. If we set true, we get the content area in the center.

You can remove the Sidebar and this view is perfect for working with MVPs.

MoonShine Forty-Five: AI Changes the Game

What It Is and Why

MoonShine Forty-Five - LLM-powered admin panel creation assistant.

Why such a name? MoonShine translates as moonshine. Standard 40 proof, and this is a stronger thing - 45. More advanced, stronger - from which there's more pleasure.

The package was created so that your AI agent works with MoonShine at level 80. For now it only supports Claude Code, but I'm sure it has a big future ahead. Taylor Otwell, Nuno Maduro will immediately make reviews and start contributing.

How It Works (Step by Step)

Installation:

npm install -g @moonshine-software/forty-five
Enter fullscreen mode Exit fullscreen mode

And then the principle of operation is like with GitHub SpecKit.

Adding strong MoonShine to the project:

forty-five init
Enter fullscreen mode Exit fullscreen mode

Forty-five will download all necessary guidelines and add its custom commands to Claude Code for work.

Then you call Claude Code, write a Forty-Five command and give a task.

Forty-Five Commands

Currently five commands are available. Let's break them down.

1. /forty-five.palettes

Here, I think, everything is clear. You can generate palettes based on AI. I didn't tell you this, but all those 20 palettes that are in the box were generated in Forty-Five. And then we approved them as MoonShine directors. Plus we fine-tuned them a bit.

Let's strain the agent, let it make us a palette in Batman colors.

Here's what we got. Well, so-so result, probably the idea about Batman wasn't very successful. Or Claude didn't watch Batman.

2. /forty-five.layout

Well, making color schemes isn't the most useful thing. The Layouts command allows you to do more serious tasks. You can use a component approach and build pages with Forty-Five. Under the hood, it has a huge guideline on components with detailed rules for their correct use, which the LLM follows:

  • If you need a sidebar - Forty-Five will wrap it in <x-wrapper>
  • If you ask for a "button in the center" - it will add .justify-center
  • If you say "without borders" - it will apply .border-none to the needed component
  • Everything with icons, colors and spacing works according to rules understandable to the LLM agent

And you'll get ready-made pages according to your prompt. For example, I simply wrote:

"make a page with a list of users, with a filter and an add button"

This is in one prompt, friends! Everything as ordered. It's possible that if the task wasn't stated very precisely (or the result wasn't quite what you wanted), then you'll need to work additionally on this task together with Forty-Five. For example, add dividers somewhere, play with spacing, and so on.

3. /forty-five.components

This command allows you to quickly generate ready-made UI interface elements based on MoonShine blade components. Tables, modal windows, forms, lists - everything needed to build a user interface.

Under the hood of the command is a huge guideline on the entire MoonShine blade component library:

  • Correct HTML structure without tag duplication
  • All necessary wrappers and CSS classes in place
  • Correct use of slots (slot-based patterns)
  • All logic for working with icons, badges, buttons

And you'll get ready-made Blade templates as a result, for example:

"create a user table with avatars, name, email, status badges, and action buttons"

4. /forty-five.field

This command allows you to create custom fields for MoonShine. If you need something specific that's not in the standard field set - Forty-Five will generate everything necessary.

Under the hood of the command are detailed guidelines on MoonShine field structure:

  • Correct PHP class structure with Field inheritance
  • Blade view with correct wrappers and CSS classes
  • Alpine.js integration for interactivity
  • Support for fluent methods for configuration

And you'll get ready-made custom fields according to your prompt. For example, I simply wrote:

"create a rating field with stars from 1 to 5, with the ability to click on a star and select a rating"

Result: PHP class, Blade view with Alpine.js, correct saving to database.

5. /forty-five.component

The last command is for creating custom components. Unlike fields, components are used to decorate the interface and are not directly related to model data.

Under the hood of the command is knowledge about:

  • The difference between components and fields
  • Correct component structure
  • Working with slots and nested components

And you'll get ready-made UI components as a result, for example:

"create a 'statistics card' component - with icon, value, and label"

We get: PHP class with fluent methods, beautiful layout, and icon support.

Using Forty-Five

Forty-Five doesn't just generate code - it understands MoonShine best practices. If the result wasn't quite what you wanted, just clarify the details in the next prompt: "add mass delete capability" or "make the content field mandatory only for published articles". Forty-Five understands the context of your previous generation and makes targeted changes.

Time Saving is Reality

Imagine: instead of an hour of manual work setting up fields, filters, and relationships, you get a ready result in a couple of minutes. Moreover, a result that follows all MoonShine rules, uses the correct components, and is optimized for your needs. Forty-Five is an excellent tool, but it can't guess your thoughts. Everything depends on how well you set the task for it. And you still need to know the documentation. But with the appearance of such tools, the rules of the development game are changing. You can simply connect Forty-Five and get a personal cabinet in one prompt. Or you can make full MVPs.

Telegram Mini App: Admin in Your Pocket

Since the middle of the year, I've been working on one project (Task Manager). Its feature is integration with Telegram Mini App. As it turned out, it's very convenient! Developing such an application is much easier than writing an app for mobile applications. Sometimes I had the idea to make an application for the admin panel, and this is just a suitable elegant solution! And I made a package with Telegram Mini App integration into MoonShine. It's simple to use. Install it, specify the bot token, Mini App URL, user's Telegram ID in the admin panel. That's it! The admin panel can be used in Telegram Mini App. Of course, this doesn't replace the web interface, but surely you've had the need to do something in the admin panel from your phone. With Telegram Mini App, it's much more convenient to do this.

Documentation from the Community

Working on MoonShine 4 Documentation

This time there was a super cool team for documentation, the guys really pleased me. If last time I gathered about 10 volunteers from the community for documentation. But I did about 90% myself.

This time I practically didn't touch the documentation. I wrote that there's a task to make documentation, 11 people volunteered. But all the work was done by Anatoliy, Egor, and Vladislav. And we managed with the documentation exactly on schedule. Plus, the guys not only wrote documentation, they also updated packages for MoonShine 4, offered practical advice - in general, a huge contribution. And I'll have gifts for them: it will be merch and all kinds of useful things. I motivate from my side as I can!



MoonShine School

MoonShine is constantly evolving and everyone can participate in it.

If you ask the guys in the MoonShine chat who helped with documentation, most of them will say that for them it was a very cool experience. Working in a team on MoonShine is like taking a course in teamwork. And writing code is just one of the tasks - the most diverse skills are needed - documentation, design, layout, promotion. I, in turn, will continue to work with the team. Some guys admitted that when there's routine and boredom at work, the hobby of working on MoonShine captivated them, plus they're developing well as specialists. And I myself as a developer have greatly leveled up precisely on MoonShine.

PHPStorm Plugin: Automating Routine

A plugin for PHPStorm by Dima Derepko. Created specifically for working with MoonShine.

Main features:

  1. Provides smart autocompletion for classes, fields, and components.

  1. Simplifies navigation through the project via special icons in the editor - you can quickly navigate between related elements, for example from resources to Eloquent models and back.

  1. In the "New" context menu, a separate MoonShine menu appears for quick creation of typical files: resources, pages, fields, components, layouts, etc. Each file type is generated through a dialog box with corresponding parameters based on a template.


And New Project will immediately create a clean project on Laravel+MoonShine.

For those who work in PHPStorm - I highly recommend trying it!

What's More?

Upgrade Guide: Migration from Version Three

A convenient tool for updating from the third to the fourth version. Egor made an Upgrade Script with Rector under the hood. It will do most of the routine work, and you'll need to manually finish your customizations. If you're planning to upgrade a project from version three to four, I recommend using the script. Then familiarize yourself with the Upgrade Guide - it's not that big.

In general, when preparing the release, we tried as much as possible to maintain compatibility between versions 3 and 4. Somewhere previous versions of classes remain, which are marked as Deprecated. They still work for now, but you should gradually get rid of them - they will be removed in MoonShine 5.

Add-ons Store - Ready-Made Solutions

MoonShine 4 has an official marketplace. This is a section where ready-made solutions for typical tasks are placed.

Imagine: you need a file manager integration. You can spend several hours a day writing from scratch, or you can install a ready-made package in 5 minutes that's already used on hundreds of projects and works like clockwork. That's what the marketplace was created for - so you don't waste time on what someone has already solved before you.

What's Interesting There?

File Manager - file manager with drag-and-drop, image previews, file organization.

MoonShine Roles-Permissions - if you need a system of roles and access rights, this is your choice. Built on the basis of the famous Spatie Laravel Permissions. 12,000+ downloads - one of the most popular packages. Mass role assignment, custom rights - all out of the box.

MoonShine Spatie MediaLibrary - integrates the functionality of the popular Laravel-MediaLibrary package from Spatie, for managing media files in the admin panel.

Two-Factor Authentication - two-factor authentication for the admin panel.

User Impersonation - a cool thing for support. Need to reproduce a client's bug? Log in under their account and see everything with your own eyes. Debugging is much easier.

Sortable tree resource - adds the ability to create and manage tree structures with sorting function (drag-and-drop), for organizing hierarchical data such as categories or menus.

CKEditor or TinyMCE - powerful visual editors.

Language Packs - localization packages for the admin panel interface itself. Russian, Ukrainian, German, Chinese, Romanian - choose any.

The marketplace is growing. People are constantly adding new packages for different tasks. There's a monetization opportunity.

In general, the marketplace is not for show. It's a really useful thing that saves a ton of time on typical tasks. And time in development is money.

Where to Start Working with MoonShine

The answer is simple - with the documentation. We tried to make the documentation friendly for beginners and detailed. Quick start here:
https://getmoonshine.app/docs/4.x/quick-start

Development Plans: What's Next

In the near future, I'll make another panel. In addition to the sidebar, there will be an internal panel. Also, most likely nested menus will be improved so they drop not down but to the side (upd.: already added in MoonShine 4.1).

I'll continue to develop Telegram Mini App. Most likely some components in Telegram style will be added for it. Perhaps there will be a menu at the bottom with main sections to make it even more convenient to use the admin panel from the phone.

Well, I'll develop all kinds of AI integrations - this is already a mandatory tool for a modern developer.

Abundant feedback and suggestions for MoonShine development are welcome!

Conclusion

I really hope that after reading this article you'll try MoonShine in action. And that after this you won't want to use other admin panels. 😊 That's the minimum program. 😊 And perhaps you'll be so inspired that you'll donate, work with the code, or help promote MoonShine, which is especially important. Thanks for your attention! I'm waiting for you in the MoonShine chat.

MoonShine 4 Promo Video

MoonShine 4 Promo

Links

Community:

Top comments (2)

Collapse
 
forwarddev profile image
Forward Dev

Thanks for the detailed overview! 🎯 The approach of "admin panel as a service for your framework" instead of a separate SaaS is, in my opinion, the only right one for non-standard tasks.

I see huge potential in the SEO Assistant and Content Generator for client projects on Laravel. What's great is that all components seem highly flexible, so extending these AI features or even creating a custom one for example, with "forty-five" looks straightforward. πŸ’ͺ

Congrats on the release, it looks powerful! πŸš€

Collapse
 
shevldev profile image
Shevelev Anatolii

The best admin panel!