Examples — Aura UI Docs

First-run onboarding flow (v2.5)
Project setup wizard (v2.5)
Brand settings page (v2.4)
Code snippet CMS (v2.4)
Revenue dashboard (v2.3)
User management panel (v2.3)
Brand customization workflow (v2.3)
Custom CSS Overrides
Custom Primary Color
Custom Font
Disabling Default Colors
Disabling Features via Config
Icon Pack Setup
Multi-Panel Configuration
Dynamic Preset Switching
Production-Ready Setup

First-run onboarding flow (v2.5)

Combines the welcome widget, empty states, and the guided tour so a brand-new user has a clear next action on every screen they hit.

// app/Filament/Widgets/GettingStarted.php
use App\Models\Order;
use App\Models\User;
use BlueStarSystem\AuraFilament\Support\OnboardingStep;
use BlueStarSystem\AuraFilament\Widgets\AuraWelcomeWidget;

class GettingStarted extends AuraWelcomeWidget
{
    protected ?string $heading = 'Get started';

    protected ?string $subheading = 'Four steps, five minutes.';

    protected bool $hideWhenComplete = true;

    protected function getSteps(): array
    {
        return [
            OnboardingStep::make('profile')
                ->title('Complete your profile')
                ->icon('heroicon-o-user-circle')
                ->completed(fn () => filled(auth()->user()?->avatar_path))
                ->action('Go to profile', url('/admin/profile')),

            OnboardingStep::make('team')
                ->title('Invite your team')
                ->icon('heroicon-o-users')
                ->completed(fn () => User::count() > 1)
                ->action('Invite members', url('/admin/team')),

            OnboardingStep::make('first_order')
                ->title('Create your first order')
                ->icon('heroicon-o-shopping-bag')
                ->completed(fn () => Order::exists())
                ->action('New order', url('/admin/orders/create')),
        ];
    }
}

On the orders index page, when no orders exist yet, swap Filament's default empty state for an Aura one and launch a tour from its action:

{{-- resources/views/filament/resources/orders/empty.blade.php --}}
<x-aura-filament::empty-state
    variant="no-orders"
    title="No orders yet — let's fix that"
    description="A quick tour will point out the three fields we use most."
    size="lg"
>
    <x-filament::button
        x-on:click="window.dispatchEvent(new CustomEvent('aura-tour:start',{detail:{id:'orders-intro'}}))"
    >
        Take the 30-second tour
    </x-filament::button>
    <x-filament::button color="gray" outlined tag="a" href="/admin/orders/create">
        Create manually
    </x-filament::button>
</x-aura-filament::empty-state>

<x-aura-filament::tour id="orders-intro" :steps="$tourSteps" />

Three components, one coherent first-run experience. Once every welcome step is done, hideWhenComplete dismisses the widget automatically.

Project setup wizard (v2.5)

The wizard page scaffold pairs naturally with the v2.4 form fields. Here's a four-step setup flow that uses AuraColorPicker inside step 2 to preview the primary palette live:

// app/Filament/Pages/ProjectSetup.php
use BlueStarSystem\AuraFilament\Pages\AuraWizardPage;
use BlueStarSystem\AuraFilament\Support\WizardStep;

class ProjectSetup extends AuraWizardPage
{
    protected string $view = 'filament.pages.project-setup';

    protected function getSteps(): array
    {
        return [
            WizardStep::make('basics')
                ->label('Basics')
                ->icon('heroicon-o-identification')
                ->validate(fn ($data) => ! empty($data['name'])),

            WizardStep::make('brand')
                ->label('Brand')
                ->icon('heroicon-o-swatch')
                ->validate(fn ($data) => preg_match('/^#?[0-9a-f]{6}$/i', $data['color'] ?? '')),

            WizardStep::make('assets')
                ->label('Assets')
                ->icon('heroicon-o-photo')
                ->optional(),

            WizardStep::make('review')
                ->label('Review')
                ->icon('heroicon-o-check-badge'),
        ];
    }

    protected function complete(): void
    {
        \App\Models\Project::create($this->data);

        $this->redirect('/admin/projects');
    }
}

<x-aura-filament::wizard :page="$this">
    @switch($this->currentStep)
        @case(0)
            <input type="text" wire:model.live="data.name" placeholder="Acme">
            @break

        @case(1)
            {{-- AuraColorPicker from Sprint 3 fits in here perfectly --}}
            {!! $this->getBrandColorField()->toHtml() !!}
            @break

        @case(2)
            {{-- AuraFileUpload for the logo --}}
            {!! $this->getLogoField()->toHtml() !!}
            @break

        @case(3)
            <pre>{{ json_encode($this->data, JSON_PRETTY_PRINT) }}</pre>
            @break
    @endswitch
</x-aura-filament::wizard>

Because $data is shared across steps, the brand hex picked in step 2 is immediately available in step 3 for the palette preview, and in complete() for persistence.

Brand settings page (v2.4)

A settings page where the user picks a brand color, uploads a logo, and writes a tagline — then immediately previews the full primary palette. Combines three Sprint 3 fields.

use BlueStarSystem\AuraFilament\Forms\Components\AuraColorPicker;
use BlueStarSystem\AuraFilament\Forms\Components\AuraFileUpload;
use BlueStarSystem\AuraFilament\Forms\Components\AuraRichEditor;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Components\Section;

Section::make('Brand')
    ->columns(2)
    ->components([
        TextInput::make('name')->required(),

        AuraColorPicker::make('brand_color')
            ->label('Brand color')
            ->showPalette()
            ->live(onBlur: true)
            ->required()
            ->helperText('The 11-shade strip below previews the full palette.'),

        AuraFileUpload::make('logo')
            ->label('Logo')
            ->image()
            ->imageEditor()
            ->disk('public')
            ->directory('brand')
            ->columnSpanFull(),

        AuraRichEditor::make('tagline')
            ->label('Tagline / About')
            ->toolbarButtons([
                ['bold', 'italic', 'link'],
                ['bulletList', 'blockquote'],
            ])
            ->columnSpanFull(),
    ]);

Pair with AuraColorPicker::paletteFromValue($request->brand_color) server-side to save the full palette array alongside the hex.

Code snippet CMS (v2.4)

A reactive snippet editor: the language dropdown drives the language badge and tab size on the code editor. Perfect for documentation sites, internal runbooks, and developer-focused admin tools.

use BlueStarSystem\AuraFilament\Forms\Components\AuraCodeEditor;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Components\Section;

Section::make('Snippet')
    ->columns(2)
    ->components([
        TextInput::make('title')->required()->columnSpanFull(),

        Select::make('language')
            ->options([
                'php'  => 'PHP',
                'json' => 'JSON',
                'js'   => 'JavaScript',
                'bash' => 'Bash',
                'css'  => 'CSS',
                'html' => 'HTML',
            ])
            ->reactive()
            ->required(),

        TextInput::make('author')->default(fn () => auth()->user()?->name),

        AuraCodeEditor::make('body')
            ->label('Code')
            ->language(fn ($get) => $get('language'))
            ->tabSize(fn ($get) => $get('language') === 'json' ? 2 : 4)
            ->rows(14)
            ->required()
            ->columnSpanFull(),
    ]);

Both the language badge and the indent size follow the Select reactively — change the dropdown, the editor updates without a page reload.

Revenue dashboard (v2.3)

A full admin landing page that combines a stats overview, a revenue line chart, a status breakdown bar chart, a plan distribution pie chart, and a recent activity feed. This is the exact layout running on demo.aura-ui.com.

// app/Providers/Filament/AdminPanelProvider.php
use BlueStarSystem\AuraFilament\AuraFilamentPlugin;
use BlueStarSystem\AuraFilament\Enums\LayoutMode;
use BlueStarSystem\AuraFilament\Enums\Preset;
use Filament\Support\Colors\Color;

->plugin(
    AuraFilamentPlugin::make()
        ->preset(Preset::Glass)
        ->primaryColor(Color::Violet)
        ->layout(LayoutMode::SidebarFirst)
        ->font('Inter'),
)
->widgets([
    \App\Filament\Widgets\StatsOverview::class,
    \App\Filament\Widgets\RevenueTrendChart::class,
    \App\Filament\Widgets\StatusBreakdownChart::class,
    \App\Filament\Widgets\PlanDistributionChart::class,
    \App\Filament\Widgets\RecentActivityFeed::class,
])

// app/Filament/Widgets/RevenueTrendChart.php
use BlueStarSystem\AuraFilament\Widgets\AuraLineChart;
use BlueStarSystem\AuraFilament\Support\ChartPalette;
use App\Models\Order;

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

    protected function getData(): array
    {
        $rows = Order::whereDate('created_at', '>=', now()->subDays(30))
            ->selectRaw('DATE(created_at) as day, SUM(total) as revenue')
            ->groupBy('day')->orderBy('day')->get();

        return [
            'labels' => $rows->pluck('day')->all(),
            'datasets' => [[
                'label' => 'Revenue',
                'data'  => $rows->pluck('revenue')->all(),
                ...ChartPalette::line(index: 0),
            ]],
        ];
    }
}

Tip: set protected int|string|array $columnSpan = 'full'; on the line chart so it spans the dashboard, then let the bar + pie share a row with columnSpan = 6 each.

User management panel (v2.3)

A sidebar-first panel with the theme configurator enabled, letting team members pick their own preset + primary color while you stay focused on the resource code.

// app/Providers/Filament/AdminPanelProvider.php
->plugin(
    AuraFilamentPlugin::make()
        ->preset(Preset::Corporate)
        ->layout(LayoutMode::SidebarFirst)
        ->themeConfigurator(),
)

// app/Models/User.php
use BlueStarSystem\AuraFilament\Concerns\HasAuraThemePreferences;
use Filament\Models\Contracts\FilamentUser;
use Filament\Panel;

class User extends Authenticatable implements FilamentUser
{
    use HasAuraThemePreferences;

    public function canAccessPanel(Panel $panel): bool
    {
        return $this->is_admin;
    }
}

After publishing and running the migration (vendor:publish --tag=aura-filament-migrations), every user gets their own theme without extra work from you.

Brand customization workflow (v2.3)

From a brand hex color, generate a full palette and wire it into your panel in under a minute.

# Step 1 — generate
php artisan aura-filament:palette "#ff6b35" --format=php

# Step 2 — paste the output into your panel provider:

->plugin(
    AuraFilamentPlugin::make()
        ->preset(Preset::Warm)
        ->primaryColor([
            50  => '255, 239, 229',
            100 => '255, 220, 198',
            // ... paste the rest from the CLI output
            950 => '69, 23, 7',
        ])
)

No build step is required — Filament's primary color is CSS-variable driven, so the change is live as soon as you reload the panel.

Custom CSS Overrides

Override Aura's CSS variables after the main import in your panel's theme.css. This lets you fine-tune radius, blur, and card backgrounds without touching vendor files.

/* resources/css/filament/admin/theme.css */
@import '../../../../vendor/bluestarsystem/aura-filament/resources/css/aura-filament.css';

:root {
    --aura-radius-sm: 0.25rem;
    --aura-radius-md: 0.5rem;
    --aura-radius-lg: 0.75rem;
    --aura-blur: 8px;
    --aura-blur-strong: 16px;
}

.dark {
    --aura-card-bg-dark: rgba(10, 15, 30, 0.9);
}

Custom Primary Color

Pass any Filament Color:: constant or a full custom RGB array to ->primaryColor().

use Filament\Support\Colors\Color;

// Built-in color
AuraFilamentPlugin::make()
    ->primaryColor(Color::Emerald)

// Custom color array
AuraFilamentPlugin::make()
    ->primaryColor([
        50  => '240, 253, 244',
        100 => '220, 252, 231',
        200 => '187, 247, 208',
        300 => '134, 239, 172',
        400 => '74, 222, 128',
        500 => '34, 197, 94',
        600 => '22, 163, 74',
        700 => '21, 128, 61',
        800 => '22, 101, 52',
        900 => '20, 83, 45',
        950 => '5, 46, 22',
    ])

Custom Font

Set any Google Font by name, or pass null to keep your panel's existing font untouched.

AuraFilamentPlugin::make()
    ->font('Poppins')           // any Google Font
    ->primaryColor(Color::Blue)

// Or disable Aura's font entirely:
AuraFilamentPlugin::make()
    ->font(null)                // keep your panel's font

Disabling Default Colors

By default, Aura overrides the Filament color palette: Gray (Slate), Info (Sky), Success (Emerald), Warning (Amber), Danger (Rose). Call ->withoutColors() to disable these overrides and keep your panel's own palette. The primary color is still applied independently.

AuraFilamentPlugin::make()
    ->withoutColors()           // keep panel's own color palette
    ->primaryColor(Color::Violet) // primary is still applied

Disabling Features via Config

Publish the config file to toggle individual Aura features on or off at the application level.

php artisan vendor:publish --tag=aura-filament-config

// config/aura-filament.php
return [
    'preset'     => 'glass',
    'font'       => false,     // keep panel's font
    'glass'      => false,     // disable backdrop-blur
    'glow'       => false,     // disable glow effects
    'animations' => false,     // disable micro-animations
];

Icon Pack Setup

Swap Filament's default Heroicons for a larger icon set using the ->icons() method. Install the corresponding Blade package first, then pass the IconSet enum.

composer require blade-ui-kit/blade-phosphor-icons

use BlueStarSystem\AuraFilament\Enums\IconSet;

AuraFilamentPlugin::make()
    ->preset('glass')
    ->icons(IconSet::Phosphor)
    ->primaryColor(Color::Blue)

All supported icon sets:

Icon Set	Package	Icons
Heroicon	(built-in)	292
Phosphor	blade-ui-kit/blade-phosphor-icons	7,488
Iconoir	mallardduck/blade-iconoir-icons	1,680
Lucide	mallardduck/blade-lucide-icons	1,500+

->icons() accepts both the IconSet::Phosphor enum value and the plain string 'phosphor'.

Multi-Panel Configuration

Each Filament panel gets its own independent Aura configuration. Register the plugin separately in each panel provider and import aura-filament.css in each panel's theme.css.

// app/Providers/Filament/AdminPanelProvider.php
AuraFilamentPlugin::make()
    ->preset(Preset::Midnight)
    ->primaryColor(Color::Violet)
    ->icons(IconSet::Phosphor)

// app/Providers/Filament/ClientPanelProvider.php
AuraFilamentPlugin::make()
    ->preset(Preset::Warm)
    ->primaryColor(Color::Amber)

Dynamic Preset Switching

Load the preset from an environment variable or from a per-tenant value at runtime. Valid preset strings are glass, corporate, warm, and midnight — passing an invalid value throws a ValueError.

// From .env
AuraFilamentPlugin::make()
    ->preset(config('aura-filament.preset', 'glass'))
    ->primaryColor(Color::Blue)

// Per-tenant (multi-tenant apps)
AuraFilamentPlugin::make()
    ->preset(tenant()->theme_preset ?? 'glass')
    ->primaryColor(Color::Blue)

Production-Ready Setup

A complete AdminPanelProvider example with all recommended options configured.

use BlueStarSystem\AuraFilament\AuraFilamentPlugin;
use BlueStarSystem\AuraFilament\Enums\Preset;
use BlueStarSystem\AuraFilament\Enums\IconSet;
use Filament\Support\Colors\Color;

public function panel(Panel $panel): Panel
{
    return $panel
        ->default()
        ->id('admin')
        ->path('admin')
        ->login()
        ->colors([
            'primary' => Color::Violet,
        ])
        ->plugin(
            AuraFilamentPlugin::make()
                ->primaryColor(Color::Violet)
                ->preset(Preset::Glass)
                ->icons(IconSet::Phosphor)
                ->font('Inter')
        )
        ->viteTheme('resources/css/filament/admin/theme.css')
        ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
        ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')
        ->discoverWidgets(in: app_path('Filament/Widgets'), for: 'App\\Filament\\Widgets');
}

First-run onboarding flow (v2.5)#

Project setup wizard (v2.5)#

Brand settings page (v2.4)#

Code snippet CMS (v2.4)#

Revenue dashboard (v2.3)#

User management panel (v2.3)#

Brand customization workflow (v2.3)#

Custom CSS Overrides#

Custom Primary Color#

Custom Font#

Disabling Default Colors#

Disabling Features via Config#

Icon Pack Setup#

Multi-Panel Configuration#

Dynamic Preset Switching#

Production-Ready Setup#