Sharp Theme

• Preview
• Installation
• Using the Sharp Theme with the Compact Theme
• Colors
• Using Material Symbols Sharp
• Features that suit the Sharp Theme
  • Use a sidebar-only layout
  • Use monospaced technical values
• Customizing the theme
  • Changing the radius
  • Removing the drawing details
• Support

The Sharp Theme gives Filament panels a precise, structured look built around square corners, strong borders and clear contrast. It is a good fit for developer tools, infrastructure products, data platforms and brands with a direct, technical style.

It replaces decorative rounding and most container shadows while keeping menus and modals clearly raised. Customization tokens let you adjust the radius, selection color and drawing details, and an optional Material Symbols preset completes the look.

View live demo

#Preview

These previews follow your light or dark color scheme. Open the matching Sharp + Compact version below each image.

Orders	Edit product
With Compact: Light · Dark	With Compact: Light · Dark
Project overview	Edit department
With Compact: Light · Dark	With Compact: Light · Dark

#Installation

After purchasing the Sharp 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/sharp-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/sharp-theme/resources/css/layers.css';
@import '../../../../vendor/filament/filament/resources/css/theme.css';
@import '../../../../vendor/filament/sharp-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('--sharp-theme-layer-order')

The result should be ok.

#Using the Sharp Theme with the Compact Theme

Install filament/compact-theme, then add its import after the Sharp Theme:

@import '../../../../vendor/filament/sharp-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/**/*';

The order of the two theme imports does not matter.

#Colors

The Sharp Theme uses the gray and primary colors already registered on your panel. Filament's defaults work without any extra configuration. For a fully neutral gray, you can use:

use Filament\Support\Colors\Color;

$panel->colors([
    'gray' => Color::Neutral,
    'primary' => Color::Blue,
])

#Using Material Symbols Sharp

The Sharp Theme uses Filament's default Heroicons unless you install the optional Material Symbols package:

composer require kienso/blade-google-material-symbols

Register the included icon map on your panel:

use Filament\SharpTheme\SharpThemeMaterialSymbols;

$panel->icons(SharpThemeMaterialSymbols::Aliases)

This changes Filament's interface icons. Icons that you set on resources, pages, actions and fields are not changed. In production, cache the icons after deploying:

php artisan icons:cache

#Features that suit the Sharp Theme

#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.

#Use monospaced technical values

Monospaced text works especially well for identifiers, hashes, reference numbers and other values that users need to scan character by character. Use Filament's monospaced font family on individual table columns:

use Filament\Support\Enums\FontFamily;
use Filament\Tables\Columns\TextColumn;

TextColumn::make('reference')
    ->fontFamily(FontFamily::Mono)

The same option is available for text entries.

#Customizing the theme

Set the radius on :root. Set the other variables on .fi-body, after the theme imports:

:root {
    --sharp-theme-radius: 2px;
}

.fi-body {
    --sharp-theme-blueprint-lines: transparent;
}

An override on .fi-body applies to both light and dark mode. To use a different value in dark mode, add a dark-mode override:

.fi-body {
    --sharp-theme-selection: var(--primary-600);
}

.dark .fi-body {
    --sharp-theme-selection: var(--primary-500);
}

The table shows the light-mode defaults. The Sharp Theme sets dark-mode values where needed.

#Changing the radius

The default radius is 0px. A small value such as 2px softens the corners without changing the overall look:

:root {
    --sharp-theme-radius: 2px;
}

Values from 0px to 4px work best.

#Removing the drawing details

You can turn off all four details without changing the layout:

.fi-body {
    --sharp-theme-table-vertical-lines: transparent;
    --sharp-theme-sidebar-group-rule: transparent;
    --sharp-theme-blueprint-lines: transparent;
    --sharp-theme-corner-mark-size: 0px;
}

Avoid using the vertical table lines with Filament's striped() option, since both are intended to separate rows and columns.

#Support

If you encounter an issue or have a suggestion for improving the Sharp Theme, please open an issue or discussion on the Sharp 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.