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.

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:

useNuxtifyts\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.phpuseNuxtifyts\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