Installation - Introduction

Filament requires the following to run:

PHP 8.2+
Laravel v11.28+
Tailwind CSS v4.0+

Installation comes in two flavors, depending on whether you want to build an app using our panel builder or use the components within your app’s Blade views:

Panel builder

Most people choose this option to build a panel (e.g., admin panel) for their app. The panel builder combines all the individual components into a cohesive framework. You can create as many panels as you like within a Laravel installation, but you only need to install it once.

Individual components

If you are using Blade to build your app from scratch, you can install individual components from Filament to enrich your UI.

Installing the panel builder

Since Filament v4 is in beta, you will need to set the minimum-stability in your composer.json file to be beta before installing any packages. Either adjust it manually or via CLI:

composer config minimum-stability beta

Your composer.json should look like this:

{
    "minimum-stability": "beta"
}

Install the Filament Panel Builder by running the following commands in your Laravel project directory:

composer require filament/filament:"^4.0"

php artisan filament:install --panels

NOTE

When using Windows PowerShell to install Filament, you may need to run the command below, since it ignores ^ characters in version constraints:

composer require filament/filament:"~4.0"

php artisan filament:install --panels

This will create and register a new Laravel service provider called app/Providers/Filament/AdminPanelProvider.php.

TIP

If you get an error when accessing your panel, check that the service provider is registered in bootstrap/providers.php. If it’s not registered, you’ll need to add it manually.

You can create a new user account using the following command:

php artisan make:filament-user

Open /admin in your web browser, sign in, and start building your app!

Installing the individual components

Since Filament v4 is in beta, you will need to set the minimum-stability in your composer.json file to be beta before installing any packages. Either adjust it manually or via CLI:

composer config minimum-stability beta

Your composer.json should look like this:

{
    "minimum-stability": "beta"
}

Install the Filament components you want to use with Composer:

composer require
    filament/tables:"^4.0"
    filament/schemas:"^4.0"
    filament/forms:"^4.0"
    filament/infolists:"^4.0"
    filament/actions:"^4.0"
    filament/notifications:"^4.0"
    filament/widgets:"^4.0"

You can install additional packages later in your project without having to repeat these installation steps.

NOTE

When using Windows PowerShell to install Filament, you may need to run the command below, since it ignores ^ characters in version constraints:

composer require
    filament/tables:"~4.0"
    filament/schemas:"~4.0"
    filament/forms:"~4.0"
    filament/infolists:"~4.0"
    filament/actions:"~4.0"
    filament/notifications:"~4.0"
    filament/widgets:"~4.0"

If you only want to use the set of Blade UI components, you’ll need to require filament/support at this stage.

New Laravel projects

Get started with Filament components quickly by running a simple command. Note that this will overwrite any modified files in your app, so it’s only suitable for new Laravel projects.

Existing Laravel projects

If you have an existing Laravel project, you can still install Filament, but should do so manually to preserve your existing functionality.

To quickly set up Filament in a new Laravel project, run the following commands to install Livewire, Alpine.js, and Tailwind CSS:

NOTE

These commands will overwrite existing files in your application. Only run them in a new Laravel project!

Run the following command to install the Filament frontend assets:

php artisan filament:install --scaffold

npm install

npm run dev

During scaffolding, if you have the Notifications package installed, Filament will ask if you want to install the required Livewire component into your default layout file. This component is required if you want to send flash notifications to users through Filament.

Run the following command to install the Filament frontend assets:

php artisan filament:install

Installing Tailwind CSS

Run the following command to install Tailwind CSS and its Vite plugin, if you don’t have those installed already:

npm install tailwindcss @tailwindcss/vite --save-dev

Configuring styles

To configure Filament’s styles, you need to import the CSS files for the Filament packages you installed, usually in resources/css/app.css.

Depending on which combination of packages you installed, you can import only the necessary CSS files, to keep your app’s CSS bundle size small:

@import 'tailwindcss';

/* Required by all components */
@import '../../vendor/filament/support/resources/css/index.css';

/* Required by actions and tables */
@import '../../vendor/filament/actions/resources/css/index.css';

/* Required by actions, forms and tables */
@import '../../vendor/filament/forms/resources/css/index.css';

/* Required by actions and infolists */
@import '../../vendor/filament/infolists/resources/css/index.css';

/* Required by notifications */
@import '../../vendor/filament/notifications/resources/css/index.css';

/* Required by actions, infolists, forms, schemas and tables */
@import '../../vendor/filament/schemas/resources/css/index.css';

/* Required by tables */
@import '../../vendor/filament/tables/resources/css/index.css';

/* Required by widgets */
@import '../../vendor/filament/widgets/resources/css/index.css';

@variant dark (&:where(.dark, .dark *));

Configure the Vite plugin

If it isn’t already set up, add the @tailwindcss/vite plugin to your Vite configuration (vite.config,js):

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        tailwindcss(),
    ],
})

Compiling assets

Compile your new CSS and JavaScript assets using npm run dev.

Configuring your layout

If you don’t have a Blade layout file yet, create it at resources/views/components/layouts/app.blade.php by running the following command:

php artisan livewire:layout

Add the following code to your new layout file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">

        <meta name="application-name" content="{{ config('app.name') }}">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>{{ config('app.name') }}</title>

        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>

        @filamentStyles
        @vite('resources/css/app.css')
    </head>

    <body class="antialiased">
        {{ $slot }}

        @livewire('notifications') {{-- Only required if you wish to send flash notifications --}}

        @filamentScripts
        @vite('resources/js/app.js')
    </body>
</html>

The important parts of this are the @filamentStyles in the <head> of the layout, and the @filamentScripts at the end of the <body>. Make sure to also include your app’s compiled CSS and JavaScript files from Vite!

NOTE

The @livewire('notifications') line is required in the layout only if you have the Notifications package installed and want to send flash notifications to users through Filament.

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion

#Installing the panel builder

#Installing the individual components

#Installing Tailwind CSS

#Configuring styles

#Configure the Vite plugin

#Compiling assets

#Configuring your layout

Installing the panel builder

Installing the individual components

Installing Tailwind CSS

Configuring styles

Configure the Vite plugin

Compiling assets

Configuring your layout