### Install theme dependencies

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/08-appearance.md

Install required Tailwind CSS plugins and utilities via NPM.

```bash
npm install tailwindcss @tailwindcss/forms @tailwindcss/typography autoprefixer tippy.js --save-dev
```

--------------------------------

### Set starting step for Wizard

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/04-layout.md

Use startOnStep to define which step the wizard should load by default.

```php
use Filament\Forms\Components\Wizard;

Wizard::make([
    // ...
])->startOnStep(2)
```

--------------------------------

### Define a basic Grid layout

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/06-layout.md

Sets up a grid with two columns starting from the lg breakpoint.

```php
use Filament\Tables\Columns\Layout\Grid;
use Filament\Tables\Columns\TextColumn;

Grid::make([
    'lg' => 2,
])
    ->schema([
        TextColumn::make('email'),
        TextColumn::make('phone'),
    ])
```

--------------------------------

### Install dependencies for existing projects

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/01-installation.md

Install required frontend dependencies via NPM for projects not using the automated installer.

```bash
npm install alpinejs @alpinejs/focus postcss tailwindcss @tailwindcss/forms @tailwindcss/typography --save-dev
```

--------------------------------

### Quick-start installation for new projects

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/01-installation.md

These commands configure Livewire, Alpine.js, and Tailwind CSS. Note that this will overwrite existing files in your application.

```bash
php artisan forms:install
npm install
npm run dev
```

--------------------------------

### Install Alpine.js Collapse plugin

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/06-layout.md

Install the required dependency to enable animations for collapsible content.

```bash
npm install @alpinejs/collapse --save-dev
```

--------------------------------

### Install via Composer

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/notifications/docs/01-installation.md

Use Composer to add the notifications package to your project.

```bash
composer require filament/notifications:"^2.0"
```

--------------------------------

### Install dependencies via NPM

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/01-installation.md

Install the required dependencies including Alpine.js, PostCSS, Tailwind CSS, and the necessary plugins.

```bash
npm install alpinejs postcss tailwindcss @tailwindcss/forms @tailwindcss/typography --save-dev
```

--------------------------------

### Install the plugin via Composer

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/spatie-laravel-media-library-plugin/docs/01-installation.md

Use this command to add the plugin to your project dependencies.

```bash
composer require filament/spatie-laravel-media-library-plugin:"^2.0"
```

--------------------------------

### Install Autoprefixer for Vite

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/01-installation.md

Install Autoprefixer as a development dependency when using Vite.

```bash
npm install autoprefixer --save-dev
```

--------------------------------

### Semantic week start helpers

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Convenience methods to set the week start day.

```php
use Filament\Forms\Components\DateTimePicker;

DateTimePicker::make('published_at')->weekStartsOnMonday()
DateTimePicker::make('published_at')->weekStartsOnSunday()
```

--------------------------------

### Authenticate in TestCase

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/10-testing.md

Ensure the user is authenticated before running tests by overriding the setUp method.

```php
protected function setUp(): void
{
    parent::setUp();

    $this->actingAs(User::factory()->create());
}
```

--------------------------------

### Initialize Custom Navigation

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/05-navigation.md

Use this in a ServiceProvider's boot method to disable default navigation and start building a custom sidebar.

```php
use Filament\Facades\Filament;
use Filament\Navigation\NavigationBuilder;

Filament::navigation(function (NavigationBuilder $builder): NavigationBuilder {
    return $builder;
});
```

--------------------------------

### Install doctrine/dbal for auto-generation

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/02-resources/01-getting-started.md

Required dependency for automatically generating forms and tables from database columns.

```bash
composer require doctrine/dbal --dev
```

--------------------------------

### Install Filament via Composer

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/01-installation.md

Use this command to install the Filament package in your Laravel project.

```bash
composer require filament/filament:"^2.0"
```

--------------------------------

### Install Filament Packages

Source: https://github.com/pokmot/filament-v2/blob/2.x/README.md

Use Composer to install specific Filament packages into your Laravel project.

```bash
composer require filament/filament
```

```bash
composer require filament/forms
```

```bash
composer require filament/tables
```

```bash
composer require filament/notifications
```

```bash
composer require filament/spatie-laravel-media-library-plugin
```

```bash
composer require filament/spatie-laravel-settings-plugin
```

```bash
composer require filament/spatie-laravel-tags-plugin
```

```bash
composer require filament/spatie-laravel-translatable-plugin
```

--------------------------------

### Set first day of the week

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Configure the starting day of the week for the calendar view.

```php
use Filament\Forms\Components\DateTimePicker;

DateTimePicker::make('published_at')->firstDayOfWeek(7)
```

--------------------------------

### Install package via Composer

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/01-installation.md

Use this command to add the table builder package to your project dependencies.

```bash
composer require filament/tables:"^2.0"
```

--------------------------------

### Install Filament Forms via Composer

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/01-installation.md

Use this command to add the Filament form builder package to your existing Laravel project.

```bash
composer require filament/forms:"^2.0"
```

--------------------------------

### Listening to form events in components

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/06-advanced.md

Register event listeners within the setUp() method of your component class.

```php
use Filament\Forms\Components\Component;

protected function setUp(): void
{
    parent::setUp();

    $this->registerListeners([
        'save' => [
            function (Component $component): void {
                // ...
            },
        ],
    ]);
}
```

```php
use Filament\Forms\Components\Component;

protected function setUp(): void
{
    parent::setUp();

    $this->registerListeners([
        'repeater::createItem' => [
            function (Component $component, string $statePath): void {
                if ($component->isDisabled()) {
                    return;
                }

                if ($statePath !== $component->getStatePath()) {
                    return;
                }

                // ...
            },
        ],
    ]);
}
```

```php
use Filament\Forms\Components\Component;

protected function setUp(): void
{
    parent::setUp();

    $this->registerListeners([
        'repeater::deleteItem' => [
            function (Component $component, string $statePath, string $uuidToDelete): void {
                if ($component->isDisabled()) {
                    return;
                }

                if ($statePath !== $component->getStatePath()) {
                    return;
                }

                // Delete item with UUID `$uuidToDelete`
            },
        ],
    ]);
}
```

--------------------------------

### Starts With Validation

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/05-validation.md

Validates that the field starts with one of the provided values.

```php
Field::make('name')->startsWith(['a'])
```

--------------------------------

### Run database migrations

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/spatie-laravel-media-library-plugin/docs/01-installation.md

Executes the published migration to set up the media table.

```bash
php artisan migrate
```

--------------------------------

### Doesnt start with validation

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/05-validation.md

Ensures the field does not start with any of the provided values.

```php
Field::make('name')->doesntStartWith(['admin'])
```

--------------------------------

### Create Stats Overview Widget

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/04-dashboard/02-stats.md

Use the artisan command to generate the widget class.

```bash
php artisan make:filament-widget StatsOverview --stats-overview
```

--------------------------------

### Create a resource with a View page

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/02-resources/05-viewing-records.md

Use the --view flag when generating a new resource to include a View page.

```bash
php artisan make:filament-resource User --view
```

--------------------------------

### Publish and run migrations

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/spatie-laravel-tags-plugin/docs/01-installation.md

These commands publish the necessary migration files and apply them to your database.

```bash
php artisan vendor:publish --provider="Spatie\Tags\TagsServiceProvider" --tag="tags-migrations"
```

```bash
php artisan migrate
```

--------------------------------

### Create a resource widget

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/02-resources/09-widgets.md

Use the Artisan command to generate the necessary widget class and view files for a specific resource.

```bash
php artisan make:filament-widget CustomerOverview --resource=CustomerResource
```

--------------------------------

### Create columns using make

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/03-columns/01-getting-started.md

Initialize columns using the static make method, supporting dot syntax for relationship accessors.

```php
use Filament\Tables\Columns\TextColumn;

TextColumn::make('title')

TextColumn::make('author.name')
```

--------------------------------

### Define a Wizard component

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/04-layout.md

Create a multi-step wizard by passing an array of Wizard\Step components to the make method.

```php
use Filament\Forms\Components\Wizard;

Wizard::make([
    Wizard\Step::make('Order')
        ->schema([
            // ...
        ]),
    Wizard\Step::make('Delivery')
        ->schema([
            // ...
        ]),
    Wizard\Step::make('Billing')
        ->schema([
            // ...
        ]),
])
```

--------------------------------

### Initialize date and time picker components

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Basic instantiation of date and time picker fields.

```php
use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\DateTimePicker;
use Filament\Forms\Components\TimePicker;

DateTimePicker::make('published_at')
DatePicker::make('date_of_birth')
TimePicker::make('alarm_at')
```

--------------------------------

### Create a layout component

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/04-layout.md

Initialize a layout component using the static make method and define its child schema.

```php
use Filament\Forms\Components\Grid;

Grid::make()
    ->schema([
        // ...
    ])
```

--------------------------------

### Initialize MarkdownEditor

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Basic instantiation of the MarkdownEditor component.

```php
use Filament\Forms\Components\MarkdownEditor;

MarkdownEditor::make('content')
```

--------------------------------

### Define repeater data structure

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Example data structure for a form containing a repeater field.

```php
[
    'client_id' => 1,

    'repeater' => [
        'item1' => [
            'service_id' => 2,
        ],
    ],
]
```

--------------------------------

### Initialize Textarea

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Basic implementation of the Textarea component for multi-line string input.

```php
use Filament\Forms\Components\Textarea;

Textarea::make('description')
```

--------------------------------

### Publish configuration

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/01-installation.md

Publish the package configuration files to your application.

```bash
php artisan vendor:publish --tag=filament-config
```

--------------------------------

### Enable Database Notifications

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/notifications/docs/03-database-notifications.md

Configure the database settings in the package configuration file.

```php
'database' => [
    'enabled' => true,
    // ...
],
```

--------------------------------

### Create a custom widget

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/04-dashboard/01-getting-started.md

Use the artisan command to scaffold a new widget class and view.

```bash
php artisan make:filament-widget BlogPostsOverview
```

--------------------------------

### Opening a URL with an Action

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/03-pages/02-actions.md

Configure an action to navigate to a specific URL instead of triggering a method.

```php
use Filament\Pages\Actions\Action;

protected function getActions(): array
{
    return [
        Action::make('settings')
            ->label('Settings')
            ->url(route('settings')),
    ];
}
```

--------------------------------

### Create Notifications Table

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/notifications/docs/03-database-notifications.md

Run this command to generate the migration for the database notifications table.

```bash
php artisan notifications:table
```

--------------------------------

### Create a Table Widget

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/04-dashboard/04-tables.md

Use the artisan command to generate the boilerplate for a new table widget.

```bash
php artisan make:filament-widget LatestOrders --table
```

--------------------------------

### Create a Filament user

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/01-installation.md

Run this command to create a new user account for accessing the admin panel.

```bash
php artisan make:filament-user
```

--------------------------------

### Create Action with URL

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/05-actions.md

Define an action that navigates to a URL, optionally opening in a new tab.

```php
use App\Models\Post;
use Filament\Tables\Actions\Action;

Action::make('edit')
    ->url(fn (Post $record): string => route('posts.edit', $record))
    ->openUrlInNewTab()
```

--------------------------------

### Configure storage disk and directory

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Sets the storage disk, directory path, and visibility for uploaded files.

```php
use Filament\Forms\Components\FileUpload;

FileUpload::make('attachment')
    ->disk('s3')
    ->directory('form-attachments')
    ->visibility('private')
```

--------------------------------

### Generate resource with a View page

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/02-resources/01-getting-started.md

Includes a dedicated View page in addition to the default List, Create, and Edit pages.

```bash
php artisan make:filament-resource Customer --view
```

--------------------------------

### Configure stancl/tenancy middleware

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/02-resources/01-getting-started.md

Add the tenancy initialization middleware to the Filament configuration file.

```php
use Stancl\Tenancy\Middleware\InitializeTenancyByDomain;

'middleware' => [
    // ...
    'base' => [
        // ...
        InitializeTenancyByDomain::class
    ],
],
```

--------------------------------

### Creating multi-step wizards for actions

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/05-actions.md

Use the steps method to transform an action form into a multi-step wizard interface.

```php
use Filament\\Forms\\Components\\MarkdownEditor;
use Filament\\Forms\\Components\\TextInput;
use Filament\\Forms\\Components\\Toggle;
use Filament\\Forms\\Components\\Wizard\\Step;
use Filament\\Tables\\Actions\\Action;

Action::make('create')
    ->steps([
        Step::make('Name')
            ->description('Give the category a clear and unique name')
            ->schema([
                TextInput::make('name')
                    ->required()
                    ->reactive()
                    ->afterStateUpdated(fn ($state, callable $set) => $set('slug', Str::slug($state))),
                TextInput::make('slug')
                    ->disabled()
                    ->required()
                    ->unique(Category::class, 'slug', fn ($record) => $record),
            ]),
        Step::make('Description')
            ->description('Add some extra details')
            ->schema([
                MarkdownEditor::make('description')
                    ->columnSpan('full'),
            ]),
        Step::make('Visibility')
            ->description('Control who can view it')
            ->schema([
                Toggle::make('is_visible')
                    ->label('Visible to customers.')
                    ->default(true),
            ]),
    ])
```

--------------------------------

### Listen to the ServingFilament event

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/09-plugins.md

Register event listeners for ServingFilament within the packageConfiguring method to execute logic when Filament is ready.

```php
use Filament\Events\ServingFilament;
use Filament\PluginServiceProvider;
use Illuminate\Support\Facades\Event;
use Spatie\LaravelPackageTools\Package;

class ExampleServiceProvider extends PluginServiceProvider
{
    public function configurePackage(Package $package): void
    {
        $package->name('your-package-name');
    }
    
    public function packageConfiguring(Package $package): void
    {
        Event::listen(ServingFilament::class, [$this, 'registerStuff']);
    }

    protected function registerStuff(ServingFilament $event): void
    {
        // ...
    }
}
```

--------------------------------

### Create a chart widget via CLI

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/04-dashboard/03-charts.md

Use the artisan command to generate a new chart widget class.

```bash
php artisan make:filament-widget BlogPostsChart --chart
```

--------------------------------

### Register custom scripts and styles

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/08-appearance.md

Use the Filament facade in a service provider's boot method to include external or local assets.

```php
use Filament\Facades\Filament;

Filament::registerScripts([
    asset('js/my-script.js'),
]);

Filament::registerStyles([
    'https://unpkg.com/tippy.js@6/dist/tippy.css',
    asset('css/my-styles.css'),
]);
```

--------------------------------

### Advanced Event Emission Methods

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/notifications/docs/02-sending-notifications.md

Use emitSelf, emitUp, and emitTo to target specific components when an action is clicked.

```php
Action::make('undo')
    ->color('secondary')
    ->emitSelf('undoEditingPost', [$post->id])
    
Action::make('undo')
    ->color('secondary')
    ->emitUp('undoEditingPost', [$post->id])
    
Action::make('undo')
    ->color('secondary')
    ->emitTo('another_component', 'undoEditingPost', [$post->id])
```

```js
new NotificationAction('undo')
    .color('secondary')
    .emitSelf('undoEditingPost')

new NotificationAction('undo')
    .color('secondary')
    .emitUp('undoEditingPost')

new NotificationAction('undo')
    .color('secondary')
    .emitTo('another_component', 'undoEditingPost')
```

--------------------------------

### Initialize Color picker

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Basic initialization of a Color picker component, which defaults to HEX format.

```php
use Filament\Forms\Components\ColorPicker;

ColorPicker::make('color')
```

--------------------------------

### Add description to a Wizard step

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/04-layout.md

Use the description method to provide additional context for a specific step.

```php
use Filament\Forms\Components\Wizard;

Wizard\Step::make('Order')
    ->description('Review your basket')
    ->schema([
        // ...
    ]),
```

--------------------------------

### Initialize a form in a Livewire component

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/02-getting-started.md

Implement the HasForms interface and use the InteractsWithForms trait to initialize a form within the mount method.

```php
<?php

namespace App\Http\Livewire;

use App\Models\Post;
use Filament\Forms;
use Illuminate\Contracts\View\View;
use Livewire\Component;

class CreatePost extends Component implements Forms\Contracts\HasForms
{
    use Forms\Concerns\InteractsWithForms;
    
    public $title = '';
    public $content = '';
    
    public function mount(): void
    {
        $this->form->fill();
    }
    
    protected function getFormSchema(): array
    {
        return [
            Forms\Components\TextInput::make('title')
                ->default('Status Update')
                ->required(),
            Forms\Components\MarkdownEditor::make('content'),
        ];
    }
    
    public function render(): View
    {
        return view('create-post');
    }
}
```

--------------------------------

### Test Create Page Rendering

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/10-testing.md

Verify that the Create page for a resource renders successfully by asserting a successful HTTP response.

```php
it('can render page', function () {
    $this->get(PostResource::getUrl('create'))->assertSuccessful();
});
```

--------------------------------

### Create a field

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Initialize a field using the static make method with the field name.

```php
use Filament\Forms\Components\TextInput;

TextInput::make('name')
```

--------------------------------

### Publish the media library migration

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/spatie-laravel-media-library-plugin/docs/01-installation.md

Publishes the necessary migration file to create the media table in your database.

```bash
php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="migrations"
```

--------------------------------

### Configure time input steps

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Set the increment intervals for hours, minutes, and seconds.

```php
use Filament\Forms\Components\DateTimePicker;

DateTimePicker::make('published_at')
    ->hoursStep(2)
    ->minutesStep(15)
    ->secondsStep(10)
```

--------------------------------

### Configure global column behavior

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/03-columns/01-getting-started.md

Sets default behaviors for all columns or specific column types within a service provider's boot method.

```php
use Filament\Tables\Columns\Column;

Column::configureUsing(function (Column $column): void {
    $column
        ->toggleable()
        ->sortable();
});
```

```php
use Filament\Tables\Columns\TextColumn;

TextColumn::configureUsing(function (TextColumn $column): void {
    $column
        ->toggleable()
        ->sortable();
});
```

--------------------------------

### Publish translation files

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/spatie-laravel-translatable-plugin/docs/01-installation.md

Use this command to publish the package's language files for customization.

```bash
php artisan vendor:publish --tag=filament-spatie-laravel-translatable-plugin-translations
```

--------------------------------

### Enable skippable wizard steps

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/02-resources/03-creating-records.md

Override hasSkippableSteps to allow free navigation between wizard steps.

```php
public function hasSkippableSteps(): bool
{
    return true;
}
```

--------------------------------

### Configure postcss.config.js

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/01-installation.md

Register Tailwind CSS and Autoprefixer as PostCSS plugins.

```js
export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}
```

--------------------------------

### Assert Select Column Options

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/07-testing.md

Verify the available options for a select column.

```php
use function Pest\Livewire\livewire;

it('has the correct statuses', function () {
    $post = Post::factory()->create();

    livewire(PostsTable::class)
        ->assertSelectColumnHasOptions('status', ['unpublished' => 'Unpublished', 'published' => 'Published'], $post)
        ->assertSelectColumnDoesNotHaveOptions('status', ['archived' => 'Archived'], $post);
});
```

--------------------------------

### Define a responsive Grid layout

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/06-layout.md

Configures different column counts for lg and 2xl breakpoints using nested components.

```php
use Filament\Tables\Columns\Layout\Grid;
use Filament\Tables\Columns\Layout\Stack;
use Filament\Tables\Columns\TextColumn;

Grid::make([
    'lg' => 2,
    '2xl' => 4,
])
    ->schema([
        Stack::make([
            TextColumn::make('name'),
            TextColumn::make('job'),
        ]),
        TextColumn::make('email'),
        TextColumn::make('phone'),
    ])
```

--------------------------------

### Create a simple modal-based resource

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/02-resources/01-getting-started.md

Generates a resource that manages records using modals on a single page.

```bash
php artisan make:filament-resource Customer --simple
```

--------------------------------

### Organize Options into Columns

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Use the columns method to arrange options in a grid layout.

```php
use Filament\Forms\Components\CheckboxList;

CheckboxList::make('technologies')
    ->options([
        'tailwind' => 'Tailwind CSS',
        'alpine' => 'Alpine.js',
        'laravel' => 'Laravel',
        'livewire' => 'Laravel Livewire',
    ])
    ->columns(2)
```

--------------------------------

### Generate a custom layout component

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/04-layout.md

Run the artisan command to scaffold a new custom layout component class.

```bash
php artisan make:form-layout Wizard
```

--------------------------------

### Initialize RichEditor

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Basic implementation of the rich text editor component.

```php
use Filament\Forms\Components\RichEditor;

RichEditor::make('content')
```

--------------------------------

### Configure table columns, filters, and actions

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/02-getting-started.md

Define the structure and behavior of the table by implementing methods for columns, filters, actions, and bulk actions.

```php
<?php

namespace App\Http\Livewire;

use App\Models\Post;
use Filament\Tables;
use Illuminate\Contracts\View\View;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\Collection;
use Livewire\Component;

class ListPosts extends Component implements Tables\Contracts\HasTable
{
    use Tables\Concerns\InteractsWithTable;

    protected function getTableQuery(): Builder
    {
        return Post::query();
    }

    protected function getTableColumns(): array
    {
        return [
            Tables\Columns\ImageColumn::make('author.avatar')
                ->size(40)
                ->circular(),
            Tables\Columns\TextColumn::make('title'),
            Tables\Columns\TextColumn::make('author.name'),
            Tables\Columns\BadgeColumn::make('status')
                ->colors([
                    'danger' => 'draft',
                    'warning' => 'reviewing',
                    'success' => 'published',
                ]),
            Tables\Columns\IconColumn::make('is_featured')->boolean(),
        ];
    }

    protected function getTableFilters(): array
    {
        return [
            Tables\Filters\Filter::make('published')
                ->query(fn (Builder $query): Builder => $query->where('is_published', true)),
            Tables\Filters\SelectFilter::make('status')
                ->options([
                    'draft' => 'Draft',
                    'in_review' => 'In Review',
                    'approved' => 'Approved',
                ]),
        ];
    }

    protected function getTableActions(): array
    {
        return [
            Tables\Actions\Action::make('edit')
                ->url(fn (Post $record): string => route('posts.edit', $record)),
        ];
    }

    protected function getTableBulkActions(): array
    {
        return [
            Tables\Actions\BulkAction::make('delete')
                ->label('Delete selected')
                ->color('danger')
                ->action(function (Collection $records): void {
                    $records->each->delete();
                })
                ->requiresConfirmation(),
        ];
    }

    public function render(): View
    {
        return view('list-posts');
    }
}
```

--------------------------------

### Create a Plugin Service Provider

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/09-plugins.md

Extend the PluginServiceProvider class to define your package configuration.

```php
use Filament\PluginServiceProvider;
use Spatie\LaravelPackageTools\Package;

class ExampleServiceProvider extends PluginServiceProvider
{
    public function configurePackage(Package $package): void
    {
        $package->name('your-package-name');
    }
    
    // ...
}
```

--------------------------------

### Configure fields with closures

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/06-advanced.md

Use closures to provide dynamic values for field configuration methods instead of hardcoded values.

```php
use App\Models\User;
use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;

DatePicker::make('date_of_birth')
    ->displayFormat(function () {
        if (auth()->user()->country_id === 'us') {
            return 'm/d/Y'
        } else {
            return 'd/m/Y'
        }
    })

Select::make('userId')
    ->options(function () {
        return User::all()->pluck('name', 'id');
    })

TextInput::make('middle_name')
    ->required(function () {
        return auth()->user()->hasMiddleName();
    })
```

--------------------------------

### Configure responsive Grid breakpoints

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/04-layout.md

Defines column counts for various Tailwind breakpoints to create a fully responsive layout.

```php
use Filament\Forms\Components\Grid;

Grid::make([
    'default' => 1,
    'sm' => 2,
    'md' => 3,
    'lg' => 4,
    'xl' => 6,
    '2xl' => 8,
])
    ->schema([
        // ...
    ])
```

```php
use Filament\Forms\Components\Grid;

Grid::make([
    'sm' => 2,
    'xl' => 6,
])
    ->schema([
        // ...
    ])
```

--------------------------------

### Create a Split layout

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/06-layout.md

Wraps columns to allow them to stack on mobile devices.

```php
use Filament\Tables\Columns\Layout\Split;
use Filament\Tables\Columns\TextColumn;

Split::make([
    ImageColumn::make('avatar'),
    TextColumn::make('name'),
    TextColumn::make('email'),
])
```

--------------------------------

### Create app.blade.php layout

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/01-installation.md

Define the base layout file including necessary styles, scripts, and the notifications component.

```blade
<!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>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        @livewireStyles
        @livewireScripts
        @stack('scripts')
    </head>

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

        @livewire('notifications')
    </body>
</html>
```

--------------------------------

### Define wizard steps in modal action

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/02-resources/03-creating-records.md

Use the steps method on CreateAction to define wizard steps when creating records via a modal.

```php
use Filament\Pages\Actions\CreateAction;

CreateAction::make()
    ->steps([
        // ...
    ])
```

--------------------------------

### Generate resource with auto-generated form and table

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/02-resources/01-getting-started.md

Creates a resource with form and table schemas inferred from the database model.

```bash
php artisan make:filament-resource Customer --generate
```

--------------------------------

### Enable Database Notifications

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/07-notifications.md

Configure the admin panel configuration file to enable database-backed notifications.

```php
'database_notifications' => [
    'enabled' => true,
    // ...
],
```

--------------------------------

### Registering widgets in a page

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/03-pages/03-widgets.md

Use getHeaderWidgets or getFooterWidgets to define which widgets appear on the page.

```php
use App/Filament/Widgets/StatsOverviewWidget;

protected function getHeaderWidgets(): array
{
    return [
        StatsOverviewWidget::class
    ];
}
```

--------------------------------

### Test List Page Rendering

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/10-testing.md

Verify that the List page for a resource renders successfully by asserting a successful HTTP response.

```php
it('can render page', function () {
    $this->get(PostResource::getUrl('index'))->assertSuccessful();
});
```

--------------------------------

### Configure Color picker formats

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Specify alternative color formats such as HSL, RGB, or RGBA.

```php
use Filament\Forms\Components\ColorPicker;

ColorPicker::make('hsl_color')->hsl()
ColorPicker::make('rgb_color')->rgb()
ColorPicker::make('rgba_color')->rgba()
```

--------------------------------

### Configure post-update-cmd

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/01-installation.md

Add the upgrade command to your composer.json to ensure it runs automatically after updates.

```json
"post-update-cmd": [
    // ...
    "@php artisan filament:upgrade"
],
```

--------------------------------

### Format labels using getOptionLabelFromRecordUsing

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Transform Eloquent models into labels using a closure. Note that this approach is less performant than virtual columns.

```php
use Filament\Forms\Components\Select;
use Illuminate\Database\Eloquent\Model;

Select::make('authorId')
    ->relationship('author', 'first_name')
    ->getOptionLabelFromRecordUsing(fn (Model $record) => "{$record->first_name} {$record->last_name}")
```

--------------------------------

### Enable skippable steps in modal action

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/02-resources/03-creating-records.md

Use the skippableSteps method on CreateAction to allow free navigation in modal wizards.

```php
use Filament\Pages\Actions\CreateAction;

CreateAction::make()
    ->steps([
        // ...
    ])
    ->skippableSteps()
```

--------------------------------

### Configure MarkdownEditor Image Uploads

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Settings for disk, directory, and visibility of file attachments.

```php
use Filament\Forms\Components\MarkdownEditor;

MarkdownEditor::make('content')
    ->fileAttachmentsDisk('s3')
    ->fileAttachmentsDirectory('attachments')
    ->fileAttachmentsVisibility('private')
```

--------------------------------

### Generate a settings page

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/spatie-laravel-settings-plugin/docs/02-getting-started.md

Use the artisan command to scaffold a new settings page class linked to your settings model.

```bash
php artisan make:filament-settings-page ManageFooter FooterSettings
```

--------------------------------

### Create a basic filter

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/04-filters.md

Use the static make method to define a filter and the query method to apply the Eloquent scope.

```php
use Filament\Tables\Filters\Filter;
use Illuminate\Database\Eloquent\Builder;

Filter::make('is_featured')
    ->query(fn (Builder $query): Builder => $query->where('is_featured', true))
```

--------------------------------

### Register Application Plugin

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/09-plugins.md

Add the service provider to the providers array in config/app.php for local application plugins.

```php
return [

    'providers' => [
        // ...
        \App\Providers\ExampleServiceProvider::class,
    ]

];
```

--------------------------------

### Configure Wizard submit action

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/04-layout.md

Use submitAction to render custom HTML or a view on the final step of the wizard.

```php
use Filament\Forms\Components\Wizard;
use Illuminate\Support\HtmlString;

Wizard::make([
    // ...
])->submitAction(view('order-form.submit-button'))

Wizard::make([
    // ...
])->submitAction(new HtmlString('<button type="submit">Submit</button>'))
```

--------------------------------

### Enable File Downloading

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Add a download button to each uploaded file.

```php
use Filament\Forms\Components\FileUpload;

FileUpload::make('attachments')
    ->multiple()
    ->enableDownload()
```

--------------------------------

### Create a new Filament resource

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/02-resources/01-getting-started.md

Generates the necessary files for a new resource based on an Eloquent model.

```bash
php artisan make:filament-resource Customer
```

--------------------------------

### Configure Image Disk

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/03-columns/04-image.md

Specify a custom storage disk for image retrieval.

```php
use Filament\Tables\Columns\ImageColumn;

ImageColumn::make('header_image')->disk('s3')
```

--------------------------------

### Create a new Filament page

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/03-pages/01-getting-started.md

Generates the necessary page class and view files for a new custom page.

```bash
php artisan make:filament-page Settings
```

--------------------------------

### Asserting Table Action Order

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/07-testing.md

Verify the specific order of actions, bulk actions, header actions, and empty state actions.

```php
use function Pest\Livewire\livewire;

it('has all actions in expected order', function () {
    livewire(PostResource\Pages\ListPosts::class)
        ->assertTableActionsExistInOrder(['edit', 'delete'])
        ->assertTableBulkActionsExistInOrder(['restore', 'forceDelete'])
        ->assertTableHeaderActionsExistInOrder(['create', 'attach'])
        ->assertTableEmptyStateActionsExistInOrder(['create', 'toggle-trashed-filter'])
});
```

--------------------------------

### Configure Local Development Repository

Source: https://github.com/pokmot/filament-v2/blob/2.x/README.md

Update your composer.json to point to local package directories for development and testing.

```jsonc
{
    // ...
    "require": {
        "filament/filament": "*",
    },
    "minimum-stability": "dev",
    "repositories": [
        {
            "type": "path",
            "url": "filament/packages/*"
        }
    ],
    // ...
}
```

--------------------------------

### Import vendor CSS

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/08-appearance.md

Import the base Filament CSS into your custom theme file.

```css
@import '../../vendor/filament/filament/resources/css/app.css';
```

--------------------------------

### Configure filter UI and defaults

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/04-filters.md

Use toggle to switch to a toggle button and default to enable the filter automatically.

```php
use Filament\Tables\Filters\Filter;

Filter::make('is_featured')->toggle()
```

```php
use Filament\Tables\Filters\Filter;

Filter::make('is_featured')->label('Featured')->default()
```

--------------------------------

### Generate a custom page

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/02-resources/10-custom-pages.md

Use the artisan command to scaffold a new custom page class and its corresponding view file.

```bash
php artisan make:filament-page SortUsers --resource=UserResource --type=custom
```

--------------------------------

### Configure image cropping and resizing

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Enables image processing features like resizing and cropping before upload.

```php
use Filament\Forms\Components\FileUpload;

FileUpload::make('image')
    ->image()
    ->imageResizeMode('cover')
    ->imageCropAspectRatio('16:9')
    ->imageResizeTargetWidth('1920')
    ->imageResizeTargetHeight('1080')
```

--------------------------------

### Define a responsive breakpoint for Split

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/06-layout.md

Uses the from() method to specify the breakpoint where columns transition from stacked to horizontal.

```php
use Filament\Tables\Columns\Layout\Split;
use Filament\Tables\Columns\ImageColumn;
use Filament\Tables\Columns\TextColumn;

Split::make([
    ImageColumn::make('avatar'),
    TextColumn::make('name'),
    TextColumn::make('email'),
])->from('md')
```

--------------------------------

### Upgrade the package

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/spatie-laravel-media-library-plugin/docs/01-installation.md

Updates the plugin to the latest version compatible with your project.

```bash
composer update
```

--------------------------------

### Add text affixes

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Display text before or after the input field using prefix and suffix.

```php
use Filament\Forms\Components\TextInput;

TextInput::make('domain')
    ->url()
    ->prefix('https://')
    ->suffix('.com')
```

--------------------------------

### Set Key-value placeholders

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Define placeholder text for the key and value fields.

```php
use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->keyPlaceholder('Property name')
    ->valuePlaceholder('Property value')
```

--------------------------------

### Import styles in app.css

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/01-installation.md

Import the Filament forms vendor CSS and Tailwind CSS directives.

```css
@import '../../vendor/filament/forms/dist/module.esm.css';

@tailwind base;
@tailwind components;
@tailwind utilities;
```

--------------------------------

### Implement Table with Form Builder

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/02-getting-started.md

A full Livewire component implementation using the HasTable contract and InteractsWithTable trait to define table columns and form schema.

```php
<?php

namespace App\Http\Livewire;

use App\Models\Post;
use Filament\Tables;
use Illuminate\Contracts\View\View;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\Collection;
use Livewire\Component;

class ListPosts extends Component implements Tables\Contracts\HasTable
{
    use Tables\Concerns\InteractsWithTable;

    public function mount(): void
    {
        $this->form->fill();
    }

    protected function getFormSchema(): array
    {
        return [
            // ...
        ];
    }

    protected function getTableQuery(): Builder
    {
        return Post::query();
    }

    protected function getTableColumns(): array
    {
        return [
            Tables\Columns\ImageColumn::make('author.avatar')
                ->size(40)
                ->circular(),
            Tables\Columns\TextColumn::make('title'),
            Tables\Columns\TextColumn::make('author.name'),
            Tables\Columns\BadgeColumn::make('status')
                ->colors([
                    'danger' => 'draft',
                    'warning' => 'reviewing',
                    'success' => 'published',
                ]),
            Tables\Columns\IconColumn::make('is_featured')->boolean(),
        ];
    }

    public function render(): View
    {
        return view('list-posts');
    }
}
```

--------------------------------

### Setting Action Size

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/03-pages/02-actions.md

Adjust the button size using sm, md, or lg.

```php
use Filament\Pages\Actions\Action;

protected function getActions(): array
{
    return [
        Action::make('settings')->size('lg'),
    ];
}
```

--------------------------------

### Run a Livewire action on column click

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/03-columns/01-getting-started.md

Use the action method to execute a callback or Livewire method when a cell is clicked.

```php
use Filament\Tables\Columns\TextColumn;

TextColumn::make('title')
    ->action(function (Post $record): void {
        $this->dispatchBrowserEvent('open-post-edit-modal', [
            'post' => $record->getKey(),
        ]);
    })
```

--------------------------------

### Enable skippable navigation

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/04-layout.md

Use the skippable method to allow users to navigate freely between steps.

```php
use Filament\Forms\Components\Wizard;

Wizard::make([
    // ...
])->skippable()
```

--------------------------------

### Define Table Widget Query and Columns

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/04-dashboard/04-tables.md

Implement getTableQuery and getTableColumns to define the data source and display structure for the widget.

```php
<?php

namespace App\Filament\Widgets;

use App\Models\Order;
use Closure;
use Filament\Tables;
use Filament\Widgets\TableWidget as BaseWidget;
use Illuminate\Database\Eloquent\Builder;

class LatestOrders extends BaseWidget
{
    protected function getTableQuery(): Builder
    {
        return Order::query()->latest();
    }

    protected function getTableColumns(): array
    {
        return [
            Tables\Columns\TextColumn::make('id'),
            Tables\Columns\TextColumn::make('customer.name')
                ->label('Customer'),
        ];
    }
}
```

--------------------------------

### Customizing Modal UI

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/05-actions.md

Configures the heading, subheading, and button label for a bulk action confirmation modal.

```php
use Filament\Tables\Actions\BulkAction;
use Illuminate\Database\Eloquent\Collection;

BulkAction::make('delete')
    ->action(fn (Collection $records) => $records->each->delete())
    ->deselectRecordsAfterCompletion()
    ->requiresConfirmation()
    ->modalHeading('Delete posts')
    ->modalSubheading('Are you sure you\'d like to delete these posts? This cannot be undone.')
    ->modalButton('Yes, delete them')
```

--------------------------------

### Enable File Opening

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Add a button to open uploaded files in a new browser tab.

```php
use Filament\Forms\Components\FileUpload;

FileUpload::make('attachments')
    ->multiple()
    ->enableOpen()
```

--------------------------------

### Add hints

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Display text or icons adjacent to the field label using hint methods.

```php
use Filament\Forms\Components\TextInput;

TextInput::make('password')->hint('[Forgotten your password?](forgotten-password)')
```

```php
use Filament\Forms\Components\RichEditor;

RichEditor::make('content')
    ->hint('Translatable')
    ->hintIcon('heroicon-s-translate')
```

```php
use Filament\Forms\Components\RichEditor;

RichEditor::make('content')
    ->hint('Translatable')
    ->hintColor('primary')
```

--------------------------------

### Enable clipboard copying

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/03-columns/05-badge.md

Configure copyable text behavior, including custom messages and state modification.

```php
use Filament\Tables\Columns\BadgeColumn;

BadgeColumn::make('email')
    ->copyable()
    ->copyMessage('Email address copied')
    ->copyMessageDuration(1500)
```

```php
use Filament\Tables\Columns\BadgeColumn;

BadgeColumn::make('name')
    ->copyable()
    ->copyableState(fn (string $state): string => "Name: {$state}")
```

```php
use App\Models\User;
use Filament\Tables\Columns\BadgeColumn;

BadgeColumn::make('name')
    ->copyable()
    ->copyableState(fn (User $record): string => "Name: {$record->name}")
```

--------------------------------

### Render a relation manager in a test

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/10-testing.md

Mounts the relation manager component to verify it renders successfully.

```php
use function Pest\Livewire\livewire;

it('can render relation manager', function () {
    $category = Category::factory()
        ->has(Post::factory()->count(10))
        ->create();

    livewire(CategoryResource\RelationManagers\PostsRelationManager::class, [
        'ownerRecord' => $category,
    ])
        ->assertSuccessful();
});
```

--------------------------------

### Configure vite.config.js

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/01-installation.md

Update the Vite configuration to include paths for Livewire and form components for hot reloading.

```js
import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
                'app/Forms/Components/**',
            ],
        }),
    ],
})
```

--------------------------------

### Importing JavaScript notification objects

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/notifications/docs/02-sending-notifications.md

Shows how to import the Notification and NotificationAction classes in a bundled JavaScript file.

```js
import { Notification, NotificationAction } from '../../vendor/filament/notifications/dist/module.esm'

// ...
```

--------------------------------

### Add icon affixes

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Display icons before or after the input field.

```php
use Filament\Forms\Components\TextInput;

TextInput::make('domain')
    ->url()
    ->prefixIcon('heroicon-s-external-link')
    ->suffixIcon('heroicon-s-external-link')
```

--------------------------------

### Add a View page to an existing resource

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/02-resources/05-viewing-records.md

Generate a new ViewRecord page and register it in the resource's getPages method.

```bash
php artisan make:filament-page ViewUser --resource=UserResource --type=ViewRecord
```

```php
public static function getPages(): array
{
    return [
        'index' => Pages\\\ListUsers::route('/'),
        'create' => Pages\\\CreateUser::route('/create'),
        'view' => Pages\\\ViewUser::route('/{record}'),
        'edit' => Pages\\\EditUser::route('/{record}/edit'),
    ];
}
```

--------------------------------

### Implement HasTable interface in Livewire

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/02-getting-started.md

Prepare a Livewire component by implementing the HasTable interface and using the InteractsWithTable trait.

```php
<?php

namespace App\Http\Livewire;

use Filament\Tables;
use Illuminate\Contracts\View\View;
use Livewire\Component;

class ListPosts extends Component implements Tables\Contracts\HasTable
{
    use Tables\Concerns\InteractsWithTable;

    public function render(): View
    {
        return view('list-posts');
    }
}
```

--------------------------------

### Storing conversions on a separate disk

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/spatie-laravel-media-library-plugin/docs/02-form-components.md

Configure a specific disk for storing media conversions and responsive images.

```php
use Filament\Forms\Components\SpatieMediaLibraryFileUpload;

SpatieMediaLibraryFileUpload::make('attachments')->conversionsDisk('s3'),
```

--------------------------------

### Add action affixes

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Render interactive actions before or after the input field.

```php
use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\TextInput;

TextInput::make('domain')
    ->suffixAction(fn (?string $state): Action =>
        Action::make('visit')
            ->icon('heroicon-s-external-link')
            ->url(
                filled($state) ? "https://{$state}" : null,
                shouldOpenInNewTab: true,
            ),
    )
```

--------------------------------

### Create a form placeholder

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/04-layout.md

Use the Placeholder component to display static text. Every placeholder requires a unique name.

```php
use Filament\Forms\Components\Placeholder;

Placeholder::make('Label')
    ->content('Content, displayed underneath the label')
```

--------------------------------

### Add descriptions to Radio options

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Provides additional context for each option. Ensure the keys in the descriptions array match the keys in the options array.

```php
use Filament\Forms\Components\Radio;

Radio::make('status')
    ->options([
        'draft' => 'Draft',
        'scheduled' => 'Scheduled',
        'published' => 'Published'
    ])
    ->descriptions([
        'draft' => 'Is not visible.',
        'scheduled' => 'Will be visible.',
        'published' => 'Is visible.'
    ])
```

--------------------------------

### Preload Select options

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/03-fields.md

Use preload to fetch options from the database when the page loads instead of waiting for user search input.

```php
use Filament\Forms\Components\Select;

Select::make('authorId')
    ->relationship('author', 'name')
    ->preload()
```

--------------------------------

### Using media conversions

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/spatie-laravel-media-library-plugin/docs/02-form-components.md

Specify a conversion to display a specific version of the file in the form.

```php
use Filament\Forms\Components\SpatieMediaLibraryFileUpload;

SpatieMediaLibraryFileUpload::make('attachments')->conversion('thumb'),
```

--------------------------------

### Enable copyable color functionality

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/tables/docs/03-columns/07-color.md

Configure the column to allow copying the color value to the clipboard, requiring SSL.

```php
use Filament\Tables\Columns\ColorColumn;

ColorColumn::make('color')
    ->copyable()
    ->copyMessage('Color code copied')
    ->copyMessageDuration(1500)
```

--------------------------------

### Render View Page

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/10-testing.md

Verify that the View page for a resource renders successfully by requesting its generated URL.

```php
it('can render page', function () {
    $this->get(PostResource::getUrl('view', [
        'record' => Post::factory()->create(),
    ]))->assertSuccessful();
});
```

--------------------------------

### Assigning Keybindings to Actions

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/03-pages/02-actions.md

Attach keyboard shortcuts to actions using Mousetrap-compatible key codes.

```php
use Filament\Pages\Actions\Action;

Action::make('save')
    ->action(fn () => $this->save())
    ->keyBindings(['command+s', 'ctrl+s'])
```

--------------------------------

### Create a compact section

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/forms/docs/04-layout.md

Apply the compact method for a more condensed visual style, often used when nesting sections.

```php
use Filament\Forms\Components\Section;

Section::make('Heading')
    ->schema([
        // ...
    ])
    ->compact()
```

--------------------------------

### Publish translations

Source: https://github.com/pokmot/filament-v2/blob/2.x/packages/admin/docs/01-installation.md

Publish language files for the package and its dependencies.

```bash
php artisan vendor:publish --tag=filament-translations
```

```bash
php artisan vendor:publish --tag=forms-translations
php artisan vendor:publish --tag=tables-translations
php artisan vendor:publish --tag=filament-support-translations
```