filament
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
Top Related Projects
A full-stack framework for Laravel that takes the pain out of building dynamic UIs.
Easy AdminLTE integration with Laravel
A dynamic table component for Laravel Livewire
Quick Overview
Filament is a powerful and flexible Laravel admin panel and application framework. It provides a set of tools and components to rapidly build beautiful, responsive, and feature-rich admin interfaces and CRUD panels for Laravel applications.
Pros
- Highly customizable and extensible
- Built-in authentication, authorization, and user management
- Responsive design with dark mode support
- Comprehensive set of form components and widgets
Cons
- Steep learning curve for beginners
- Requires Laravel knowledge
- Limited third-party plugin ecosystem compared to some alternatives
- May be overkill for simple projects
Code Examples
Creating a resource:
use App\Models\Customer;
use Filament\Resources\Resource;
use Filament\Resources\Table;
use Filament\Tables;
class CustomerResource extends Resource
{
protected static ?string $model = Customer::class;
public static function table(Table $table): Table
{
return $table
->columns([
Tables\Columns\TextColumn::make('name'),
Tables\Columns\TextColumn::make('email'),
])
->filters([
//
])
->actions([
Tables\Actions\EditAction::make(),
])
->bulkActions([
Tables\Actions\DeleteBulkAction::make(),
]);
}
}
Adding a custom action:
use Filament\Tables\Actions\Action;
Action::make('approve')
->label('Approve')
->icon('heroicon-o-check')
->action(fn (Customer $record) => $record->approve())
->requiresConfirmation()
Creating a dashboard widget:
use Filament\Widgets\StatsOverviewWidget as Widget;
use Filament\Widgets\StatsOverviewWidget\Card;
class CustomerStatsWidget extends Widget
{
protected function getCards(): array
{
return [
Card::make('Total Customers', Customer::count()),
Card::make('New Customers', Customer::where('created_at', '>=', now()->subWeek())->count()),
];
}
}
Getting Started
-
Install Filament via Composer:
composer require filament/filament
-
Run the installation command:
php artisan filament:install
-
Create a user:
php artisan make:filament-user
-
Start your Laravel development server and visit
/admin
to access the Filament dashboard.
Competitor Comparisons
A full-stack framework for Laravel that takes the pain out of building dynamic UIs.
Pros of Livewire
- More lightweight and flexible, allowing for granular control over components
- Easier learning curve for developers already familiar with Laravel
- Can be integrated into existing Laravel projects without a full framework adoption
Cons of Livewire
- Requires more manual setup for complex UI components
- Less out-of-the-box functionality for admin panels and CRUD operations
- May require more custom JavaScript for advanced interactivity
Code Comparison
Livewire component example:
class SearchUsers extends Component
{
public $search = '';
public function render()
{
return view('livewire.search-users', [
'users' => User::where('name', 'like', "%{$this->search}%")->get(),
]);
}
}
Filament form example:
use Filament\Forms\Components\TextInput;
public static function form(Form $form): Form
{
return $form->schema([
TextInput::make('name')->required()->maxLength(255),
TextInput::make('email')->email()->required()->maxLength(255),
]);
}
Filament provides a more structured approach for building admin panels and CRUD interfaces, while Livewire offers greater flexibility for custom components. Filament builds on top of Livewire, adding pre-built UI components and admin panel functionality, making it easier to create complex admin interfaces quickly.
Easy AdminLTE integration with Laravel
Pros of Laravel-AdminLTE
- Extensive documentation and examples
- Large community and long-standing project
- Easy integration with existing Laravel projects
Cons of Laravel-AdminLTE
- Less modern UI design compared to Filament
- Requires more manual configuration and customization
- Limited built-in form and data handling capabilities
Code Comparison
Laravel-AdminLTE:
@extends('adminlte::page')
@section('title', 'Dashboard')
@section('content_header')
<h1>Dashboard</h1>
@stop
@section('content')
<p>Welcome to this beautiful admin panel.</p>
@stop
Filament:
use Filament\Pages\Page;
class Dashboard extends Page
{
protected static ?string $navigationIcon = 'heroicon-o-home';
protected static string $view = 'filament.pages.dashboard';
}
Laravel-AdminLTE provides a more traditional blade-based approach, while Filament uses a more modern, component-based structure. Filament's code is generally more concise and follows Laravel's newer practices.
Both projects offer powerful admin panel solutions for Laravel, but Filament provides a more modern, feature-rich experience out of the box, while Laravel-AdminLTE offers greater flexibility for customization in existing projects.
A dynamic table component for Laravel Livewire
Pros of Laravel Livewire Tables
- Focused specifically on table functionality, making it lightweight and easy to integrate
- Offers more granular control over table structure and behavior
- Simpler learning curve for developers already familiar with Laravel and Livewire
Cons of Laravel Livewire Tables
- Limited to table functionality, while Filament provides a complete admin panel solution
- Less extensive documentation and community support compared to Filament
- Fewer built-in features and customization options out of the box
Code Comparison
Laravel Livewire Tables:
use Rappasoft\LaravelLivewireTables\DataTableComponent;
class UsersTable extends DataTableComponent
{
public function columns(): array
{
return [
Column::make('Name'),
Column::make('Email'),
];
}
}
Filament:
use Filament\Resources\Table;
use Filament\Resources\Resource;
class UserResource extends Resource
{
public static function table(Table $table): Table
{
return $table
->columns([
Tables\Columns\TextColumn::make('name'),
Tables\Columns\TextColumn::make('email'),
]);
}
}
Both libraries offer concise ways to define table structures, but Filament's approach is more integrated into its broader resource management system.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Filament is a collection of full-stack components for accelerated Laravel development. They are beautifully designed, intuitive to use, and fully extensible - the perfect starting point for your next Laravel app. Why waste time building the same features over and over again?
Packages
Panel Builder ⢠Documentation ⢠Demo
The Panel Builder is the foundation of Filament. Combining all the packages together, it lets you quickly build Laravel admin panels, customer-facing apps, Software-as-a-Service platforms, and more. Filament makes custom CRUD-driven interfaces feel like a breeze to build and deploy.
composer require filament/filament
Form Builder ⢠Documentation
Rendering interactive forms in a Livewire component has never been easier than with our Form Builder. Easily build stunning forms with over 25 components out of the box. It's also fully extensible, so you can add your own custom fields and actions. As well as the Panel Builder, it is seamlessly integrated into action modals, and is used by the Table Builder to filter rows.
composer require filament/forms
Table Builder ⢠Documentation
Craft beautiful, optimized, and interactive datatables for any situation. Drop in to a Livewire component, and you're ready to go. It's also fully extensible, so you can add your own custom columns, filters and actions.
composer require filament/tables
Notifications ⢠Documentation
An important part of any application is the ability to notify your users of important events. Our notifications package lets you deliver flash notifications to users from any Livewire request, or even from your JavaScript frontend. In addition, it can fetch notifications from the database and render them in a beautiful slide-over modal, or even receive live notifications from a websockets server.
composer require filament/notifications
Actions ⢠Documentation
Actions are buttons that can open modals. They are a very versatile component of many interfaces, avoiding the need for the user to navigate away from the page to complete a task. From confirming a destructive action, to editing an Eloquent record, to importing data from an uploaded CSV file, action modals are a great way to keep the user in the flow of the application. Modals are built upon our Form Builder, so they are built upon the same principles of flexibility and extensibility. Modals can be added to any Livewire component with just a few lines of code, and no HTML or JavaScript.
composer require filament/actions
Infolists ⢠Documentation
Infolists are a great way to display read-only information to users about a particular record. They have a fully flexible layout, and can be extended with custom components. They are also seamlessly integrated with the Panel Builder, so you can easily add them to your panel resources.
composer require filament/infolists
Widgets ⢠Documentation
Filament's collection of widgets are built upon Livewire's core principles of real-time reactivity with the server. Combining many widgets lets you quickly build a dashboard for your application, complete with charts and stats, which are able to update live without refreshing the page. They are also seamlessly integrated with any page in the Panel Builder.
composer require filament/widgets
Contributing
Please see our contributing guide.
Need Help?
ð If you spot a bug, please submit a detailed issue, and wait for assistance.
ð¤ If you have a question or feature request, please start a new discussion. We also have a Discord community. For quick help, ask questions in the appropriate channel.
ð If you discover a vulnerability, please review our security policy.
Top Related Projects
A full-stack framework for Laravel that takes the pain out of building dynamic UIs.
Easy AdminLTE integration with Laravel
A dynamic table component for Laravel Livewire
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot