Aura Theme

• Quick Start
• Presets
  • Glass (Default)
  • Corporate
  • Warm
  • Midnight
• Configuration
• Icon Packs
• Customization
  • Available Variables
• Config File
• Requirements
• License

4 design presets for Filament v4 — Glass, Corporate, Warm, Midnight.

One package, four complete visual identities. Dark mode, icon packs, 40+ CSS custom properties, zero blade overrides.

Included with Aura UI Pro.

#Quick Start

// In your PanelProvider
use BlueStarSystem\AuraFilament\AuraFilamentPlugin;
use BlueStarSystem\AuraFilament\Enums\Preset;

->plugin(
    AuraFilamentPlugin::make()
        ->preset(Preset::Glass)
)

/* In your panel theme.css */
@import '../../vendor/filament/filament/resources/css/theme.css';
@import '../../vendor/bluestarsystem/aura-filament/resources/css/aura-filament.css';

npm run build

That's it. Three steps.

#Presets

#Glass (Default)

Glass morphism, backdrop blur, warm off-white gradients, soft transparent cards, subtle shadows.

#Corporate

No blur, pure white backgrounds, solid borders, sharp radius, minimal shadows. Enterprise-grade.

#Warm

Cream/beige tones, warm brown sidebar, generous radius, amber-tinted shadows. Friendly and organic.

#Midnight

Strong glass, cool blue-gray, neon primary glow in dark mode, primary-tinted borders. Dramatic.

#Configuration

AuraFilamentPlugin::make()
    ->preset(Preset::Corporate)      // Glass, Corporate, Warm, Midnight
    ->primaryColor(Color::Blue)      // Any Filament color
    ->font('Poppins')                // Custom font
    ->icons(IconSet::Phosphor)       // Phosphor, Iconoir, Lucide
    ->withoutColors()                // Let the host app control colors

#Icon Packs

Swap Filament's default Heroicons with an alternative icon set:

use BlueStarSystem\AuraFilament\Enums\IconSet;

->plugin(
    AuraFilamentPlugin::make()
        ->icons(IconSet::Phosphor)
)

Install the icon pack dependency:

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

# Iconoir
composer require mallardduck/blade-iconoir-icons

# Lucide
composer require mallardduck/blade-lucide-icons

30+ Filament icon aliases are mapped: sidebar, navigation, tables, forms, actions, notifications.

#Customization

All presets use CSS custom properties. Override any variable in your theme CSS:

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

/* Custom overrides */
:root {
    --aura-radius-md: 1rem;
    --aura-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

#Available Variables

#Config File

Publish the config:

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

// config/aura-filament.php
return [
    'preset' => 'glass',       // glass, corporate, warm, midnight
    'font' => true,             // false to keep panel's existing font
    'glass' => true,            // disable backdrop-blur for performance
    'glow' => true,             // disable glow effects
    'animations' => true,       // disable micro-animations
];

#Requirements

• PHP 8.3+
• Laravel 11+
• Filament v4
• Tailwind CSS 4

#License

Aura Filament is proprietary software included with Aura UI Pro.