Skip to content

Overview

Aura Filament ships a small set of anonymous Blade components you can drop into your resources, widgets, and custom pages.

All components are namespaced under aura-filament:

<x-aura-filament::stats-card ... />

Stats Card

Premium stats card with icon, trend indicator, and optional SVG sparkline. Zero JavaScript dependencies — the sparkline is rendered server-side.

Basic usage

<x-aura-filament::stats-card
    label="Revenue"
    value="€24,520"
/>

With trend

<x-aura-filament::stats-card
    label="Revenue"
    :value="'€24,520'"
    :trend="12.5"
    trend-direction="up"
    color="success"
/>

With sparkline

<x-aura-filament::stats-card
    label="Daily signups"
    value="142"
    :sparkline="[10, 18, 12, 24, 30, 28, 42]"
    color="info"
/>

Full example in a widget

namespace App\Filament\Widgets;

use Filament\Widgets\Widget;

class RevenueStatsWidget extends Widget
{
    protected static string $view = 'filament.widgets.revenue-stats';

    protected int | string | array $columnSpan = 'full';
}

{{-- resources/views/filament/widgets/revenue-stats.blade.php --}}
<div class="aura-stats-grid">
    <x-aura-filament::stats-card
        label="Revenue (MTD)"
        value="€24,520"
        :trend="12.5"
        trend-direction="up"
        :sparkline="[10, 12, 8, 15, 18, 22, 25]"
        icon="phosphor-currency-eur"
        color="success"
        description="Compared to last month"
    />

    <x-aura-filament::stats-card
        label="New customers"
        value="89"
        :trend="-3.2"
        trend-direction="down"
        color="warning"
    />

    <x-aura-filament::stats-card
        label="Avg. order"
        value="€275"
        color="info"
    />

    <x-aura-filament::stats-card
        label="Support tickets"
        value="12"
        :trend="0"
        color="neutral"
    />
</div>

The .aura-stats-grid utility gives a responsive 1/2/4 column layout out of the box.

Props

Prop Type Required Description
label string yes Label above the main value
value string|int yes Main value to display (formatted)
description ?string no Text below the value
icon ?string no Blade icon name (e.g. phosphor-currency-eur)
color string no primary (default), success, warning, danger, info, neutral
trend numeric|string no Trend value (number shows with % suffix)
trendDirection 'up'|'down' no Force direction (otherwise inferred from sign)
sparkline array no Array of numbers, needs ≥ 2 values

Sparkline

The sparkline is generated by BlueStarSystem\AuraFilament\Support\Sparkline:

use BlueStarSystem\AuraFilament\Support\Sparkline;

$svg = Sparkline::svg([10, 20, 15, 25], width: 100, height: 30);

No JavaScript — just SVG paths, perfectly crisp at any size.