Filament Tutorials

Your design requires banner images at exactly 16:9 and avatars at 1:1? You upload a photo, Filament rejects it with a validation error, and now the user has to go crop it externally and re-upload. There's a better way: let Filament open a cropper automatically so users can fix the ratio before saving.

Filament v5 ships a native Slider component backed by noUiSlider. Most developers still reach for a TextInput or a third-party package when they need a rating field or a budget range. But the built-in Slider handles all of that with pips, tooltips, multiple handles, and step control.

You're building a ticketing system and your users need to @mention other users inside a RichEditor field, just like on GitHub or Slack. The built-in RichEditor now ships with a MentionProvider that handles trigger characters, search dropdowns, and rendering mentions as clickable links.

You're building a demo for your Filament app and want to show login credentials right on the login page. Maybe you have multiple roles and want visitors to pick one and log in instantly, without copy-pasting emails and passwords. This is exactly what Filament official demo does.

You have two dependent selects in a Filament form: Customer and Vehicle. But if the chosen customer only has ONE vehicle, why make the user click the dropdown and select it? You can auto-fill it.

When you make table columns toggleable, Filament saves the user's visibility choices in the session. That works fine until they log out, switch devices, or the session expires. Here's how to save column preferences to the database instead.

You added customer.name and vehicle.model to your global search attributes, and it works. But you may have executed N+1 DB queries, without even knowing it. Here's how to fix.

On buttons/actions in Filament, you can add a badge that shows a count and changes color based on the current state, like turning red when things pile up.

Your Filament resource table has 8+ columns, and the user has to scroll horizontally just to find the action buttons? There's a one-line fix.

You have a table with hundreds of rows - orders, transactions, support tickets - and your client says: "I don't need the individual rows. Just show me the totals per category."? Filament can do this with groupsOnly().