|
| 1 | +--- |
| 2 | +title: "Filament v4.1 is here!" |
| 3 | +slug: danharrin-filament-v4-1 |
| 4 | +author_slug: danharrin |
| 5 | +publish_date: 2025-09-29 |
| 6 | +categories: [general] |
| 7 | +type_slug: news |
| 8 | +--- |
| 9 | + |
| 10 | + |
| 11 | + |
| 12 | +We're very excited to announce the release of **Filament v4.1**! |
| 13 | + |
| 14 | +Since v4.0 was released, the core team and community have been hard at work: |
| 15 | + |
| 16 | +- **156 bug fixes merged** |
| 17 | +- **39 brand new features** |
| 18 | + |
| 19 | +That's a lot of code reviewed, tested, and merged, and it wouldn't have been possible without the amazing efforts of the entire community. 💛 |
| 20 | + |
| 21 | +Special thanks to: |
| 22 | +- [**Adam Weston**](https://github.com/awcodes) for helping port rich editor improvements from his excellent v3 TipTap plugin. |
| 23 | +- [**@People-Sea**](https://github.com/People-Sea) for investigating bug reports from the community and providing a ton of fixes. |
| 24 | + |
| 25 | +## Our favourite new features in v4.1 |
| 26 | + |
| 27 | +Here are a few of the highlights we're most excited about. |
| 28 | + |
| 29 | +### New Panel Layout (No Topbar) |
| 30 | + |
| 31 | +We've introduced a **panel layout option without a topbar**. This is perfect for apps that want to maximize vertical space. The user menu, notifications button, and global search can move to the sidebar, which opens up some interesting theming possibilities. |
| 32 | + |
| 33 | +We can't wait to see what you build with it! |
| 34 | + |
| 35 | + |
| 36 | + |
| 37 | +To enable this layout, pass `false` to the `topbar()` method in your panel configuration: |
| 38 | + |
| 39 | +```php |
| 40 | +use Filament\Panel; |
| 41 | + |
| 42 | +public function panel(Panel $panel): Panel |
| 43 | +{ |
| 44 | + return $panel |
| 45 | + // ... |
| 46 | + ->topbar(false); |
| 47 | +} |
| 48 | +``` |
| 49 | + |
| 50 | +Special thanks to [**Nolan Nordlund**](https://github.com/nolannordlund) for his time spent on this feature! |
| 51 | + |
| 52 | +### Rich Editor Grid Tool |
| 53 | + |
| 54 | +You can now insert **responsive grids** into rich editor content, up to 12 columns wide. |
| 55 | + |
| 56 | +This includes asymmetrical splits (like a 2-column grid where one column takes 1/3 of the space). Perfect for more advanced layouts inside content. |
| 57 | + |
| 58 | + |
| 59 | + |
| 60 | +To enable this feature, add the `grid` tool to your rich Eeitor `toolbarButtons()`: |
| 61 | + |
| 62 | +```php |
| 63 | +use Filament\Forms\Components\RichEditor; |
| 64 | + |
| 65 | +RichEditor::make('content') |
| 66 | + ->toolbarButtons([ |
| 67 | + ['bold', 'italic', 'link', 'h2', 'h3'], |
| 68 | + ['grid', 'attachFiles'], // The grid tool can be added anywhere in the toolbar |
| 69 | + ]) |
| 70 | +``` |
| 71 | + |
| 72 | +### Rich Editor Text Color Tool |
| 73 | + |
| 74 | +The rich editor now supports **text color selection**. You can pick from the default Tailwind color palette or pick your own custom color. You can also provide a custom color palette for users to pick from. |
| 75 | + |
| 76 | +When picking from a palette, light/dark mode accessibility is handled automatically for the user. |
| 77 | + |
| 78 | + |
| 79 | + |
| 80 | +To enable this feature, add the `textColor` tool to your rich editor `toolbarButtons()`: |
| 81 | + |
| 82 | +```php |
| 83 | +use Filament\Forms\Components\RichEditor; |
| 84 | + |
| 85 | +RichEditor::make('content') |
| 86 | + ->toolbarButtons([ |
| 87 | + ['bold', 'italic', 'link', 'h2', 'h3'], |
| 88 | + ['textColor', 'attachFiles'], // The text color tool can be added anywhere in the toolbar |
| 89 | + ]) |
| 90 | +``` |
| 91 | + |
| 92 | +You can also customize the color palette that is available using the `textColors()` method: |
| 93 | + |
| 94 | +```php |
| 95 | +use Filament\Forms\Components\RichEditor; |
| 96 | +use Filament\Forms\Components\RichEditor\TextColor; |
| 97 | + |
| 98 | +RichEditor::make('content') |
| 99 | + ->textColors([ |
| 100 | + '#0ea5e9' => 'Brand', |
| 101 | + 'warning' => TextColor::make('Warning', '#f59e0b', darkColor: '#fbbf24'), |
| 102 | + ]) |
| 103 | +``` |
| 104 | + |
| 105 | +[Documentation →](https://filamentphp.com/docs/4.x/forms/rich-editor#customizing-text-colors) |
| 106 | + |
| 107 | +### Compact Table Repeater Style |
| 108 | + |
| 109 | +The **table repeater** introduced in v4 makes it possible to render each form field in its own table cell, with each repeater item being a row. In v4.1, some fields (like `Select` and `TextInput`) can now have a **compact design**, making them look seamless within cells. |
| 110 | + |
| 111 | + |
| 112 | + |
| 113 | +To enable this, just set the `compact()` method on the repeater: |
| 114 | + |
| 115 | +```php |
| 116 | +use Filament\Forms\Components\Repeater; |
| 117 | + |
| 118 | +Repeater::make('members') |
| 119 | + ->table([ |
| 120 | + // ... |
| 121 | + ]) |
| 122 | + ->compact() |
| 123 | + ->schema([ |
| 124 | + // ... |
| 125 | + ]) |
| 126 | +``` |
| 127 | + |
| 128 | +[Documentation →](https://filamentphp.com/docs/4.x/forms/repeater#compact-table-repeaters) |
| 129 | + |
| 130 | +### New Table Layout For Repeatable Entry |
| 131 | + |
| 132 | +Like the table repeater, but for **infolist entries**. Each entry is rendered in a cell, allowing you to output static tables inside schemas with **text, icons, images, and more**. |
| 133 | + |
| 134 | + |
| 135 | + |
| 136 | +To enable this, use the `table()` method on your `RepeatableEntry` component: |
| 137 | + |
| 138 | +```php |
| 139 | +use Filament\Infolists\Components\IconEntry; |
| 140 | +use Filament\Infolists\Components\RepeatableEntry; |
| 141 | +use Filament\Infolists\Components\RepeatableEntry\TableColumn; |
| 142 | +use Filament\Infolists\Components\TextEntry; |
| 143 | + |
| 144 | +RepeatableEntry::make('comments') |
| 145 | + ->table([ |
| 146 | + TableColumn::make('Author'), |
| 147 | + TableColumn::make('Title'), |
| 148 | + TableColumn::make('Published'), |
| 149 | + ]) |
| 150 | + ->schema([ |
| 151 | + TextEntry::make('author.name'), |
| 152 | + TextEntry::make('title'), |
| 153 | + IconEntry::make('is_published') |
| 154 | + ->boolean(), |
| 155 | + ]) |
| 156 | +``` |
| 157 | + |
| 158 | +[Documentation →](https://filamentphp.com/docs/4.x/infolists/repeatable-entry#table-repeatable-layout) |
| 159 | + |
| 160 | +### Empty State Schema Component |
| 161 | + |
| 162 | +A brand-new schema component for inserting **empty states anywhere** in your app. Each empty state can include a heading, description, icon, and footer actions. Use this to guide users to take action when there's nothing to show. |
| 163 | + |
| 164 | + |
| 165 | + |
| 166 | +To insert this component into your schema, use the `EmptyState` class: |
| 167 | + |
| 168 | +```php |
| 169 | +use Filament\Actions\Action; |
| 170 | +use Filament\Schemas\Components\EmptyState; |
| 171 | +use Filament\Support\Icons\Heroicon; |
| 172 | + |
| 173 | +EmptyState::make('No users yet') |
| 174 | + ->description('Get started by creating a new user.') |
| 175 | + ->icon(Heroicon::OutlinedUser) |
| 176 | + ->footer([ |
| 177 | + Action::make('createUser') |
| 178 | + ->icon(Heroicon::Plus), |
| 179 | + ]) |
| 180 | +``` |
| 181 | + |
| 182 | +[Documentation →](https://filamentphp.com/docs/4.x/schemas/empty-states) |
| 183 | + |
| 184 | +## The Filament v4 Plugin Ecosystem |
| 185 | + |
| 186 | +The plugin ecosystem keeps growing. There are now **224 v4 plugins** available on the website! |
| 187 | + |
| 188 | +👉 [Browse all plugins](https://filamentphp.com/plugins) |
| 189 | + |
| 190 | +Huge thanks to every community plugin author for building new plugins and upgrading existing ones. Your work makes Filament more powerful for everyone. |
| 191 | + |
| 192 | +Here are a few of our recently added favourites: |
| 193 | + |
| 194 | +- [**Passkeys** by Marcel Weidum](https://filamentphp.com/plugins/marcelweidum-passkeys) |
| 195 | +- [**Prizm Theme** by Filafly](https://filamentphp.com/plugins/filafly-prizm-theme) |
| 196 | +- [**Header Select** by Solution Forest](https://filamentphp.com/plugins/solution-forest-header-select) |
| 197 | + |
| 198 | +## Why sponsorships matter 💸 |
| 199 | + |
| 200 | +Reviewing 156 bug fixes, 39 new features, and supporting users with questions takes a **huge amount of time** from the Filament core team. Please consider **sponsoring the project on GitHub**: |
| 201 | + |
| 202 | +👉 [Become a sponsor of Filament](https://github.com/sponsors/danharrin) |
| 203 | + |
| 204 | +Sponsorship directly supports the team who develops Filament and provides support. Sponsorship money is shared among core team members. Monthly and one-time options are available, as well as advertising opportunities on our website for companies sponsoring **$100/month** or more. |
| 205 | + |
| 206 | +Your support makes Filament possible. Thank you for helping us build the tools that power your applications. 💛 |
| 207 | + |
| 208 | +## Join us at Wire ⚡️ Live Conference in Buffalo, New York on October 28-29, 2025 |
| 209 | + |
| 210 | +I'm excited to be speaking at and attending the [**Wire ⚡️ Live** Conference](https://wire-live.com?referrer=filament) in **Buffalo, New York** on **October 28-29**, 2025. |
| 211 | + |
| 212 | +This is the first official conference dedicated to Livewire, Flux, Alpine, and Filament. It's a great opportunity to learn from the TALL stack community, meet other developers, and get inspired. |
| 213 | + |
| 214 | +I'll be presenting a talk about "Filament's Use of Livewire and Alpine", demonstrating how Filament uses those tools internally to build full-stack interfaces without leaving PHP. |
| 215 | + |
| 216 | +Make sure to [visit the official website](https://wire-live.com?referrer=filament) to learn more and grab your tickets. Hope to see you there! |
| 217 | + |
| 218 | +## Try Filament v4.1 today! |
| 219 | + |
| 220 | +The upgrade is just a `composer update` away from v4.0, and you'll immediately benefit from the bug fixes and new features. |
| 221 | + |
| 222 | +We'd love to see what you build. Come share your work in the [Filament Discord](https://filamentphp.com/discord)! |
0 commit comments