> ## Documentation Index
> Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Installation
export const EditOnGitHub = ({version, path}) => {
const url = `https://github.com/filamentphp/filament/edit/${version}/${path}`;
return ;
};
export const Footer = () => {
const sponsorsByTier = JSON.parse(`{
"agency_partner": [
{
"name": "Kirschbaum",
"url": "https://kirschbaumdevelopment.com/solutions/filament-development",
"filename": "kirschbaum.svg"
}
],
"gold": [
{
"name": "Agiledrop",
"url": "https://www.agiledrop.com/laravel?utm_source=filament",
"filename": "agiledrop.svg"
},
{
"name": "Baiz.ai",
"url": "https://baiz.ai",
"filename": "baiz-ai.svg"
},
{
"name": "CMS Max",
"url": "https://cmsmax.com?ref=filamentphp.com",
"filename": "cms-max.svg"
},
{
"name": "Mailtrap",
"url": "https://mailtrap.io/email-sending?utm_source=community&utm_medium=referral&utm_campaign=filament",
"filename": "mailtrap.svg"
},
{
"name": "SerpApi",
"url": "https://serpapi.com/?utm_source=filamentphp",
"filename": "serpapi.svg"
}
]
}`);
function shuffleArray(items) {
const result = [...items];
for (let index = result.length - 1; index > 0; index--) {
const randomIndex = Math.floor(Math.random() * (index + 1));
[result[index], result[randomIndex]] = [result[randomIndex], result[index]];
}
return result;
}
const sponsors = Object.entries(sponsorsByTier).flatMap(([, sponsors]) => shuffleArray(sponsors));
return ;
};
**The Actions package is pre-installed with the [Panel Builder](../panels/installation).** This guide is for using the Actions package in a custom TALL Stack application (Tailwind, Alpine, Livewire, Laravel).
## Requirements
Filament requires the following to run:
* PHP 8.1+
* Laravel v10.0+
* Livewire v3.0+
* Tailwind v3.0+ [(Using Tailwind v4?)](#installing-tailwind-css)
## Installation
Require the Actions package using Composer:
```bash theme={"theme":"gruvbox-dark-hard"}
composer require filament/actions:"^3.3" -W
```
## New Laravel projects
To quickly get started with Filament in a new Laravel project, run the following commands to install [Livewire](https://livewire.laravel.com), [Alpine.js](https://alpinejs.dev), and [Tailwind CSS](https://tailwindcss.com):
> Since these commands will overwrite existing files in your application, only run this in a new Laravel project!
```bash theme={"theme":"gruvbox-dark-hard"}
php artisan filament:install --scaffold --actions
npm install
npm run dev
```
## Existing Laravel projects
Run the following command to install the Actions package assets:
```bash theme={"theme":"gruvbox-dark-hard"}
php artisan filament:install --actions
```
### Installing Tailwind CSS
> Filament uses Tailwind CSS v3 for styling. If your project uses Tailwind CSS v4, you will unfortunately need to downgrade it to v3 to use Filament. Filament v3 can't support Tailwind CSS v4 since it introduces breaking changes. Filament v4 will support Tailwind CSS v4.
Run the following command to install Tailwind CSS with the Tailwind Forms and Typography plugins:
```bash theme={"theme":"gruvbox-dark-hard"}
npm install tailwindcss@3 @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev
```
Create a new `tailwind.config.js` file and add the Filament `preset` *(includes the Filament color scheme and the required Tailwind plugins)*:
```js theme={"theme":"gruvbox-dark-hard"}
import preset from './vendor/filament/support/tailwind.config.preset'
export default {
presets: [preset],
content: [
'./app/Filament/**/*.php',
'./resources/views/filament/**/*.blade.php',
'./vendor/filament/**/*.blade.php',
],
}
```
### Configuring styles
Add Tailwind's CSS layers to your `resources/css/app.css`:
```css theme={"theme":"gruvbox-dark-hard"}
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
```
Create a `postcss.config.js` file in the root of your project and register Tailwind CSS, PostCSS Nesting and Autoprefixer as plugins:
```js theme={"theme":"gruvbox-dark-hard"}
export default {
plugins: {
'tailwindcss/nesting': 'postcss-nesting',
tailwindcss: {},
autoprefixer: {},
},
}
```
### Automatically refreshing the browser
You may also want to update your `vite.config.js` file to refresh the page automatically when Livewire components are updated:
```js theme={"theme":"gruvbox-dark-hard"}
import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'
You are currently viewing the documentation for Filament 3.x, which is a previous version of Filament.
Looking for the current stable version? Visit the [5.x documentation](/5.x/actions).
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: [
...refreshPaths,
'app/Livewire/**',
],
}),
],
})
```
### Compiling assets
Compile your new CSS and Javascript assets using `npm run dev`.
### Configuring your layout
Create a new `resources/views/components/layouts/app.blade.php` layout file for Livewire components:
```blade theme={"theme":"gruvbox-dark-hard"}
{{ config('app.name') }}
@filamentStyles
@vite('resources/css/app.css')
{{ $slot }}
@filamentScripts
@vite('resources/js/app.js')
```
## Publishing configuration
You can publish the package configuration using the following command (optional):
```bash theme={"theme":"gruvbox-dark-hard"}
php artisan vendor:publish --tag=filament-config
```
## Upgrading
Filament automatically upgrades to the latest non-breaking version when you run `composer update`. After any updates, all Laravel caches need to be cleared, and frontend assets need to be republished. You can do this all at once using the `filament:upgrade` command, which should have been added to your `composer.json` file when you ran `filament:install` the first time:
```json theme={"theme":"gruvbox-dark-hard"}
"post-autoload-dump": [
// ...
"@php artisan filament:upgrade"
],
```
Please note that `filament:upgrade` does not actually handle the update process, as Composer does that already. If you're upgrading manually without a `post-autoload-dump` hook, you can run the command yourself:
```bash theme={"theme":"gruvbox-dark-hard"}
composer update
php artisan filament:upgrade
```
)}
Your logo here