diff --git a/docs-assets/app/app/Livewire/Schemas/LayoutDemo.php b/docs-assets/app/app/Livewire/Schemas/LayoutDemo.php
index 87ac5670c1..20fe99691b 100644
--- a/docs-assets/app/app/Livewire/Schemas/LayoutDemo.php
+++ b/docs-assets/app/app/Livewire/Schemas/LayoutDemo.php
@@ -11,6 +11,7 @@ use Filament\Forms\Components\Select;
use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Toggle;
+use Filament\Infolists\Components\TextEntry;
use Filament\Schemas\Components\Actions;
use Filament\Schemas\Components\EmptyState;
use Filament\Schemas\Components\Fieldset;
@@ -90,6 +91,38 @@ class LayoutDemo extends Component implements HasActions, HasSchemas
])
->columns(3),
]),
+ Group::make()
+ ->id('dense')
+ ->extraAttributes([
+ 'class' => 'p-16 max-w-2xl',
+ ])
+ ->schema([
+ Fieldset::make('Dense')
+ ->columns(1)
+ ->dense()
+ ->schema([
+ TextEntry::make('name')
+ ->state('Dan Harrin'),
+ TextEntry::make('role')
+ ->state('Admin'),
+ ]),
+ ]),
+ Group::make()
+ ->id('noGap')
+ ->extraAttributes([
+ 'class' => 'p-16 max-w-2xl',
+ ])
+ ->schema([
+ Fieldset::make('No gap')
+ ->columns(1)
+ ->gap(false)
+ ->schema([
+ TextEntry::make('name')
+ ->state('Dan Harrin'),
+ TextEntry::make('role')
+ ->state('Admin'),
+ ]),
+ ]),
Group::make()
->id('tabs')
->extraAttributes([
diff --git a/docs-assets/screenshots/images/dark/schemas/layout/dense.jpg b/docs-assets/screenshots/images/dark/schemas/layout/dense.jpg
new file mode 100644
index 0000000000..0751078422
Binary files /dev/null and b/docs-assets/screenshots/images/dark/schemas/layout/dense.jpg differ
diff --git a/docs-assets/screenshots/images/dark/schemas/layout/no-gap.jpg b/docs-assets/screenshots/images/dark/schemas/layout/no-gap.jpg
new file mode 100644
index 0000000000..7f299c5f33
Binary files /dev/null and b/docs-assets/screenshots/images/dark/schemas/layout/no-gap.jpg differ
diff --git a/docs-assets/screenshots/images/light/schemas/layout/dense.jpg b/docs-assets/screenshots/images/light/schemas/layout/dense.jpg
new file mode 100644
index 0000000000..eb974405a1
Binary files /dev/null and b/docs-assets/screenshots/images/light/schemas/layout/dense.jpg differ
diff --git a/docs-assets/screenshots/images/light/schemas/layout/no-gap.jpg b/docs-assets/screenshots/images/light/schemas/layout/no-gap.jpg
new file mode 100644
index 0000000000..4b6b30b9c4
Binary files /dev/null and b/docs-assets/screenshots/images/light/schemas/layout/no-gap.jpg differ
diff --git a/docs-assets/screenshots/schema.js b/docs-assets/screenshots/schema.js
index f9e21e9923..694399bdda 100644
--- a/docs-assets/screenshots/schema.js
+++ b/docs-assets/screenshots/schema.js
@@ -1538,6 +1538,24 @@ export default {
deviceScaleFactor: 3,
},
},
+ 'schemas/layout/dense': {
+ url: 'schemas/layout',
+ selector: '#dense',
+ viewport: {
+ width: 1920,
+ height: 640,
+ deviceScaleFactor: 3,
+ },
+ },
+ 'schemas/layout/no-gap': {
+ url: 'schemas/layout',
+ selector: '#noGap',
+ viewport: {
+ width: 1920,
+ height: 640,
+ deviceScaleFactor: 3,
+ },
+ },
'schemas/layout/tabs/simple': {
url: 'schemas/layout',
selector: '#tabs',
diff --git a/packages/schemas/docs/02-layouts.md b/packages/schemas/docs/02-layouts.md
index 45b306f18c..82f498100c 100644
--- a/packages/schemas/docs/02-layouts.md
+++ b/packages/schemas/docs/02-layouts.md
@@ -404,6 +404,40 @@ Grid::make()
In this example, the fallback breakpoints ensure that even in browsers that don't support container queries, the layout will still respond to viewport size changes, with the name field appearing first and the email field second on larger screens.
+## Controlling spacing between components
+
+### Reducing space between components
+
+The `dense()` method creates a more compact layout by reducing the spacing between components by 50%:
+
+```php
+use Filament\Schemas\Components\Grid;
+
+Grid::make()
+ ->dense()
+ ->schema([
+ // ...
+ ])
+```
+
+
+
+### Removing space between components
+
+The `gap(false)` method removes space between components:
+
+```php
+use Filament\Schemas\Components\Grid;
+
+Grid::make()
+ ->gap(false)
+ ->schema([
+ // ...
+ ])
+```
+
+
+
## Adding extra HTML attributes to a layout component
You can pass extra HTML attributes to the component via the `extraAttributes()` method, which will be merged onto its outer HTML element. The attributes should be represented by an array, where the key is the attribute name and the value is the attribute value: