FilamentPHP DashStack Theme

Tested on Filamentphp demo app

Acknowledgements

Name based and Design inspired from DashStack Theme. Big thanks for Seju for this amazing design.

🚀 Installation & Usage (Auto Mode)

Step 1: Install the Package

Install the package using Composer:

composer require juniyasyos/dash-stack-theme-juniyasyos

Step 2: Run Install Command

This command will install required npm packages (if not already installed) and publish its assets.

php artisan filament-dash-stack-theme-juniyasyos:install

Step 3: Register Filament Plugin

Within your targeted panel provider, register DashStack Theme Plugin:

use Juniyasyos\DashStackTheme\DashStackThemePlugin;

// ...

$panel->plugin(DashStackThemePlugin::make());

🔧 Development Mode

Step 1: Publish Assets Manually

Run the following commands to publish the assets:

php artisan vendor:publish --tag=dash-stack-theme-juniyasyos-assets --force
php artisan vendor:publish --tag=dash-stack-theme-juniyasyos-dist --force

Step 2: Configure Vite Theme in Filament Panel

Modify your Filament Panel configuration and set the viteTheme path to:

->viteTheme('resources/css/filament/dash-stack-theme-juniyasyos/theme.css')

Step 3: Build the Assets

After making any modifications, run the following command to compile the assets:

npm run build

Development Notes

• Ensure that vite.config.js includes the correct input path for the theme CSS.
• After publishing assets, you may need to clear the cache using php artisan config:clear.
• If the styles are not reflecting, check if npm run dev or npm run build has been executed properly.

⚙️ Configuration

DashStack theme comes by default with a configuration for primary color and predefined dashboard settings. To customize, publish the config file:

php artisan vendor:publish --tag=filament-dash-stack-theme-juniyasyos-config

Example configuration (config/filament-dash-stack-theme-juniyasyos.php):

use Juniyasyos\DashStackTheme\Support\Colors\Color;

return [
    'default-colors' => [
        'primary' => Color::Blue,
    ],

    'side-bar-collapsable-on-desktop' => true,
    'collapsible-navigation-groups' => false,
    'breadcrumbs' => false,

    /**
     * Nunito Sans is the default font for the theme.
     */
    'use-default-font' => true,
];

Note: The default font used for Dash Stack Theme is Nunito Sans. You can disable this by setting use-default-font to false in the config file.

📌 Upcoming Features

If you have feature requests or suggestions, feel free to submit them on GitHub.

Planned Updates:

• Date / DateTime / DateRange component
• Enhanced Select component (UI improvements)

🎨 Appearance

• Login Page
• Dashboard
• Global Search
• Notifications
• User Menu
• Resource Page
• Grid Table
• Forms

Login Page

Dashboard Page

Global Search

Notification Modal

User Menu

Resource Page

Grid Table

Forms