nehalpatel / filament-compact-theme
Reusable compact dark-first Filament v5 admin theme (Tailwind CSS, CSS hooks)
Package info
github.com/NehalPatel/filament-compact-theme
Language:CSS
pkg:composer/nehalpatel/filament-compact-theme
Requires
- php: ^8.2
- filament/filament: ^5.0
README
Reusable Filament v5 admin theme: compact, dark-first, flat surfaces, blue accent. Built with the official custom-theme flow (Tailwind CSS + fi-* hooks).
Requirements
- PHP 8.2+
- Laravel 12+
- Filament 5.x
- Vite +
@tailwindcss/vite(Tailwind v4), as used by Filament’s theme scaffold
Install in a Laravel app
1. Require the package
From Packagist (after publishing) or VCS:
{
"repositories": [
{
"type": "vcs",
"url": "https://github.com/NehalPatel/filament-compact-theme.git"
}
],
"require": {
"nehalpatel/filament-compact-theme": "^1.0"
}
}
Local development (path repository) — set url to the folder that contains this package’s composer.json (the root of a clone of this repository):
{
"repositories": [
{
"type": "path",
"url": "../path/to/filament-compact-theme",
"options": { "symlink": true }
}
],
"require": {
"nehalpatel/filament-compact-theme": "@dev"
}
}
Then:
composer update nehalpatel/filament-compact-theme
2. Register Vite entry
In vite.config.js, add the package stylesheet to Laravel Vite input:
import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ // If you use a Composer path repository (symlink to `packages/...`), keep manifest keys under `vendor/...`: resolve: { preserveSymlinks: true }, plugins: [ laravel({ input: [ 'resources/css/app.css', 'resources/js/app.js', 'vendor/nehalpatel/filament-compact-theme/resources/css/theme.css', ], refresh: true, }), tailwindcss(), ], });
Or keep the string in sync with FilamentCompactTheme::viteEntry() from PHP.
3. Point your Filament panel at the theme
In your panel provider (e.g. AdminPanelProvider):
use NehalPatel\FilamentCompactTheme\FilamentCompactTheme; $panel ->viteTheme(FilamentCompactTheme::viteEntry());
4. Panel styling (colors, font, density toggles)
This package only ships CSS. Set ->colors(), ->font(), ->defaultThemeMode(), ->sidebarWidth(), ->globalSearch(), etc. in your own panel provider as needed.
5. Build assets
npm run build
Optional publish
To copy the raw CSS into your app (e.g. to fork it):
php artisan vendor:publish --tag=filament-compact-theme
This writes to resources/css/filament/admin/theme.publish.css. Switch your Vite input and viteTheme() to that file if you use it.
License
MIT.