• Overview
• Line chart
• Bar chart
• Pie and doughnut charts
  • ChartPalette helpers
• Activity feed
  • ActivityItem DTO
• Widget registration
• Dashboard composition tip

Overview#

Aura Filament v2.3 ships a family of dashboard widgets styled in the Aura visual language:

• AuraChartWidget base class plus four concrete types:
  • AuraLineChart
  • AuraBarChart
  • AuraPieChart
  • AuraDoughnutChart
• AuraActivityFeed base class for vertical-timeline activity widgets.
• ChartPalette helper to build dataset color arrays.
• ActivityItem DTO for feed items.

All widgets are pure Filament widgets — register them in your panel's ->widgets([]) array or discover via ->discoverWidgets().

Line chart#

namespace App\Filament\Widgets;

use BlueStarSystem\AuraFilament\Widgets\AuraLineChart;
use BlueStarSystem\AuraFilament\Support\ChartPalette;

class RevenueTrendChart extends AuraLineChart
{
    protected ?string $heading = 'Revenue (last 30 days)';

    protected function getData(): array
    {
        return [
            'labels' => ['Wk 1', 'Wk 2', 'Wk 3', 'Wk 4'],
            'datasets' => [
                [
                    'label' => 'Revenue',
                    'data'  => [4200, 5800, 5100, 7400],
                    ...ChartPalette::line(index: 0),
                ],
            ],
        ];
    }
}

What you get out of the box:

• Smooth lines (tension 0.35).
• Glass tooltip matching the active preset.
• Soft grid lines that adapt to dark mode.
• Legend hidden by default; set protected bool $showLegend = true; to enable.
• Canvas height capped at 320px (the wrapper div is capped too — prevents Chart.js from growing unbounded).

Bar chart#

use BlueStarSystem\AuraFilament\Widgets\AuraBarChart;
use BlueStarSystem\AuraFilament\Support\ChartPalette;

class OrdersByStatus extends AuraBarChart
{
    protected ?string $heading = 'Orders by status';

    protected function getData(): array
    {
        return [
            'labels' => ['Pending', 'Paid', 'Shipped', 'Cancelled'],
            'datasets' => [
                [
                    'label' => 'Orders',
                    'data'  => [12, 48, 37, 5],
                    ...ChartPalette::bar(count: 4),
                ],
            ],
        ];
    }
}

Rounded bars (radius 6), same tooltip, same grid styling.

Pie and doughnut charts#

use BlueStarSystem\AuraFilament\Widgets\AuraPieChart;
use BlueStarSystem\AuraFilament\Support\ChartPalette;

class PlanDistributionChart extends AuraPieChart
{
    protected ?string $heading = 'Plan distribution';

    protected function getData(): array
    {
        return [
            'labels' => ['Free', 'Pro', 'Team'],
            'datasets' => [
                [
                    'data' => [120, 58, 22],
                    ...ChartPalette::pie(count: 3),
                ],
            ],
        ];
    }
}

AuraDoughnutChart has the same shape, different inner radius.

ChartPalette helpers#

• ChartPalette::line(int $index) — single-dataset line styling, cycles through the rainbow.
• ChartPalette::bar(int $count) — array of bar colors for N datasets/bars.
• ChartPalette::pie(int $count) / ChartPalette::rainbow(int $count) — rainbow colors tuned for the Aura presets.

Activity feed#

use BlueStarSystem\AuraFilament\Widgets\AuraActivityFeed;
use BlueStarSystem\AuraFilament\Support\ActivityItem;
use App\Models\Order;

class RecentActivityFeed extends AuraActivityFeed
{
    protected ?string $heading = 'Recent activity';

    protected function getActivities(): array
    {
        return Order::latest()->limit(6)->get()
            ->map(fn (Order $order) => new ActivityItem(
                title: "Order #{$order->id} was {$order->status->value}",
                description: "{$order->customer_name} · {$order->total_formatted}",
                timestamp: $order->updated_at,
                variant: match ($order->status->value) {
                    'paid', 'shipped' => 'success',
                    'cancelled'        => 'danger',
                    'pending'          => 'warning',
                    default            => 'neutral',
                },
                actor: $order->customer_name,
            ))
            ->all();
    }
}

Rendering:

• Left column is a marker (avatar, icon, or colored dot) connected vertically by a soft timeline.
• Right column is the body — title, relative time (timestamp->diffForHumans()), description, and actor.
• Rendered eagerly (protected static bool $isLazy = false;) because feeds usually sit above the fold and queries are cheap.

ActivityItem DTO#

new ActivityItem(
    title: string,
    description: ?string = null,
    timestamp: ?Carbon\CarbonInterface = null,
    variant: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' = 'neutral',
    actor: ?string = null,
    icon: ?string = null,         // heroicon / phosphor name, overrides variant dot
    avatarUrl: ?string = null,    // overrides icon
    url: ?string = null,          // makes the item clickable
);

Widget registration#

In your panel provider:

->widgets([
    \App\Filament\Widgets\RevenueTrendChart::class,
    \App\Filament\Widgets\OrdersByStatus::class,
    \App\Filament\Widgets\PlanDistributionChart::class,
    \App\Filament\Widgets\RecentActivityFeed::class,
])

Or with discovery:

->discoverWidgets(in: app_path('Filament/Widgets'), for: 'App\Filament\Widgets')

Dashboard composition tip#

A classic Aura dashboard layout:

This is exactly the layout shown on demo.aura-ui.com — log in with the prefilled credentials to explore the source.