Guide to using Filament Components in public-facing pages

#filament #laravel #php #webdev

This guide will show you how to include Filament components in your public-facing pages, step by step.

Step 1: Register your Filament colors globally

First, register your Filament colors in the AppServiceProvider inside the boot method:

use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        FilamentColor::register([
            'danger' => Color::Red,
            'gray' => Color::Zinc,
            'info' => Color::Blue,
            'primary' => Color::Amber,
            'success' => Color::Green,
            'warning' => Color::Amber,
        ]);

        //...
    }
}

Step 2: Set up the required Blade directives

To use Filament components on the front end, include the necessary styles and scripts in your Blade layout file (e.g., layouts/app.blade.php):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>

    <!-- Include Filament styles -->
    @filamentStyles

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    @yield('content')

    <!-- Include Filament scripts -->
    @filamentScripts
</body>
</html>

@filamentStyles and @filamentScripts are essential for loading Filament's assets.

Step 3: Configure Tailwind for Filament

Filament uses Tailwind CSS for styling, so you need to include Filament’s Tailwind configuration preset in your Tailwind setup.

Update your tailwind.config.js file as follows:

import preset from './vendor/filament/filament/tailwind.config.preset';

export default {
    content: [
        './resources/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    //...
    presets: [preset],
};

This configuration ensures that Tailwind recognizes Filament’s styles and applies them correctly in your front office.

Then, rebuild your CSS:

npm run build

Step 4: Use Filament components

Now you can use Filament components directly in your front office. For example, if you want to add a simple Filament button or section, you can do so like this:

<x-filament::button color="primary">
    Click Me
</x-filament::button>

<x-filament::section icon="heroicon-m-user"
                     icon-size="sm"
                     icon-color="primary"
                     class="mt-4">
    <x-slot name="heading">
        Section Heading
    </x-slot>

    <x-slot name="description">
        Section Description
    </x-slot>

    Content here
</x-filament::section>

Other components, such as Blade components, can also be used with the same syntax.

Bonus: Add Notification Component

To use the notification component on your front-facing pages, follow these steps:

Register the Livewire Notifications Component
Send Notifications

Integrating Filament components into your application's front office can significantly enhance its functionality while maintaining a consistent design language with your admin panel. With just a few steps, you can leverage the power of Filament for both back-end and front-end development.

Enjoyed this article? Like it to let me know! You can share it too!

📬 Join the community on filamentmastery.com — it's free!

Create a feature flag in your IDE in 5 minutes with LaunchDarkly’s MCP server ⏰

How to create, evaluate, and modify flags from within your IDE or AI client using natural language with LaunchDarkly's new MCP server. Follow along with this tutorial for step by step instructions.

Read full post