Skip to main content

​
Requirements

Before installing Filament, ensure your environment meets these requirements:
  • PHP 8.2+
  • Laravel v11.28+
  • Tailwind CSS v4.1+ (only when using custom themes)

​
Choose Your Installation Path

Filament offers two installation options depending on your use case:

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.

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

This is the recommended approach for building admin panels and full-featured dashboards.
1

Install the package

Install the Filament Panel Builder using Composer:
composer require filament/filament:"^4.0"
When using Windows PowerShell, use "~4.0" instead of "^4.0" since PowerShell ignores ^ characters in version constraints.
2

Run the installation command

Run the Filament installation command to set up the panel:
php artisan filament:install --panels
This will create and register a new Laravel service provider at app/Providers/Filament/AdminPanelProvider.php.
3

Verify service provider registration

Check that the service provider is registered in bootstrap/providers.php. If it’s not registered, you’ll need to add it manually:
return [
    App\Providers\AppServiceProvider::class,
    App\Providers\Filament\AdminPanelProvider::class,
];
4

Create your first user

Create a new user account to access the admin panel:
php artisan make:filament-user
This command will prompt you for:
  • Name
  • Email address
  • Password (minimum 8 characters)
5

Access your panel

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

​
Installing Individual Components

If you prefer to use Filament components within your existing Blade views, you can install individual packages.
1

Install the packages you need

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.
When using Windows PowerShell, replace "^4.0" with "~4.0" for all packages.
2

Install frontend assets

Run the following command to install the Filament frontend assets:
php artisan filament:install
For new Laravel projects, you can use the --scaffold flag to automatically set up Livewire, Alpine.js, and Tailwind CSS:
php artisan filament:install --scaffold
npm install
npm run dev
The --scaffold flag will overwrite existing files in your application. Only use it in a new Laravel project!
3

Install Tailwind CSS

If you don’t have Tailwind CSS installed, add it to your project:
npm install tailwindcss @tailwindcss/vite --save-dev
4

Configure styles

Import the CSS files for the Filament packages you installed in resources/css/app.css:
@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 *));
5

Configure the Vite plugin

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(),
    ],
})
6

Create a layout file

If you don’t have a Blade layout file yet, create it at resources/views/components/layouts/app.blade.php:
php artisan livewire:layout
Update the layout file with the following structure:
<!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')

        @filamentScripts
        @vite('resources/js/app.js')
    </body>
</html>
The @livewire('notifications') line is only required if you have the Notifications package installed and want to send flash notifications to users.
7

Compile assets

Compile your new CSS and JavaScript assets:
npm run dev

​
Publishing Configuration

Filament ships with a configuration file that allows you to override defaults shared across all packages. 
php artisan vendor:publish --tag=filament-config
This command creates config/filament.php, where you can configure options like:
  • Default filesystem disk for file uploads
  • File generation flags for artisan commands
  • UI defaults and component behavior
Re-run the publish command any time you want to pull in newly added configuration keys before tweaking them to suit your project.

​
Next Steps

Quick Start

Follow our tutorial to build your first resource

Panel Configuration

Learn how to configure your admin panel

Build docs developers (and LLMs) love

Get started for freeTalk to us