Customizing Filament For User-Facing Apps

In this series, we'll take Filament beyond the usual internal admin dashboard and shape it into a real, user-facing app called Booknest. We'll kick things off with a fresh Laravel install so we have a clean foundation for the design, layout, and overall experience.

We'll install Filament and set up two panels: one for admin work and one for app users. Then we'll lock down access, create our first Book resource with a policy, and seed realistic data so we have something solid to build on.

With our panels and book resource in place, it's time to make Filament feel like our app. We'll customize branding, colors, fonts, and dark mode support, refactor shared panel config into a BasePanelProvider, and generate a theme with php artisan make:filament-theme for clean, future-proof styling.

In the app panel, we need a clean way for readers to browse books. We'll generate a new Book resource and trim it down to a simple, read-only listing, then improve the layout with Split, Stack, responsive grids, and a custom view() when built-in columns aren't enough.

Now we'll build the heart of the app: tracking requests and reading activity with a many-to-many relationship, a pivot table, and a BookUser pivot model. Then we'll create a Filament resource scoped to the signed-in user, complete with tabs, badges, and a few UI touches to make it feel just right.

Let's enrich our book cards with an average rating—without running into n+1 issues—and render it as stars with a custom table column. Then we'll eager load the current borrow status with with(), derive state with state(), and display it as a clean, colored badge.

We'll add custom actions to our Filament tables with recordActions() so users can request books, cancel requests, and start a return with a quick feedback form. Along the way, we'll polish the UI with button(), outline(), and visible() so actions only appear when they make sense.

Let's upgrade our notifications so they feel tailored to the app, not generic defaults. We'll improve the success and error copy, set global positioning in AppServiceProvider, and create richer notifications with Notification::make(), actions, and persistent().

Instead of a boring select, we'll build a custom rating form field that lets users leave a star rating. We'll scaffold it with php artisan make:filament-form-field, hook it up with Livewire and Alpine using state and getStatePath(), and style the interactions with Tailwind.

The default view page is fine to start, but we want a proper book detail screen. We'll reshape the Infolist with Section and Grid, add a custom Rating entry, include actions and reviews with RepeatableEntry, and clean up the title and heading so everything reads nicely.

With the core functionality in place, it's time to make navigation feel intentional. We'll adjust sidebar width, labels, slugs, icons, and navigation groups in our panel providers, then add small touches like badges and dispatch('refresh-sidebar') to keep everything in sync.

Now we'll lean on Filament's CSS hooks and the Fi-* classes in the markup to style the app with confidence. We'll work from our theme file, inspect elements as we go, and use Tailwind @apply (plus a bit of custom CSS) to refine the sidebar, tables, and tabs.

Let's turn our blank dashboard into something useful with widgets powered by real reading stats. We'll start with a StatsOverviewWidget, then create custom Livewire widgets and a custom Dashboard page so we can control ordering, columns, and columnSpan.

We'll finish by giving the login screen a polished, on-brand look using Filament render hooks. We'll register a hook in AppServiceProvider, inject a bit of Blade, and load a dedicated login.css via @vite to style the page properly.