Filament v4 is Coming: Here are Somethings You Need to Know

The unified schema package in Filament v4 combines forms, info lists, widgets, and tables into a single schema. This means less code duplication and easier maintenance. For you, this could mean spending less time debugging and more time on innovative features, as you can now manage your admin panel with fewer headaches.

Imagine you have a large form with multiple sections. In the past, updating one part of the form would require reloading the entire page, which was slow and frustrating for users. With partial rendering in Filament v4, only the specific part of the form that needs to be updated is refreshed, providing a smoother and faster user experience.

Perhaps your application fetches data from an external API or uses cached data. In Filament v3, handling such data in tables was a bit tricky. But with the static data table component in v4, you can easily manage and display this data, with features like sorting, searching, and filtering, just like with Eloquent models.

All UI elements are extracted into blade components, allowing for easier styling without cluttering schema views. This enhances customization and improves performance by separating UI logic, supporting semantic class names for styling.

Filament v4 updates its CSS strategy to use Tailwind 4's CSS variables and Lightning CSS. This change aims to improve performance by reducing file sizes and build times. By using semantic class names instead of embedding Tailwind CSS in HTML, the code is cleaner and more maintainable, which is particularly beneficial for large projects.

Security is a top priority, and Filament v4 introduces email change verification. This feature ensures that when a user changes their email, both the old and new emails receive notifications for confirmation or blocking. This prevents malicious changes and gives users control, all without extra database migrations. You can now rest assured that your application's user accounts are safer.

Security is paramount, and Filament v4 introduces two-factor authentication. Users can set up multiple methods, and the system requires at least one for sign-in. This adds an extra layer of protection, making it harder for unauthorized users to access accounts, which is crucial for applications handling sensitive data.

Filament v4 takes accessibility seriously. It includes dynamic heading tags that adjust based on the schema depth, ensuring proper semantic structure. Additionally, color contrast is managed using OKLCH colors to meet WCAG guidelines, making the application more usable for people with visual impairments. This not only improves user experience but also ensures compliance with accessibility standards.

Container queries are a new feature in CSS that allows elements to react to the size of their parent container, not just the screen size. In Filament v4, this is used to create more flexible and responsive designs, especially in complex layouts. This means that your application can adapt better to different screen sizes and orientations, providing a consistent user experience across devices.

In previous versions, icons were managed using strings, which could lead to errors and make code less readable. With Filament v4, icons are managed using enums, specifically for Heroicons, with auto-sizing based on context. This makes your code cleaner, more maintainable, and reduces the chance of typos or mistakes.

Filament v4 replaces the traditional rich text editor with TipTap, which offers advanced features like image uploads, link management through modals, and the ability to paste images from URLs. This provides a better user experience for content creation and editing, making your application more versatile and user-friendly.