Awrel Theme

Premium dashboard theme plugin for Filament v5 — high-end micro-interactions, skeleton loaders, glassmorphism, sticky table actions, and more. Breaks away from the mainstream Tailwind UI look with custom modern layouts and visual enhancements.

Features

• Skeleton Loaders — Automatic table & stats overview skeleton placeholders using deferLoading().
• Sticky Table Actions — Pin the actions column on horizontal table scroll (opt-in).
• Loading Bar — Livewire request progress bar at the top of the viewport.
• Animated Favicon Spinner — Replaces the favicon with an animated spinner during navigation (opt-in).
• Disabled Button Shake — Tactile shake animation when clicking disabled buttons.
• Glassmorphism Topbar — Modern frosted-glass effect on the top navigation bar.
• Animated Notification Bell — Custom CSS keyframe ring animation on hover/new notifications.
• Full-width Layout — Maximizes content area by removing max-width constraints.
• Dynamic Color Picker — Change the primary color from the settings page.
• Custom Font & Border Radius — Choose from multiple font families and border radius values.
• Sidebar Width Control — Adjust sidebar width from the settings page.
• Collapsible Sidebar — Desktop sidebar collapse/expand with smooth animation.
• Dark/Light Mode — Full dark mode support.

Requirements

• PHP 8.2+
• Laravel 11.x, 12.x, or 13.x
• Filament 5.x
• Livewire 4.x
• Tailwind CSS v4

Installation

1. Require the package via Composer

composer require khoirulaksara/awrel

2. Run the install command (auto-wires everything)

php artisan awrel:install

This single command will:

• Publish config, views, JS, and public assets
• Run the database migration and seed default settings
• Install the Awrel theme CSS (backs up your original Filament theme.css first)
• Auto-register the service provider in bootstrap/providers.php
• Auto-configure the plugin in app/Providers/Filament/AdminPanelProvider.php

3. Build assets

npm run build

# Or for development:
# php artisan filament:assets
# npm run dev

4. Login and configure

Navigate to Settings → Awrel Theme Settings in your Filament admin panel to customize colors, fonts, border radius, and layout options.

Note: The install command will not overwrite existing configuration if it detects that settings are already in place. Re-run with --force to re-publish assets.

Configuration

Env Variables

Plugin Options

AwrelPlugin::make()
    ->faviconSpinner()              // Enable animated favicon spinner
    ->stickyTableActions()          // Enable sticky table actions column

Both options can also be toggled from the Theme Settings page in the admin panel.

Features Detail

Skeleton Loaders

Automatic skeleton placeholders for:

• Tables — Replaces Filament's default spinner with a realistic table skeleton (header row + 8 body rows with pulsing content bars). Works on any table with deferLoading() enabled.
• Stats Overview — Shows animated stat cards matching the real widget layout while data loads.

No configuration needed — works automatically with deferLoading().

Sticky Table Actions

When enabled, the actions column pins to the right edge when tables overflow horizontally. Includes custom scrollbar styling and drag-to-scroll support.

Enable on the plugin:

AwrelPlugin::make()->stickyTableActions();

Loading Bar

A lightweight progress bar at the top of the viewport that activates on Livewire SPA navigation. Always-on, no configuration needed.

Animated Favicon Spinner

Replaces the browser tab favicon with an animated SVG spinner during Livewire navigation requests, then restores the original favicon when the request finishes. Uses your panel's primary color.

Enable on the plugin:

AwrelPlugin::make()->faviconSpinner();

Disabled Button Shake

A snappy side-to-side shake micro-interaction when clicking disabled buttons. Always-on, CSS and JS included by default.

Glassmorphism Topbar

Modern frosted-glass effect (backdrop-filter: blur()) on the top navigation bar with semi-transparent background that adapts to light/dark mode.

Customization

Theme Settings Page

Navigate to Settings → Awrel Theme Settings in your Filament admin panel to customize:

• Primary Color — Pick any color with the color picker or presets
• Font Family — Choose from Plus Jakarta Sans, Inter, Instrument Sans, or system-ui
• Border Radius — sm, md, lg, xl, or 2xl
• Sidebar Width — Adjustable from 180px to 400px
• Favicon Spinner — Toggle on/off
• Sticky Table Actions — Toggle on/off

CSS Custom Properties

The theme exposes CSS custom properties that you can override:

:root {
    --awrel-font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    --awrel-border-radius: 2xl;
    --awrel-sidebar-width: 256px;
}

Publishing Assets

# Publish all assets
php artisan vendor:publish --tag=awrel-config
php artisan vendor:publish --tag=awrel-views
php artisan vendor:publish --tag=awrel-js
php artisan vendor:publish --tag=awrel-public

# Or publish specific tags
php artisan vendor:publish --tag=awrel-config

License

MIT