Stacked Theme for Filament

By the designer of Filament

Does your Filament app need a fresh look? The Stacked Theme for Filament features a modern design with a redesigned layout and matching UI components.

Choose license

Screenshots

List orders page in light mode with the Filament Stacked Theme — List orders page

List orders page in light mode with the default Filament theme — List orders page

Edit product page in light mode with the Filament Stacked Theme — Edit product page

Edit product page in light mode with the default Filament theme — Edit product page

Registration page in light mode with the Filament Stacked Theme — Registration page

Registration page in light mode with the default Filament theme — Registration page

Installation

Composer

Configure the Composer repository in your application’s composer.json file by running:

composer config repositories.whizzy composer https://whizzy.dev/composer

Now you can install the package using:

composer require whizzy/stacked-theme

Use your order email address as username and license key as password.

Stylesheet

To use the theme with Filament’s Panel Builder, create a custom theme.

In your theme.css file, replace the imported stylesheet with the package stylesheet:

@import '/vendor/filament/filament/resources/css/theme.css';
@import '/vendor/whizzy/stacked-theme/resources/css';

Compile your theme stylesheet using npm run build.

Configuration

use Filament\Panel;
use Whizzy\StackedTheme;

public function panel(Panel $panel): Panel
{
    return $panel
        ->viteTheme('resources/css/filament/admin/theme.css')
        ->plugin(StackedTheme::make())
}

Stylesheet

To use the theme outside Filament’s Panel Builder, make sure your project has a Tailwind CSS config file that extends the Filament preset, a stylesheet (e.g. resources/css/app.css), and a layout view that renders @filamentStyles.

In your app CSS file, import the theme stylesheets for the Filament packages you’re using:

@layer tailwind, filament;

@import 'tailwindcss/base' layer(tailwind);
@import 'tailwindcss/components' layer(tailwind);
@import 'tailwindcss/utilities' layer(tailwind);
@import 'tailwindcss/variants' layer(tailwind);

@import '/vendor/filament/stacked-theme/resources/css' layer(filament.theme);

Compile your updated stylesheet using npm run build.

Configuration

use Whizzy\StackedTheme;

StackedTheme::make();

Pricing

Try it once,
or go unlimited.

The Stacked theme has been carefully crafted by the designer of Filament to make your app stand out. Try the theme on a single project or go unlimited with one license for all your projects.

Alpha release

Use the theme in development and provide feedback. Components may be incomplete and dark mode is not yet available.

Single

€59

one-time payment plus local taxes

Get lifetime access and one year of updates to the Filament Stacked Theme for a single project.

All components—all Filament packages and components are covered, whether you use them in panels or standalone.
Composer package—no manual downloads and ZIP files, simply install and manage the package using Composer.
Single project—buy once and get lifetime access to the theme for a single project.
One year of updates—get any updates to this theme for free for one year.

Alpha release

Use the theme in development and provide feedback. Components may be incomplete and dark mode is not yet available.

Unlimited

€199

one-time payment plus local taxes

Purchase once and get lifetime access to the Filament Stacked Theme for as many projects as you need, including free updates.

All components—all Filament packages and components are covered, whether you use them in panels or standalone.
Composer package—no manual downloads and ZIP files, simply install and manage the package using Composer.
Unlimited projects—buy once and use the theme for as many projects as you need.
Lifetime updates—download any future updates to this theme for free, forever.