opensource/filament
3
0
Fork 0
mirror of https://github.com/filamentphp/filament.git synced 2026-09-24 15:42:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: add compact panel theming guidance

Browse Source 
Co-authored-by: Amp <amp@ampcode.com>
This commit is contained in:
Dan Harrin
2026-09-07 19:27:43 +00:00
co-authored by Amp
parent 46600114fd
commit ec36a799de
1 changed files with 18 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/08-styling/01-overview.md
+18
View File
@@ -379,3 +379,21 @@ public function panel(Panel $panel): Panel
->favicon(asset('images/favicon.png'));
}
```
## Making a panel more compact
Data-heavy panels can be easier to scan when tables and controls use less space. The [Compact theme](https://filamentphp.com/plugins/filament-compact-theme) provides a ready-made option that reduces the spacing throughout a panel while preserving Filament's default mobile spacing. It can also be combined with the [Sharp](https://filamentphp.com/plugins/filament-sharp-theme), [Soft](https://filamentphp.com/plugins/filament-soft-theme), or [Noir](https://filamentphp.com/plugins/filament-noir-theme) themes if you want to change the visual style as well as the density.
If you only need to make a few elements more compact, you can add targeted rules to your [custom theme](#creating-a-custom-theme) instead. For example, these rules reduce the vertical padding of table text cells and the padding of default-sized buttons on larger screens:
```css
.fi-ta-text:not(.fi-inline) {
@apply sm:py-2;
}
.fi-btn {
@apply sm:px-2.5 sm:py-1.5;
}
```
Using the `sm` breakpoint keeps Filament's default spacing on smaller screens, where table rows are often presented as stacked content. You can target other elements in the same way using [CSS hook classes](css-hooks).