PHPackages vlados/filament-tailscale-theme - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Admin Panels](/categories/admin) 4. / 5. vlados/filament-tailscale-theme ActiveLibrary[Admin Panels](/categories/admin) vlados/filament-tailscale-theme =============================== A light, Tailscale-console-inspired overlay theme for the Filament v5 admin panel. v1.0.2(1mo ago)063↓70%[6 PRs](https://github.com/vlados/filament-tailscale-theme/pulls)MITCSSPHP ^8.2CI passing Since Jun 3Pushed 2w agoCompare [ Source](https://github.com/vlados/filament-tailscale-theme)[ Packagist](https://packagist.org/packages/vlados/filament-tailscale-theme)[ Docs](https://github.com/vlados/filament-tailscale-theme)[ GitHub Sponsors](https://github.com/vlados)[ RSS](/packages/vlados-filament-tailscale-theme/feed)WikiDiscussions main Synced 1w ago READMEChangelog (2)Dependencies (12)Versions (10)Used By (0) Filament Tailscale Theme ======================== [](#filament-tailscale-theme) A light, Tailscale-console-inspired overlay theme for the Filament v5 admin panel. [![Latest Version on Packagist](https://camo.githubusercontent.com/cddc1db3f9b99f54509a7c7919c9bafd77ebf221b84f02727fa4a966348ef0d2/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f766c61646f732f66696c616d656e742d7461696c7363616c652d7468656d652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/vlados/filament-tailscale-theme)[![Total Downloads](https://camo.githubusercontent.com/1fb5781b401381ba8eb3f4e7e37cb99ad52b624c913462cde9ed7af380297e74/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f766c61646f732f66696c616d656e742d7461696c7363616c652d7468656d652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/vlados/filament-tailscale-theme)[![License](https://camo.githubusercontent.com/1c44e908bb96f6c864ba8d60aa8ca87413bd2c0cf52ea62e18385ef86106f53d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f766c61646f732f66696c616d656e742d7461696c7363616c652d7468656d652e7376673f7374796c653d666c61742d737175617265)](LICENSE.md) A warm-neutral, airy light theme modeled on the Tailscale dashboard. It is an **overlay** — a plain stylesheet that loads on top of Filament's default theme and restyles the `.fi-*` components. There is no Tailwind build to set up and no theme to replace: install the package, publish the asset, register the plugin, and your panel takes on the Tailscale look. [![Preview](art/preview-sites.png)](art/preview-sites.png) Requirements ------------ [](#requirements) - PHP `^8.2` - Filament `^5.0` The full header look (the two-row contained header) assumes your panel uses `->topNavigation()`. Installation ------------ [](#installation) Install the package via Composer: ``` composer require vlados/filament-tailscale-theme ``` Then publish the theme's CSS asset: ``` php artisan filament:assets ``` Note Re-run `php artisan filament:assets` after every update to the package so the published stylesheet stays in sync. Usage ----- [](#usage) Register the plugin in your Panel provider: ``` use Vlados\FilamentTailscaleTheme\FilamentTailscaleTheme; public function panel(Panel $panel): Panel { return $panel // ... ->plugins([ FilamentTailscaleTheme::make(), ]); } ``` That's all that is required — the theme is active on the next page load. ### Configuration [](#configuration) Both options are fluent and optional: ``` use Filament\Support\Colors\Color; use Vlados\FilamentTailscaleTheme\FilamentTailscaleTheme; FilamentTailscaleTheme::make() ->primaryColor('#3b5bdb') // or ->primaryColor(Color::Indigo) ->forceLightMode(); // pass false to leave the theme toggle free ``` MethodDefaultDescription`->primaryColor($color)`Tailscale indigo `#3b5bdb`Override the accent color. Accepts a hex string (e.g. `'#3b5bdb'`) or a Filament color array (e.g. `Color::Indigo`).`->forceLightMode($force = true)``true`Force the panel's default theme mode to Light. Pass `false` to leave the user's theme toggle free.What it changes --------------- [](#what-it-changes) The theme restyles Filament's components for a calm, console-like feel: - A contained **two-row top header** on a full-width warm-gray band — brand and user actions on the first row, navigation tabs on the second with a blue active underline and rounded-top hover. (Requires `->topNavigation()`.) - A white content canvas with tightened page-header spacing. - **Minimalist, borderless tables**: uppercase muted column heads, hairline row dividers, compact ~44px rows, a subtle warm hover — no zebra striping, no card, no shadow. - **Underline-style filter tabs** instead of a segmented pill. - Hairline inputs with a 1px indigo focus ring, flattened hairline form sections, and calm section-header typography. - Solid indigo primary CTAs, white-with-hairline secondary buttons, and solid-red danger buttons. - Quiet metadata badges and soft dropdown/modal elevation. - An indigo-blue accent (`#3b5bdb`) over warm stone neutrals, tuned for Inter. Dark mode --------- [](#dark-mode) This is a **light** theme. Its styles are scoped to `html:not(.dark)`, so in dark mode the panel intentionally falls back to Filament's default dark theme. With `->forceLightMode()` left at its default, the panel opens in Light mode out of the box. Tip --- [](#tip) For the cleanest match to the Tailscale console: - Use `->topNavigation()` on your panel so the two-row header renders as designed. - On your own resources, prefer `color="gray"` for metadata badges to match the quiet look. Leave **status** badges on their semantic colors so state still reads at a glance. Customization ------------- [](#customization) The theme is a plain-CSS overlay that targets `.fi-*` selectors and a set of `--ts-*` custom properties. It lives at: ``` resources/css/index.css ``` Fork or extend it to tune spacing, neutrals, or the accent beyond what `->primaryColor()` covers — no Tailwind compilation step is involved. Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](.github/SECURITY.md) on how to report security vulnerabilities. Credits ------- [](#credits) - [Vladislav Stoitsov](https://github.com/vlados) - Design inspired by the [Tailscale](https://tailscale.com) admin console. - Scaffolded with the [filamentphp/plugin-skeleton](https://github.com/filamentphp/plugin-skeleton). - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 43 — FairBetter than 89% of packages Maintenance93 Actively maintained with recent releases Popularity12 Limited adoption so far Community6 Small or concentrated contributor base Maturity52 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 3 Last Release 51d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/20ebf35eac0da0d3775f3a64bdd9dc0e9dfa11bc9a3c3ee9db92deef9dbf8bd8?d=identicon)[vlados](/maintainers/vlados) --- Top Contributors [![vlados](https://avatars.githubusercontent.com/u/46914?v=4)](https://github.com/vlados "vlados (5 commits)") --- Tags admin-panelfilamentfilament-pluginfilament-themelaravelphptailscalelaravelfilamentfilament-pluginfilamentphpvladosfilament-tailscale-theme ### Code Quality TestsPest Static AnalysisPHPStan, Rector Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/vlados-filament-tailscale-theme/health.svg) ``` [![Health](https://phpackages.com/badges/vlados-filament-tailscale-theme/health.svg)](https://phpackages.com/packages/vlados-filament-tailscale-theme) ``` ### Alternatives [rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3914.8k](/packages/rawilk-profile-filament-plugin)[backstage/mails View logged mails and events in a beautiful Filament UI. 16121.5k](/packages/backstage-mails)[croustibat/filament-jobs-monitor Background Jobs monitoring like Horizon for all drivers for FilamentPHP 274333.4k9](/packages/croustibat-filament-jobs-monitor)[marcelweidum/filament-passkeys Use passkeys in your filamentphp app 6649.5k2](/packages/marcelweidum-filament-passkeys)[mradder/filament-logger Audit logging, activity tracking, exports, alerts, and dashboards for Filament admin panels. 2318.8k](/packages/mradder-filament-logger)[caresome/filament-neobrutalism-theme A neobrutalism theme for FilamentPHP admin panels 335.6k1](/packages/caresome-filament-neobrutalism-theme) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)