Getting Started

This package is a Filament theme that adapts Filament's admin UI to the look and feel of a Laravel Jetstream application. Treat it as a styling layer, not application logic. It was last released in April 2023 and is archived, so validate compatibility before adopting it in a new project.

1. Check compatibility first. Before installing, inspect the package's composer.json for its Filament, Laravel, PHP, and Tailwind constraints. Given the release date, expect Filament v2-era APIs and Laravel 9/10. If you are on Filament v3+, assume it will not work without a fork.

composer show webbingbrasil/filament-jetstream-theme --all

2. Install and publish.

composer require webbingbrasil/filament-jetstream-theme
php artisan vendor:publish

Run php artisan vendor:publish without a provider and look for the package's publish tags. Follow the README for the exact provider/tag. Depending on the release, this may publish CSS, config, or views.

3. Register the theme using the Filament custom-theme mechanism for your installed Filament version. In modern Filament this is done on the panel provider:

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        ->default()
        ->id('admin')
        ->path('admin')
        // Filament v3-style registration; use the v2 equivalent if applicable
        ->viteTheme('resources/css/filament/admin/theme.css');
}

If the package provides its own service provider or config flag, use that instead of registering the CSS manually.

4. Build front-end assets.

npm install
npm run build
php artisan optimize:clear

First use case: you have a Jetstream app for customers and a Filament admin panel for staff. Install this theme so the admin panel shares the Jetstream palette, typography, border radii, and general visual language, reducing the visual disconnect between the two surfaces. Start by theming the login page and dashboard, then expand to resource pages and widgets.

Implementation Patterns

Import, don't edit vendor CSS

Treat packaged CSS as a dependency. Create your own Filament theme entrypoint and import the package stylesheet, then layer your overrides after it:

/* resources/css/filament/admin/theme.css */
@import 'vendor/webbingbrasil/filament-jetstream-theme/resources/css/theme.css';

/* App-specific overrides go below */
.fi-sidebar {
    @apply bg-gray-900;
}

Verify the actual published/import path in the package source. If the package publishes assets to public/, import from there or copy into your Vite entrypoint.

Mirror your Jetstream design tokens

The most valuable day-to-day pattern is keeping the admin panel aligned with tailwind.config.js:

// tailwind.config.js
theme: {
    extend: {
        colors: {
            primary: colors.indigo,
        },
        fontFamily: {
            sans: ['Figtree', ...defaultTheme.fontFamily.sans],
        },
    },
},

Then configure Filament to use the same palette and font:

->colors([
    'primary' => \Filament\Support\Colors\Color::Indigo,
])
->font('Figtree')

Use the package theme for layout and component styling, and Filament's panel API for brand colors and logos. This survives package updates better than hard-coded CSS overrides.

Multi-panel strategy

If your app has multiple Filament panels, register the Jetstream theme only where visual consistency with the customer-facing app matters. Keep operational or internal panels on Filament's default theme if readability or density is more important than brand matching.

public function panel(Panel $panel): Panel
{
    return match ($panel->getId()) {
        'admin' => $panel->viteTheme('resources/css/filament/admin/theme.css'),
        default => $panel,
    };
}

Auth and login page alignment

A common reason to adopt this package is making Filament's login screen feel like Jetstream's. Theme the panel's login page, but do not assume component-level parity: Jetstream uses its own Blade/Livewire auth stack, while Filament renders its own login form. Align colors, spacing, logo, and background; do not expect the same markup or two-factor flows.

Deployment workflow

Because this is a CSS/theme package, asset builds are part of deployment:

composer install --no-dev --optimize-autoloader
npm ci
npm run build
php artisan optimize

If your production environment cannot run Node, commit the built assets or build them in CI. Missing built assets is the most common reason a Filament theme "doesn't apply" after deploy.

Fork when you need to maintain it

Since the package is archived, plan for a fork if you rely on it long-term. A lightweight fork that only carries the CSS and a service provider is usually easier to maintain than waiting for upstream updates. Keep your overrides in your app so the fork stays small.

Gotchas and Tips

Archived and unmaintained. There will be no fixes for new Filament, Laravel, Tailwind, or PHP releases. Audit the dependency constraints before installing, and do not expect Filament v3/v4 compatibility. Pin the version in composer.json.
Only one Filament theme at a time. Do not stack this package with another Filament theme package. Conflicting Tailwind resets and CSS variable definitions produce unpredictable results. Choose one base theme and override it in your own CSS.
Tailwind purging can silently remove package classes. If the package ships CSS that depends on classes generated by Tailwind, ensure the package's paths are included in your content globs, or use the prebuilt CSS as-is. Dynamic class names that are constructed at runtime may need to be safelisted.
Import order matters. Package CSS imported after your overrides will win. Always import the package first, then your application-specific overrides. When debugging, inspect computed styles in the browser to confirm which rule is winning.
Clear caches after publish or config changes. A stale config or compiled view cache makes theme changes appear broken:

php artisan optimize:clear
php artisan view:clear
php artisan config:clear

Then rebuild assets with npm run build.

Publishing after an update can overwrite customizations. If you edit published files directly, a future vendor:publish --force will replace them. Keep customizations in your own CSS/Blade files, or track published-file changes in version control.
Dark mode is not automatically consistent. Test both light and dark mode. Jetstream and Filament may use different dark-mode class strategies or color scales. Explicitly set dark-mode colors in your overrides.
Asset path confusion after publishing. Some theme packages publish to public/vendor/..., others expect a Vite entrypoint. Check where the CSS actually lands before wiring it into the panel provider. A 404 on the theme CSS in the browser network tab is a quick diagnostic.
Livewire and Filament version alignment. Filament v2-era packages may assume Livewire 2. If your app runs Livewire 3 or Filament v3, test login, table rendering, modals, and notifications, not just the dashboard.
Jetstream version drift. Jetstream itself has evolved. The package's "Jetstream look" may reflect an older Tailwind configuration. Compare against your current Jetstream UI and override token differences rather than assuming a perfect match.
Debugging checklist: confirm the package is auto-discovered (php artisan about or composer show), confirm CSS is loaded in the browser, check for Tailwind build errors, verify the panel provider registers the theme, and clear caches. Most "theme not applying" reports are one of these four.
Extension points to prefer: Filament panel methods (colors(), font(), brandLogo(), viteTheme()), your own theme CSS entrypoint, and published view overrides if the package exposes them. Avoid editing files under vendor/.
Security and maintenance risk is low but real. A CSS theme has a small attack surface, but an archived Composer dependency can still block framework upgrades or introduce conflicts. Review it before adding it to a long-lived project, and budget time to replace it if Filament upgrades.

Filament Jetstream Theme Laravel Package