Skip to main content

​
Overview

Widgets are reusable components that display information on your dashboard or admin pages. Filament provides several widget types including stats cards, charts, and tables.

​
Creating a Widget

Use the Filament command to generate a widget: 
php artisan make:filament-widget SalesChart
This creates a widget class in src/Filament/Widgets.

​
Widget Types

​
Stats Overview Widget

Display key metrics: 
namespace Esign\UnleashCommerce\Admin\Filament\Widgets;

use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;

class StatsOverview extends BaseWidget
{
    protected function getStats(): array
    {
        return [
            Stat::make('Total Orders', Order::count()),
            Stat::make('Revenue', '$' . Order::sum('total')),
        ];
    }
}

​
Chart Widget

Visualize data with charts: 
class SalesChart extends ChartWidget
{
    protected static ?string $heading = 'Sales Growth';
    
    protected function getData(): array
    {
        return [
            'datasets' => [
                [
                    'label' => 'Sales',
                    'data' => [10, 20, 30, 40],
                ],
            ],
        ];
    }
}

​
Adding to Dashboard

Register widgets in your page or dashboard: 
public static function getWidgets(): array
{
    return [
        StatsOverview::class,
        SalesChart::class,
    ];
}

​
Performance

Cache widget data when dealing with large datasets to maintain admin panel responsiveness.

​
Documentation

Explore more in the Filament Widgets documentation.