Tilly The Coder
Tilly The Coder
Home
Blog
Filament v4.1: New UI Tricks – And Why Filament v5 Is Already Here
Tilly The Coder

Filament v4.1: New UI Tricks – And Why Filament v5 Is Already Here

Tilly The Coder
10 mins
This is the estimated time it takes to read the article.

Filament 4 was the big one: new directory structure, PHP 8.2 and Laravel 11 baseline, Tailwind v4, and a more coherent panel story overall.

Filament v4.1 is different. It’s a “make your life nicer” release: no new paradigm, but a handful of UI and DX upgrades you actually feel when you build panels every day.

At the same time, if you look at GitHub you’ll already see Filament v5.0.0-beta tags, plus a v4.3.0 release line. So:

  • What exactly did 4.1 introduce?

  • How does it fit into the current 4.x line (now at 4.3)?

  • And why is there a Filament 5 at all if 4.x just landed?

In this article we’ll go through:

  • What Filament v4.1 added on top of v4.0

  • How the new layout, editor, and repeater features work in practice

  • The new EmptyState schema and why it matters for UX

  • What Filament v5 is, and why it’s “just” about Livewire 4

  • How to choose between Filament 4.x and 5 for new and existing apps

Where Filament v4.1 fits in the timeline

Roughly:

  • Mid–2025: Filament v4.0 goes stable.

  • Sep 29, 2025: Filament v4.1 ships, with:

    • 156 bug fixes

    • 39 new features

  • Dec 5, 2025: Latest 4.x is already 4.3.0, which builds on the 4.1 foundation.

  • Oct 30, 2025: Filament v5.0.0-beta is announced at wire:live.

So 4.1 is not “the latest” anymore, but it is the minor where some visible UX features landed for the first time: the no-topbar layout, rich editor grid and colors, compact repeaters, table-style repeatable entries, and the EmptyState schema.

If you’re on any recent 4.x (4.1, 4.2, 4.3…), you have these tools available. Let’s walk through them.

What’s new in Filament v4.1

New panel layout: no topbar, more canvas for content

If you build dense admin panels, the topbar can feel like a luxury. v4.1 gives you an official panel layout that simply removes it.

  • The user menu, notifications, and global search can move into the sidebar.

  • You reclaim vertical space for tables, dashboards, and forms.

  • The whole panel starts to feel more “app-like”, especially on smaller laptops.

Enabling it is a single line in your panel provider:

<?php

namespace App\Providers\Filament;

use Filament\Panel;
use Filament\PanelProvider;

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            // ... your existing setup
            ->topbar(false);
    }
}

This is particularly nice if:

  • You’re building data-heavy backoffice UIs.

  • You want a strong, branded sidebar and a minimal chrome elsewhere.

  • Your users live in tables and forms 8 hours a day and want maximum viewport.

Rich editor grids: structured content without leaving the editor

The v4 rich editor is TipTap-based. v4.1 adds a grid tool so content editors can create responsive layouts directly inside the editor:

  • Up to 12 columns wide.

  • Presets for common splits (50/50, 1/3–2/3, etc.).

  • Optional asymmetric layouts (limited to 2 columns).

  • Nested grids for more complex layouts.

Enable the grid tool by adding it to toolbarButtons():

use Filament\Forms\Components\RichEditor;

RichEditor::make('content')
    ->toolbarButtons([
        ['bold', 'italic', 'link', 'h2', 'h3'],
        ['grid', 'attachFiles'], // place 'grid' wherever you like
    ]);

This gives you:

  • Marketing-style blocks (text + screenshot, feature list in columns)

  • Side-by-side comparisons or FAQs

  • “CMS inside admin panel” without dropping down to Blade for every layout tweak

Rich editor text colors: controlled emphasis

Alongside grids, v4.1 adds a text color tool:

  • Editors can highlight words or whole phrases.

  • There’s a default Tailwind-based palette.

  • You can define your own colors, with light/dark-aware variants.

Basic enable:

use Filament\Forms\Components\RichEditor;

RichEditor::make('content')
    ->toolbarButtons([
        ['bold', 'italic', 'link', 'h2', 'h3'],
        ['textColor', 'attachFiles'],
    ]);

Custom palette:

use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\RichEditor\TextColor;

RichEditor::make('content')
    ->toolbarButtons([
        ['bold', 'italic', 'link'],
        ['textColor'],
    ])
    ->textColors([
        // Simple HEX key => label
        '#0ea5e9' => 'Brand',

        // Named color with custom dark-mode variant
        'warning' => TextColor::make('Warning', '#f59e0b', darkColor: '#fbbf24'),

        // Keep the defaults too
        ...TextColor::getDefaults(),
    ])
    ->customTextColors(); // allow arbitrary colors in the picker

The important bits:

  • Using TextColor::make() handles accessibility differences between light and dark themes for you.

  • Adding your own colors overrides the defaults, so if you still want them, spread TextColor::getDefaults() into your array.

For product copy, notifications, or help text, this lets you introduce controlled emphasis without turning the editor into a rainbow factory.

Compact table repeater: spreadsheet-ish data entry

The table repeater arrived with v4; v4.1 refines it with a compact style:

  • Inputs like TextInput and Select visually become part of the cell.

  • Row density improves; it feels closer to a spreadsheet or CSV editor.

Enable compact mode like this:

use Filament\Forms\Components\Repeater;

Repeater::make('members')
    ->table([
        // define columns (labels, widths, alignment, etc.)
    ])
    ->compact()
    ->schema([
        // your actual form fields for each column
    ]);

This is a good fit for:

  • Order line items (product, quantity, price).

  • Membership or team lists.

  • Any scenario where inline editing is more ergonomic than dialogs.

Table layout for RepeatableEntry in infolists

On the “read-only” side, infolists get a similar upgrade.

RepeatableEntry can now render its items in a table layout:

  • Each repeatable item becomes a row.

  • You control the visible columns via TableColumn definitions.

  • You can mix TextEntry, IconEntry, etc. in the schema.

Example:

use Filament\Infolists\Components\IconEntry;
use Filament\Infolists\Components\RepeatableEntry;
use Filament\Infolists\Components\RepeatableEntry\TableColumn;
use Filament\Infolists\Components\TextEntry;

RepeatableEntry::make('comments')
    ->table([
        TableColumn::make('Author'),
        TableColumn::make('Title'),
        TableColumn::make('Published'),
    ])
    ->schema([
        TextEntry::make('author.name'),
        TextEntry::make('title'),
        IconEntry::make('is_published')->boolean(),
    ]);

Great for:

  • Change histories

  • Comment or approval logs

  • Small “related items” lists that don’t justify a full table widget

EmptyState schema: first-class “nothing here yet” UX

Instead of sprinkling if ($collection->isEmpty()) messages around Blade, v4.1 introduces an EmptyState schema component you can drop anywhere:

  • Heading

  • Description

  • Icon

  • Footer actions (primary/secondary calls to action)

Example:

use Filament\Actions\Action;
use Filament\Schemas\Components\EmptyState;
use Filament\Support\Icons\Heroicon;

EmptyState::make('No users yet')
    ->description('Get started by creating a new user.')
    ->icon(Heroicon::OutlinedUser)
    ->footer([
        Action::make('createUser')
            ->icon(Heroicon::Plus),
    ]);

You can use this:

  • On list pages with zero records.

  • Inside dashboard widgets when there’s not enough data.

  • In custom flows (e.g. “no API keys yet”, “no webhooks configured”).

The big win is consistency: your empty states become declarative UI, not ad-hoc conditionals.

How “big” is the 4.0 → 4.1 upgrade?

From a risk perspective, 4.1 is a normal minor:

  • The new layout/editor/repeater/empty-state features are all opt‑in.

  • You mostly get bug fixes (156 of them) and smaller DX tweaks for free.

  • Upgrading from 4.0 to a recent 4.x (4.1–4.3) is usually:

    • composer update filament/filament

    • Run your tests and a quick manual sweep.

The jump that actually changes requirements and structure is 3.x → 4.x:

  • PHP 8.2+

  • Laravel 11.28+

  • Tailwind CSS 4.1+ if you ship a custom Filament theme

  • New default directory structure for resources and clusters

For that, there’s a dedicated upgrade guide and an automated upgrader package. Once you’re on 4.x, staying current within the 4.x series is relatively uneventful.

So… why is there already a Filament v5?

On paper it looks wild: 4.0 stable in mid–2025, 4.1 in September, and by October you’re already hearing “Filament v5 beta”.

The important bit: Filament v5 is not a “new Filament” in the way 2 → 3 or 3 → 4 were.

From the official “Filament v5 Beta is Here!” post:

  • v5 does not introduce new Filament features or breaking API changes of its own.

  • The main reason it exists is Livewire v4.

Filament relies heavily on Livewire, and Livewire v4 is a major release with new capabilities and internal changes. The team had two options:

  1. Quietly bump Livewire to v4 in a 4.x minor.

  2. Treat “Filament + Livewire 4” as a new major line.

They chose (2), which is the conservative, semver‑respecting route.

Consequences:

  • Filament 4.x will not support Livewire 4.

  • If you want Livewire 4 features inside a Filament app, you’ll run Filament 5.

  • The Filament surface area between 4.x and 5 is intentionally almost identical.

In other words: 5 is “Filament 4, but on Livewire 4” plus normal incremental improvements that are also being released on the 4.x line (for now, 4.3.0 and v5.0.0-beta6 share a lot of the same changeset).

Is v5 production-ready?

As of today:

  • Latest 4.x: v4.3.0 (stable).

  • Latest 5.x: v5.0.0-beta6 (still a beta).

v5 is already quite feature-complete, but:

  • It’s explicitly tagged as a beta.

  • Plugin authors are still in the process of adding “Filament 5 / Livewire 4” to their compatibility matrices.

  • The core team is using this period to shake out Livewire‑4‑specific edge cases.

For most production workloads, that points to:

  • 4.x as the default stable choice.

  • v5 beta as something you try first on non‑critical or internal projects.

Which Filament version should you use right now?

For a new project where you just want a solid admin:

  • Use the latest 4.x (currently 4.3.0).

  • Take advantage of the 4.1+ goodies:

    • No-topbar layout where it makes sense.

    • Rich editor grids/text colors for content-heavy areas.

    • Compact table repeaters for line-item editing.

    • EmptyState schema for polished “zero data” flows.

For an existing Filament 4.0 project:

  • Upgrade to the latest 4.x; treat 4.1+ as the baseline.

  • You’ll get a large batch of fixes and can opt into the UI improvements incrementally.

  • Start tracking your dependencies’ plans for Filament 5 / Livewire 4, but don’t feel rushed.

For an existing Filament 3.x project:

  • Your next real jump is 3 → 4, not 4 → 5.

  • Follow the official 4.x upgrade guide and automated script.

  • Once you’re comfortably on 4.x, you can revisit the Livewire 4 story.

If you specifically want Livewire 4 features now:

  • Experiment with Filament v5 beta in a staging or internal app.

  • Upgrade path will roughly be:

    • Make sure your Laravel / PHP stack supports Livewire 4.

    • Upgrade Livewire 3 → 4 following Livewire’s own guide.

    • Switch Filament 4.x → 5.x once your plugins are compatible.

  • Be prepared to coordinate with plugin authors if you rely heavily on third-party packages.

How I’d approach this on a real codebase

If I’m shipping a client-facing SaaS admin or a critical internal tool today:

  • Standardize on Filament 4.3.x.

  • Use 4.1+ features where they clearly help UX:

    • No-topbar layout on dense resource screens.

    • Rich editor enhancements only where non-developers edit content.

    • Compact repeaters for any “rows of inputs” UI.

    • EmptyState in all main list and dashboard views.

  • Keep an eye on:

    • Plugin changelogs adding “supports Filament 5 / Livewire 4”.

    • Filament’s version support policy:

      • 4.x gets new features until 5.x is stable.

      • 4.x gets bug fixes for ~1 year after 5.x stable.

      • 4.x gets security fixes for ~2 years after 5.x stable.

If I’m building a greenfield side project and I like living on the edge:

  • Try Filament v5 beta and Livewire 4 together.

  • Expect the APIs to feel extremely familiar if you already know 4.x.

  • Use that project as a rehearsal for the eventual 4 → 5 upgrade of your main apps.

The key mental model:

  • Filament v4.1 (and now 4.3) is where the visible UX and DX improvements are today.

  • Filament v5 is primarily about tracking Livewire 4 in a semver-clean way, not about rewriting how Filament works.

If you treat 4.x as your reliable workhorse and 5.x as “the Livewire 4 train that’s arriving soon”, you can time your jump based on your stack’s needs instead of release hype.