nehalpatel/filament-compact-theme

Reusable compact dark-first Filament v5 admin theme (Tailwind CSS, CSS hooks)

Maintainers

Package info

github.com/NehalPatel/filament-compact-theme

Language:CSS

pkg:composer/nehalpatel/filament-compact-theme

Statistics

Installs: 0

Dependents: 0

Suggesters: 0

Stars: 0

Open Issues: 0

v1.0.0 2026-04-12 17:06 UTC

This package is auto-updated.

Last update: 2026-04-12 17:07:02 UTC


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.