Compact Theme

• Preview
• Installation
• Using another theme with the Compact Theme
• Configuration
  • Show more table rows
  • Use compact table repeaters
  • Use inline labels
  • Hide secondary table columns
  • Use the full page width
  • Use a sidebar-only layout
  • Collapse the sidebar
• Customizing the theme
• Support

The Compact Theme makes data-heavy Filament panels easier to scan by fitting more useful information onto each screen. It is a good fit for operational dashboards, back-office tools and apps where people spend much of their day working with tables and forms.

It tightens rows, controls, cards and modals without changing your colors, fonts or icons. Mobile keeps Filament's default spacing, while a small set of customization tokens lets you tune the density and corner radii for your app.

View live demo

#Preview

These previews follow your light or dark color scheme. Open either version at full size below each image.

Orders	Edit product
Light · Dark	Light · Dark
Project overview	Edit department
Light · Dark	Light · Dark

#Installation

After purchasing the Compact Theme, install it through Filament's Composer repository:

composer config repositories.filament composer https://packages.filamentphp.com/composer
composer config --auth http-basic.packages.filamentphp.com "YOUR_EMAIL_ADDRESS" "YOUR_LICENSE_KEY"
composer require filament/compact-theme

You can find your license key in your Filament Packages account.

Add the following imports to your panel's theme file, such as resources/css/filament/admin/theme.css:

@import '../../../../vendor/filament/compact-theme/resources/css/layers.css';
@import '../../../../vendor/filament/filament/resources/css/theme.css';
@import '../../../../vendor/filament/compact-theme/resources/css/theme.css';

@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';

Then rebuild your assets:

npm run build

The layers.css import must come before Filament's CSS. If the theme does not look right, run this in your browser console:

getComputedStyle(document.body).getPropertyValue('--compact-theme-layer-order')

The result should be ok.

#Using another theme with the Compact Theme

The Compact Theme can be used with the Sharp Theme, Soft Theme or Noir Theme. Add the other theme's import between Filament's CSS and the Compact Theme:

@import '../../../../vendor/filament/compact-theme/resources/css/layers.css';
@import '../../../../vendor/filament/filament/resources/css/theme.css';
@import '../../../../vendor/filament/sharp-theme/resources/css/theme.css';
@import '../../../../vendor/filament/compact-theme/resources/css/theme.css';

@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';

Replace sharp-theme with soft-theme or noir-theme as needed. The order of the two theme imports does not matter.

#Configuration

The Compact Theme does not require any panel configuration. These Filament options can help you make better use of the available space.

#Show more table rows

Since more rows fit on the screen, you may want to increase the default page size:

use Filament\Tables\Table;

Table::configureUsing(fn (Table $table) => $table->defaultPaginationPageOption(25));

#Use compact table repeaters

Filament can make repeaters with a table layout even more compact:

use Filament\Forms\Components\Repeater;

Repeater::make('members')
    ->table([
        // ...
    ])
    ->compact()
    ->schema([
        // ...
    ])

#Use inline labels

Inline labels reduce the vertical space used by forms. You can enable them on a field, layout component or the whole form schema:

use Filament\Forms\Components\TextInput;

TextInput::make('name')
    ->inlineLabel()

#Hide secondary table columns

Keep less important columns available by making them toggleable and hidden by default:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('updated_at')
    ->toggleable(isToggledHiddenByDefault: true)

#Use the full page width

Wide tables can use more of the available screen by removing the panel's maximum content width:

use Filament\Support\Enums\Width;

$panel->maxContentWidth(Width::Full)

#Use a sidebar-only layout

You can hide the topbar to give page content more vertical space:

$panel->topbar(false)

Filament places global search, the user menu and database notifications in the sidebar by default when the topbar is hidden.

#Collapse the sidebar

You can make the sidebar narrower and allow it to collapse to its icons:

$panel
    ->sidebarWidth('16rem')
    ->sidebarCollapsibleOnDesktop()

To let users hide it completely instead, use sidebarFullyCollapsibleOnDesktop(). Choose one collapse mode:

$panel->sidebarFullyCollapsibleOnDesktop()

#Customizing the theme

Override these variables in your panel's theme file after the imports:

.fi-body {
    --compact-theme-cell-py: 0.625rem;
    --compact-theme-topbar-h: 3rem;
}

Compact uses the same token values in light and dark mode. An override on .fi-body applies to both.

To restore Filament's default page heading size:

.fi-header-heading {
    font-size: var(--text-3xl);
}

#Support

If you encounter an issue or have a suggestion for improving the Compact Theme, please open an issue or discussion on the Compact Theme GitHub repository. You can get an invite by adding your GitHub username to your customer dashboard at packages.filamentphp.com. For account, purchase or license-related questions, email support@filamentphp.com.