Dash Stack Theme by Farouk Braik

• Acknowledgements
• Documentation
• Installation
  • Step 1: Install this package using composer:
  • Step 2: Run install command:
  • Step 3: Register filament plugin:
  • Step 4: Add DashStack to your vite config:
• Configuration
• Upcoming Features
  • List of upcoming changes:
• Appearance
  • Login Page
  • Dashboard Page
  • Global Search
  • Notification Modal
  • User Menu
  • Resource Page
  • Grid Table
  • Forms

Tested on Filamentphp demo app

#Acknowledgements

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

#Documentation

• Installation
• Configuration
• Upcoming Features
• Appearance

#Installation

#Step 1: Install this package using composer:

composer require nuxtifyts/dash-stack-theme

#Step 2: Run install command:

Running this command will install required npm packages (If they're not already installed), and it will publish its assets as well.

php artisan filament-dash-stack-theme:install

#Step 3: Register filament plugin:

Within your targeted panel provider, you can now use and register dash stack theme plugin:

use Nuxtifyts\DashStackTheme\DashStackThemePlugin;

// ...

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

#Step 4: Add DashStack to your vite config:

Add DashStack theme to your vite.config.js:

input: [
   // ...
   'vendor/nuxtifyts/dash-stack-theme/resources/css/theme.css',
],

For more information on using theme, check filament docs.

#Configuration

DashStack theme comes by default with a configuration for primary color used, and predefined dashboard configs for the theme, if needed to be altered, you can always publish vendor config file and change them however you see fit:

// filament-dash-stack-theme.php

use Nuxtifyts\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 behavior by publish the config file of this package, and setting use-default-font to false.

#Upcoming Features

Eventually these components will be added to the package, if you have any suggestions/feedback, if you have a feature request, please don't hesitate to do so in GitHub.

#List of upcoming changes:

• Date / DateTime / DateRange component
• Select component (Could be only UI changes for this one)

#Appearance

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

#Login Page

Login Page Light	Login Page Dark

#Dashboard Page

Dashboard Page Light	Dashboard Page Dark

#Global Search

Global Search Light	Global Search Dark

#Notification Modal

Notification Modal Light	Notification Modal Dark

#User Menu

User Menu Light	User Menu Dark

#Resource Page

Resource Page Light	Resource Page Dark

#Grid Table

Grid Table Light	Grid Table Dark

#Forms

Forms Light	Forms Dark