• Overview
• Requirements
• Installation
  • Step 1: Configure the private repository
  • Step 2: Require via Composer
  • Step 3: Register the plugin
  • Step 4: Import the stylesheet
  • Step 5: Build assets
• Presets
  • Glass (default)
  • Corporate
  • Warm
  • Midnight
  • Switching presets
• Primary Color
• Font
• Disabling Default Colors
• Icon Packs
  • Available icon sets
  • Setup
• CSS Customization
  • Variable reference
  • Example: custom overrides
• Configuration File
• Licensing
• Full Example

Overview#

Aura Filament is a premium theme plugin for Filament (v4 and v5) that transforms your admin panel's appearance without touching a single Blade file.

It provides:

• 4 design presets -- Glass, Corporate, Warm, and Midnight
• 40+ CSS custom properties for deep customization
• Optional icon packs -- swap Heroicons for Phosphor, Iconoir, or Lucide
• Full dark mode support across all presets
• Color-agnostic -- works with any Filament primary color
• Zero Blade overrides -- pure CSS + PHP plugin API

Aura Filament is included with every Aura UI Pro license (Single, Unlimited, and Team plans).

Requirements#

Installation#

Step 1: Configure the private repository#

Add the Aura packages repository to your project's composer.json:

{
    "repositories": [
        {
            "type": "composer",
            "url": "https://packages.elju.it"
        }
    ]
}

When prompted, enter your license key as the username and leave the password empty. Your license key is available in your Aura UI dashboard.

Step 2: Require via Composer#

composer require bluestarsystem/aura-filament

Step 3: Register the plugin#

In your Filament panel provider (e.g. AdminPanelProvider.php):

use BlueStarSystem\AuraFilament\AuraFilamentPlugin;
use Filament\Support\Colors\Color;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->plugin(
            AuraFilamentPlugin::make()
                ->primaryColor(Color::Blue)
        );
}

Step 4: Import the stylesheet#

In your panel's Tailwind CSS theme file (e.g. resources/css/filament/admin/theme.css):

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

Step 5: Build assets#

npm run build

Your admin panel now uses the Glass preset by default.

Presets#

Aura Filament ships with 4 design presets. Each preset controls backgrounds, surfaces, shadows, borders, radius, blur effects, and more through CSS custom properties.

Glass (default)#

The signature Aura look. Frosted glass surfaces with backdrop blur, warm off-white backgrounds, and soft shadows.

• Backdrop blur: 6px / 12px
• Background: warm off-white gradient
• Cards: semi-transparent white (rgba(255,255,255,0.85))
• Shadows: soft and diffuse
• Radius: 0.75rem
• Dark mode: deep navy with transparency

Corporate#

Clean and professional. No glass effects, solid surfaces, and sharp corners. Ideal for enterprise applications.

• No blur effects
• Background: pure white
• Cards: solid white with gray borders
• Shadows: minimal
• Radius: 0.375rem -- 0.5rem
• Sidebar: solid dark (#111827)
• Badge glow: disabled

Warm#

Cozy and inviting. Cream tones, warm shadows, and generous border radius. Great for customer-facing admin panels.

• No blur effects
• Background: cream (#fefcf9)
• Cards: warm white with earthy borders
• Shadows: warm-tinted
• Radius: 0.625rem -- 1.25rem
• Dark mode: deep brown tones

Midnight#

Bold and modern. Strong glass effects with neon accents in dark mode. Perfect for developer tools and tech dashboards.

• Strong backdrop blur: 10px / 16px
• Background: cool blue-gray (light) / near-black (dark)
• Cards: transparent with primary-tinted borders
• Shadows: with primary color glow in dark mode
• Focus rings: double ring with glow effect
• Badge glow: strong (0.3 opacity in dark)

Switching presets#

Pass the preset name to the plugin:

use BlueStarSystem\AuraFilament\AuraFilamentPlugin;
use BlueStarSystem\AuraFilament\Enums\Preset;

AuraFilamentPlugin::make()
    ->primaryColor(Color::Blue)
    ->preset(Preset::Corporate)

You can also use a string:

->preset('midnight')

Available values: glass, corporate, warm, midnight.

Tip: All 4 presets are compiled into the same CSS file. Switching presets only requires changing the PHP configuration and does not need a CSS rebuild.

Primary Color#

Aura Filament is color-agnostic. The preset system uses Filament's built-in color tokens (--c-50 through --c-950), so your chosen primary color works seamlessly with any preset.

use Filament\Support\Colors\Color;

AuraFilamentPlugin::make()
    ->primaryColor(Color::Violet)  // or any Filament color
    ->preset('glass')

You can use any color from Filament\Support\Colors\Color or define a custom color array.

Font#

By default, Aura Filament applies the Inter font. You can change it or disable it entirely:

AuraFilamentPlugin::make()
    ->font('Poppins')  // use a different Google Font

To keep your panel's existing font (skip Aura's font override):

AuraFilamentPlugin::make()
    ->font(null)

Disabling Default Colors#

By default, Aura Filament sets its own Gray, Info, Success, Warning, and Danger color palettes. To disable this and use your panel's own colors:

AuraFilamentPlugin::make()
    ->withoutColors()
    ->primaryColor(Color::Violet)

This only affects the semantic color palette — the primary color is always applied when set via ->primaryColor().

Icon Packs#

By default, Filament uses Heroicons. Aura Filament lets you swap the entire icon set with a single method call.

Available icon sets#

Setup#

1. Install the icon package:

composer require blade-ui-kit/blade-phosphor-icons
# or
composer require blade-ui-kit/blade-iconoir-icons
# or
composer require mallardduck/blade-lucide-icons

2. Enable the icon set in your plugin:

use BlueStarSystem\AuraFilament\Enums\IconSet;

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

The icon mapper replaces ~27 Filament interface icons (sidebar, navigation, actions, forms, tables) with their equivalents from your chosen icon set.

CSS Customization#

All presets are built on CSS custom properties. You can override any variable in your theme CSS file to fine-tune the appearance.

Variable reference#

Example: custom overrides#

/* In your theme.css, after the aura-filament import */
:root {
    --aura-radius-sm: 0.25rem;
    --aura-radius-md: 0.5rem;
    --aura-radius-lg: 1rem;
    --aura-blur: 8px;
}

Configuration File#

Publish the configuration file:

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

This creates config/aura-filament.php:

return [
    'preset' => 'glass',       // glass, corporate, warm, midnight
    'font' => true,             // true = Inter, false = keep panel font
    'glass' => true,            // enable backdrop-blur effects
    'glow' => true,             // enable glow effects on badges/focus
    'animations' => true,       // enable micro-animations
];

The plugin's fluent API (->preset(), ->font()) takes precedence over config file values.

Licensing#

Aura Filament is included with every Aura UI Pro license:

Purchase a license at aura-ui.com/pricing.

After purchasing, you'll receive a license key that grants access to the private Composer repository at packages.elju.it. The same license key works for both Aura UI Pro and Aura Filament.

Full Example#

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
        ->id('admin')
        ->path('admin')
        ->plugin(
            AuraFilamentPlugin::make()
                ->primaryColor(Color::Violet)
                ->preset(Preset::Midnight)
                ->icons(IconSet::Phosphor)
        )
        ->viteTheme('resources/css/filament/admin/theme.css')
        // ... rest of your panel configuration
    ;
}