Dashboard Widgets for Laravel. Zero Complexity.
Build beautiful, interactive dashboards with minimal code. Accelade Widgets provides a powerful set of dashboard components including stats, charts, tables, and calendars.
use Accelade\Widgets\Components\StatsWidget;
use Accelade\Widgets\Components\Stat;
$widget = StatsWidget::make()
->columns(4)
->stats([
Stat::make('Total Users', '12,345')
->description('3.5% increase')
->icon('heroicon-o-users')
->color('primary'),
]);That's it. Render with <x-widgets::stats-widget :widget="$widget" />.
- Filament-Compatible API - Familiar syntax if you use Filament
- Stats Widget - Display key metrics with icons, descriptions, and trends
- Chart Widget - Line, bar, pie, doughnut, and area charts via Chart.js
- Table Widget - Display tabular data with sorting and formatting
- Calendar Widget - Display events in a calendar view
- Grid Layout - Responsive widget arrangement
- Dark Mode - Built-in dark mode support
- Polling - Auto-refresh widgets at configurable intervals
- Lazy Loading - Load widgets on demand with placeholders
- Lightweight - Minimal dependencies, maximum performance
composer require accelade/widgetsThe service provider will be automatically registered.
php artisan vendor:publish --tag=widgets-configuse Accelade\Widgets\Components\StatsWidget;
use Accelade\Widgets\Components\Stat;
$widget = StatsWidget::make()
->columns(4)
->stats([
Stat::make('Total Users', '12,345')
->description('3.5% increase')
->descriptionIcon('heroicon-m-arrow-trending-up', 'success')
->icon('heroicon-o-users')
->color('primary'),
Stat::make('Revenue', '$45,678')
->description('12% increase')
->icon('heroicon-o-currency-dollar')
->color('success'),
Stat::make('Orders', '1,234')
->description('New this month')
->icon('heroicon-o-shopping-cart')
->color('warning'),
Stat::make('Conversion', '3.2%')
->description('From last month')
->icon('heroicon-o-chart-bar')
->color('info'),
]);<x-widgets::stats-widget :widget="$widget" />use Accelade\Widgets\Components\ChartWidget;
$chart = ChartWidget::make()
->heading('Revenue Overview')
->description('Monthly revenue for the past 12 months')
->line()
->height(350)
->data([
'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
'datasets' => [
[
'label' => 'Revenue',
'data' => [12000, 19000, 15000, 25000, 22000, 30000],
'borderColor' => '#3b82f6',
'backgroundColor' => 'rgba(59, 130, 246, 0.1)',
'tension' => 0.4,
'fill' => true,
],
],
]);Supported chart types: line(), bar(), pie(), doughnut(), area(), radar(), polarArea().
use Accelade\Widgets\Components\TableWidget;
use Accelade\Widgets\Components\Column;
$table = TableWidget::make()
->heading('Recent Orders')
->columns([
Column::make('id')->label('#')->width('60px'),
Column::make('customer')->label('Customer')->sortable(),
Column::make('amount')
->label('Amount')
->alignRight()
->formatStateUsing(fn ($value) => '$' . number_format($value, 2)),
Column::make('status')
->label('Status')
->badge()
->color(fn ($value) => match ($value) {
'completed' => 'success',
'pending' => 'warning',
'cancelled' => 'danger',
default => 'gray',
}),
])
->records($orders)
->striped()
->hoverable();use Accelade\Widgets\Components\CalendarWidget;
$calendar = CalendarWidget::make()
->heading('Upcoming Events')
->events([
['title' => 'Team Meeting', 'start' => '2024-01-15', 'color' => '#3b82f6'],
['title' => 'Product Launch', 'start' => '2024-01-20', 'end' => '2024-01-22'],
]);<x-widgets::grid :columns="12" :gap="6">
<div class="col-span-8">
<x-widgets::chart-widget :widget="$chartWidget" />
</div>
<div class="col-span-4">
<x-widgets::stats-widget :widget="$statsWidget" />
</div>
<div class="col-span-12">
<x-widgets::table-widget :widget="$tableWidget" />
</div>
</x-widgets::grid>$widget = StatsWidget::make()
->pollingInterval('30s') // Refresh every 30 seconds
->stats([...]);$widget = ChartWidget::make()
->lazy(true, 'Loading chart...')
->data([...]);- PHP 8.2+
- Laravel 11.x or 12.x
| Guide | Description |
|---|---|
| Getting Started | Installation and basic usage |
| Stats Widget | Display key metrics and statistics |
| Chart Widget | Charts with Chart.js integration |
| Table Widget | Tabular data display |
| Calendar Widget | Calendar view for events |
Accelade Widgets is part of the Accelade ecosystem:
| Package | Description |
|---|---|
| accelade/accelade | Core reactive Blade components |
| accelade/schemas | Schema-based layouts |
| accelade/forms | Form builder with validation |
| accelade/infolists | Display read-only data |
| accelade/tables | Data tables with filtering |
| accelade/actions | Action buttons with modals |
| accelade/widgets | Dashboard widgets (this package) |
MIT License. See LICENSE for details.