https://github.com/Fa-BRAIK/dash-stack-theme
DashStack theme for FilamentPHP
https://github.com/Fa-BRAIK/dash-stack-theme
filamentphp filamentphp-plugin filamentphp-theme
Last synced: 6 months ago
JSON representation
DashStack theme for FilamentPHP
- Host: GitHub
- URL: https://github.com/Fa-BRAIK/dash-stack-theme
- Owner: nuxtifyts
- License: mit
- Created: 2025-02-09T23:25:29.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-10T00:15:50.000Z (about 1 year ago)
- Last Synced: 2025-02-10T00:23:13.788Z (about 1 year ago)
- Topics: filamentphp, filamentphp-plugin, filamentphp-theme
- Language: CSS
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
FilamentPHP DashStack Theme
=
[](https://github.com/Fa-BRAIK/dash-stack-theme/actions/workflows/phpstan.yml)
[](https://github.com/Fa-BRAIK/dash-stack-theme/actions/workflows/pint.yml)
[](https://github.com/Fa-BRAIK/dash-stack-theme/actions/workflows/pr-tests.yml)
> Tested on [Filamentphp demo app](https://github.com/filamentphp/demo)
Acknowledgements
-
> Name based and Design inspired from [DashStack Theme](https://www.figma.com/community/file/1324762163080748317/dashstack-free-admin-dashboard-ui-kit-admin-dashboard-ui-kit-admin-dashboard). Big thanks for [Seju](https://www.figma.com/@sejal_ui_ux) for this amazing design.
Documentation
-
- [Installation](#installation)
- [Configuration](#configuration)
- [Upcoming Features](#upcoming-features)
- [Appearance](#appearance)
Installation
-
#### Step 1: Install this package using composer:
```bash
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.
```bash
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:
```php
use Nuxtifyts\DashStackTheme\DashStackThemePlugin;
// ...
$panel->plugin(DashStackThemePlugin::make());
```
#### Step 4: Add DashStack to your vite config:
Add DashStack theme to your `vite.config.js`:
```javascript
input: [
// ...
'vendor/nuxtifyts/dash-stack-theme/resources/css/theme.css',
],
```
> For more information on using theme, check [filament docs](https://filamentphp.com/docs/4.x/styling/overview#creating-a-custom-theme).
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:
```php
// 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](https://github.com/Fa-BRAIK/dash-stack-theme).
#### List of upcoming changes:
- Date / DateTime / DateRange component
- Select component (Could be only UI changes for this one)
Appearance
-
- [Login Page](#login-page)
- [Dashboard](#dashboard-page)
- [Global Search](#global-search)
- [Notifications](#notification-modal)
- [User menu](#user-menu)
- [Resource Page](#resource-page)
- [Grid Table](#grid-table)
- [Forms](#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
