0
# Layout Components
1

2
Flexible layout components for building responsive interfaces including Grid, Flex, Stack, AppShell, and various container components. These components provide the foundation for organizing content and creating complex layouts.
3

4
## Capabilities
5

6
### Grid System
7

8
CSS Grid-based layout component with responsive design capabilities and flexible column configuration.
9

10
```typescript { .api }
11
/**
12
 * CSS Grid layout component with responsive design capabilities
13
 * @param props - Grid component props
14
 */
15
function Grid(props: GridProps): JSX.Element;
16

17
interface GridProps extends BoxProps, StylesApiProps<GridFactory> {
18
  /** Gutter between columns, key of theme.spacing or any valid CSS value */
19
  gutter?: StyleProp<MantineSpacing>;
20
  /** If set, columns in the last row expand to fill all available space */
21
  grow?: boolean;
22
  /** Sets justify-content CSS property */
23
  justify?: React.CSSProperties['justifyContent'];
24
  /** Sets align-items CSS property */
25
  align?: React.CSSProperties['alignItems'];
26
  /** Number of columns in each row */
27
  columns?: number;
28
  /** Sets overflow CSS property on the root element */
29
  overflow?: React.CSSProperties['overflow'];
30
  /** Type of queries used for responsive styles */
31
  type?: 'media' | 'container';
32
  /** Breakpoints values, only used with type="container" */
33
  breakpoints?: GridBreakpoints;
34
  children?: React.ReactNode;
35
}
36

37
/**
38
 * Grid column component
39
 * @param props - GridCol component props
40
 */
41
function GridCol(props: GridColProps): JSX.Element;
42

43
interface GridColProps extends BoxProps {
44
  /** Column span - number of columns the item should occupy */
45
  span?: number | 'auto' | { base?: number | 'auto'; xs?: number | 'auto'; sm?: number | 'auto'; md?: number | 'auto'; lg?: number | 'auto'; xl?: number | 'auto'; };
46
  /** Column offset - number of columns to offset the item by */
47
  offset?: number | { base?: number; xs?: number; sm?: number; md?: number; lg?: number; xl?: number; };
48
  /** Column order */
49
  order?: number | { base?: number; xs?: number; sm?: number; md?: number; lg?: number; xl?: number; };
50
  children?: React.ReactNode;
51
}
52

53
// Compound components
54
Grid.Col = GridCol;
55

56
type GridStylesNames = 'root' | 'col' | 'inner' | 'container';
57
type GridCssVariables = {
58
  root: '--grid-justify' | '--grid-align' | '--grid-overflow';
59
};
60
```
61

62
**Basic Usage:**
63

64
```typescript
65
import { Grid } from "@mantine/core";
66

67
// Basic grid
68
<Grid>
69
  <Grid.Col span={4}>Column 1</Grid.Col>
70
  <Grid.Col span={4}>Column 2</Grid.Col>
71
  <Grid.Col span={4}>Column 3</Grid.Col>
72
</Grid>
73

74
// Custom gutter and columns
75
<Grid gutter="xl" columns={24}>
76
  <Grid.Col span={8}>1/3 width</Grid.Col>
77
  <Grid.Col span={16}>2/3 width</Grid.Col>
78
</Grid>
79

80
// Responsive grid
81
<Grid>
82
  <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
83
    Responsive column
84
  </Grid.Col>
85
  <Grid.Col span={{ base: 12, md: 6, lg: 9 }}>
86
    Responsive column
87
  </Grid.Col>
88
</Grid>
89
```
90

91
**Advanced Usage:**
92

93
```typescript
94
// Grid with grow and alignment
95
<Grid grow gutter="md" justify="center" align="flex-end">
96
  <Grid.Col span={4}>Short content</Grid.Col>
97
  <Grid.Col span={4}>
98
    Very long content that makes the column taller
99
  </Grid.Col>
100
  <Grid.Col span={4}>Medium content</Grid.Col>
101
</Grid>
102

103
// Grid with offset and order
104
<Grid>
105
  <Grid.Col span={6} offset={3}>
106
    Centered column
107
  </Grid.Col>
108
  <Grid.Col span={4} order={{ base: 2, md: 1 }}>
109
    Second on mobile, first on desktop
110
  </Grid.Col>
111
  <Grid.Col span={4} order={{ base: 1, md: 2 }}>
112
    First on mobile, second on desktop
113
  </Grid.Col>
114
</Grid>
115

116
// Container queries
117
<Grid type="container" breakpoints={{ xs: '400px', sm: '600px', md: '800px' }}>
118
  <Grid.Col span={{ base: 12, xs: 6, md: 4 }}>
119
    Container query responsive
120
  </Grid.Col>
121
</Grid>
122
```
123

124
### Flex Component
125

126
Flexbox layout component with comprehensive flex properties and responsive design support.
127

128
```typescript { .api }
129
/**
130
 * Flexbox layout component with comprehensive flex properties
131
 * @param props - Flex component props
132
 */
133
function Flex<C = 'div'>(props: FlexProps<C>): JSX.Element;
134

135
interface FlexProps<C = 'div'> extends BoxProps<C>, StylesApiProps<FlexFactory> {
136
  /** CSS gap property */
137
  gap?: StyleProp<MantineSpacing>;
138
  /** CSS row-gap property */
139
  rowGap?: StyleProp<MantineSpacing>;
140
  /** CSS column-gap property */
141
  columnGap?: StyleProp<MantineSpacing>;
142
  /** CSS align-items property */
143
  align?: StyleProp<React.CSSProperties['alignItems']>;
144
  /** CSS justify-content property */
145
  justify?: StyleProp<React.CSSProperties['justifyContent']>;
146
  /** CSS flex-wrap property */
147
  wrap?: StyleProp<React.CSSProperties['flexWrap']>;
148
  /** CSS flex-direction property */
149
  direction?: StyleProp<React.CSSProperties['flexDirection']>;
150
  children?: React.ReactNode;
151
}
152

153
type FlexStylesNames = 'root';
154
```
155

156
**Usage Examples:**
157

158
```typescript
159
import { Flex, Box } from "@mantine/core";
160

161
// Basic flex layout
162
<Flex gap="md" justify="center" align="center" direction="row" wrap="wrap">
163
  <Box>Item 1</Box>
164
  <Box>Item 2</Box>
165
  <Box>Item 3</Box>
166
</Flex>
167

168
// Responsive flex properties
169
<Flex
170
  gap={{ base: 'sm', md: 'lg' }}
171
  direction={{ base: 'column', md: 'row' }}
172
  justify={{ base: 'center', md: 'space-between' }}
173
>
174
  <Box>Responsive item 1</Box>
175
  <Box>Responsive item 2</Box>
176
</Flex>
177

178
// Flex as different component
179
<Flex<'section'> component="section" direction="column" gap="xl">
180
  <Box>Section content</Box>
181
</Flex>
182
```
183

184
### Stack Component
185

186
Vertical stack layout component for arranging elements in a column with consistent spacing.
187

188
```typescript { .api }
189
/**
190
 * Vertical stack layout component for arranging elements in a column
191
 * @param props - Stack component props
192
 */
193
function Stack(props: StackProps): JSX.Element;
194

195
interface StackProps extends BoxProps, StylesApiProps<StackFactory> {
196
  /** Spacing between children, key of theme.spacing or any valid CSS value */
197
  gap?: StyleProp<MantineSpacing>;
198
  /** CSS justify-content property */
199
  justify?: StyleProp<React.CSSProperties['justifyContent']>;
200
  /** CSS align-items property */
201
  align?: StyleProp<React.CSSProperties['alignItems']>;
202
  children?: React.ReactNode;
203
}
204

205
type StackStylesNames = 'root';
206
type StackCssVariables = {
207
  root: '--stack-gap' | '--stack-align' | '--stack-justify';
208
};
209
```
210

211
**Usage Examples:**
212

213
```typescript
214
import { Stack, Button, Text } from "@mantine/core";
215

216
// Basic stack
217
<Stack gap="md">
218
  <Text>First item</Text>
219
  <Text>Second item</Text>
220
  <Button>Third item</Button>
221
</Stack>
222

223
// Stack with alignment
224
<Stack gap="lg" align="center" justify="space-between" h={300}>
225
  <Text>Top item</Text>
226
  <Text>Middle item</Text>
227
  <Text>Bottom item</Text>
228
</Stack>
229

230
// Responsive stack
231
<Stack gap={{ base: 'xs', md: 'md' }} align={{ base: 'stretch', md: 'center' }}>
232
  <Text>Responsive item 1</Text>
233
  <Text>Responsive item 2</Text>
234
</Stack>
235
```
236

237
### Group Component
238

239
Horizontal group layout component for arranging elements in a row with consistent spacing.
240

241
```typescript { .api }
242
/**
243
 * Horizontal group layout component for arranging elements in a row
244
 * @param props - Group component props  
245
 */
246
function Group(props: GroupProps): JSX.Element;
247

248
interface GroupProps extends BoxProps, StylesApiProps<GroupFactory> {
249
  /** Spacing between children, key of theme.spacing or any valid CSS value */
250
  gap?: StyleProp<MantineSpacing>;
251
  /** CSS justify-content property */
252
  justify?: StyleProp<React.CSSProperties['justifyContent']>;
253
  /** CSS align-items property */
254
  align?: StyleProp<React.CSSProperties['alignItems']>;
255
  /** CSS flex-wrap property */
256
  wrap?: StyleProp<React.CSSProperties['flexWrap']>;
257
  /** Determines whether children should be prevented from shrinking */
258
  preventGrowOverflow?: boolean;
259
  /** Determines whether children should have flex-grow: 1 */
260
  grow?: boolean;
261
  children?: React.ReactNode;
262
}
263

264
type GroupStylesNames = 'root';
265
type GroupCssVariables = {
266
  root: '--group-gap' | '--group-align' | '--group-justify' | '--group-wrap';
267
};
268
```
269

270
**Usage Examples:**
271

272
```typescript
273
import { Group, Button } from "@mantine/core";
274

275
// Basic horizontal group
276
<Group gap="md">
277
  <Button>Button 1</Button>
278
  <Button>Button 2</Button>
279
  <Button>Button 3</Button>
280
</Group>
281

282
// Group with alignment and wrapping
283
<Group gap="sm" justify="center" wrap="wrap">
284
  <Button>Item 1</Button>
285
  <Button>Item 2</Button>
286
  <Button>Item 3</Button>
287
  <Button>Item 4</Button>
288
</Group>
289

290
// Group with grow
291
<Group gap="md" grow>
292
  <Button>Equal width 1</Button>
293
  <Button>Equal width 2</Button>
294
</Group>
295
```
296

297
### Container Component
298

299
Centered container with max-width constraints for creating consistent content layouts.
300

301
```typescript { .api }
302
/**
303
 * Centered container with max-width constraints
304
 * @param props - Container component props
305
 */
306
function Container(props: ContainerProps): JSX.Element;
307

308
interface ContainerProps extends BoxProps, StylesApiProps<ContainerFactory> {
309
  /** Maximum width of the container, key of theme.breakpoints or any valid CSS value */
310
  size?: MantineSize | number | string;
311
  /** Determines whether the container should have fluid width */
312
  fluid?: boolean;
313
  children?: React.ReactNode;
314
}
315

316
type ContainerStylesNames = 'root';
317
type ContainerCssVariables = {
318
  root: '--container-size';
319
};
320
```
321

322
**Usage Examples:**
323

324
```typescript
325
import { Container, Text } from "@mantine/core";
326

327
// Basic container
328
<Container>
329
  <Text>Centered content with max-width</Text>
330
</Container>
331

332
// Custom size container
333
<Container size="xs">
334
  <Text>Small container</Text>
335
</Container>
336

337
// Fluid container
338
<Container fluid>
339
  <Text>Full width container</Text>
340
</Container>
341

342
// Container with custom size
343
<Container size={600}>
344
  <Text>Container with 600px max-width</Text>
345
</Container>
346
```
347

348
### SimpleGrid Component
349

350
Simple responsive grid layout with automatic column sizing based on breakpoints.
351

352
```typescript { .api }
353
/**
354
 * Simple responsive grid layout with automatic column sizing
355
 * @param props - SimpleGrid component props
356
 */
357
function SimpleGrid(props: SimpleGridProps): JSX.Element;
358

359
interface SimpleGridProps extends BoxProps, StylesApiProps<SimpleGridFactory> {
360
  /** Number of columns for different screen sizes */
361
  cols?: number | { base?: number; xs?: number; sm?: number; md?: number; lg?: number; xl?: number; };
362
  /** Spacing between grid items, key of theme.spacing or any valid CSS value */
363
  spacing?: StyleProp<MantineSpacing>;
364
  /** Minimum column width, if set, cols will be ignored */
365
  minColWidth?: number | string;
366
  children?: React.ReactNode;
367
}
368

369
type SimpleGridStylesNames = 'root';
370
```
371

372
**Usage Examples:**
373

374
```typescript
375
import { SimpleGrid, Box } from "@mantine/core";
376

377
// Basic simple grid
378
<SimpleGrid cols={3} spacing="lg">
379
  <Box>Item 1</Box>
380
  <Box>Item 2</Box>
381
  <Box>Item 3</Box>
382
  <Box>Item 4</Box>
383
  <Box>Item 5</Box>
384
  <Box>Item 6</Box>
385
</SimpleGrid>
386

387
// Responsive simple grid
388
<SimpleGrid 
389
  cols={{ base: 1, sm: 2, lg: 3 }} 
390
  spacing={{ base: 'md', md: 'xl' }}
391
>
392
  <Box>Responsive item 1</Box>
393
  <Box>Responsive item 2</Box>
394
  <Box>Responsive item 3</Box>
395
</SimpleGrid>
396

397
// Simple grid with minimum column width
398
<SimpleGrid minColWidth={250} spacing="md">
399
  <Box>Auto-sizing item 1</Box>
400
  <Box>Auto-sizing item 2</Box>
401
  <Box>Auto-sizing item 3</Box>
402
</SimpleGrid>
403
```
404

405
### Center Component
406

407
Centers content both horizontally and vertically within its container.
408

409
```typescript { .api }
410
/**
411
 * Centers content both horizontally and vertically
412
 * @param props - Center component props
413
 */
414
function Center<C = 'div'>(props: CenterProps<C>): JSX.Element;
415

416
interface CenterProps<C = 'div'> extends BoxProps<C>, StylesApiProps<CenterFactory> {
417
  /** Determines whether content should be centered inline (using CSS text-align) */
418
  inline?: boolean;
419
  children?: React.ReactNode;
420
}
421

422
type CenterStylesNames = 'root';
423
```
424

425
**Usage Examples:**
426

427
```typescript
428
import { Center, Box } from "@mantine/core";
429

430
// Basic center
431
<Center h={200}>
432
  <Box>Centered content</Box>
433
</Center>
434

435
// Inline center
436
<Center inline>
437
  <Box>Inline centered content</Box>
438
</Center>
439

440
// Center as different component
441
<Center<'section'> component="section" h="100vh">
442
  <Box>Full height centered</Box>
443
</Center>
444
```
445

446
### Space Component
447

448
Adds spacing between elements without using margin or padding.
449

450
```typescript { .api }
451
/**
452
 * Adds spacing between elements without using margin or padding
453
 * @param props - Space component props
454
 */
455
function Space(props: SpaceProps): JSX.Element;
456

457
interface SpaceProps extends BoxProps, StylesApiProps<SpaceFactory> {
458
  /** Width of horizontal space, key of theme.spacing or any valid CSS value */
459
  w?: StyleProp<MantineSpacing>;
460
  /** Height of vertical space, key of theme.spacing or any valid CSS value */
461
  h?: StyleProp<MantineSpacing>;
462
}
463
```
464

465
**Usage Examples:**
466

467
```typescript
468
import { Space, Text } from "@mantine/core";
469

470
// Horizontal spacing
471
<div>
472
  <Text component="span">Text 1</Text>
473
  <Space w="md" />
474
  <Text component="span">Text 2</Text>
475
</div>
476

477
// Vertical spacing
478
<div>
479
  <Text>Line 1</Text>
480
  <Space h="xl" />
481
  <Text>Line 2</Text>
482
</div>
483

484
// Responsive spacing
485
<div>
486
  <Text>Content</Text>
487
  <Space h={{ base: 'md', md: 'xl' }} />
488
  <Text>More content</Text>
489
</div>
490
```
491

492
### AppShell Component
493

494
Complete application shell layout with header, navbar, aside, footer, and main content areas.
495

496
```typescript { .api }
497
/**
498
 * Complete application shell layout component
499
 * @param props - AppShell component props
500
 */
501
function AppShell(props: AppShellProps): JSX.Element;
502

503
interface AppShellProps extends BoxProps, StylesApiProps<AppShellFactory> {
504
  /** Header configuration */
505
  header?: AppShellHeaderConfiguration;
506
  /** Navbar configuration */
507
  navbar?: AppShellNavbarConfiguration;
508
  /** Aside configuration */
509
  aside?: AppShellAsideConfiguration;
510
  /** Footer configuration */
511
  footer?: AppShellFooterConfiguration;
512
  /** Determines whether associated elements should have fixed position */
513
  fixed?: boolean;
514
  /** AppShell content */
515
  children?: React.ReactNode;
516
}
517

518
interface AppShellHeaderConfiguration {
519
  height: AppShellResponsiveSize;
520
  collapsed?: boolean;
521
  offset?: boolean;
522
}
523

524
interface AppShellNavbarConfiguration {
525
  width: AppShellResponsiveSize;
526
  breakpoint?: MantineBreakpoint | number;
527
  collapsed?: { mobile?: boolean; desktop?: boolean };
528
}
529

530
interface AppShellAsideConfiguration {
531
  width: AppShellResponsiveSize;
532
  breakpoint?: MantineBreakpoint | number;
533
  collapsed?: { mobile?: boolean; desktop?: boolean };
534
}
535

536
interface AppShellFooterConfiguration {
537
  height: AppShellResponsiveSize;
538
  collapsed?: boolean;
539
  offset?: boolean;
540
}
541

542
type AppShellResponsiveSize = number | string | { base?: number | string; xs?: number | string; sm?: number | string; md?: number | string; lg?: number | string; xl?: number | string; };
543

544
/**
545
 * AppShell compound components
546
 */
547
function AppShellHeader(props: AppShellHeaderProps): JSX.Element;
548
function AppShellNavbar(props: AppShellNavbarProps): JSX.Element;
549
function AppShellAside(props: AppShellAsideProps): JSX.Element;
550
function AppShellFooter(props: AppShellFooterProps): JSX.Element;
551
function AppShellMain(props: AppShellMainProps): JSX.Element;
552
function AppShellSection(props: AppShellSectionProps): JSX.Element;
553

554
// Compound components
555
AppShell.Header = AppShellHeader;
556
AppShell.Navbar = AppShellNavbar;
557
AppShell.Aside = AppShellAside;
558
AppShell.Footer = AppShellFooter;
559
AppShell.Main = AppShellMain;
560
AppShell.Section = AppShellSection;
561

562
type AppShellStylesNames = 'root' | 'navbar' | 'header' | 'main' | 'aside' | 'footer';
563
```
564

565
**Basic Usage:**
566

567
```typescript
568
import { AppShell, Burger, Group, Button } from "@mantine/core";
569
import { useState } from "react";
570

571
function Demo() {
572
  const [opened, setOpened] = useState(false);
573

574
  return (
575
    <AppShell
576
      header={{ height: 60 }}
577
      navbar={{ width: 300, breakpoint: 'sm', collapsed: { mobile: !opened } }}
578
      aside={{ width: 300, breakpoint: 'md', collapsed: { desktop: false, mobile: true } }}
579
      footer={{ height: 60 }}
580
      padding="md"
581
    >
582
      <AppShell.Header>
583
        <Group h="100%" px="md">
584
          <Burger opened={opened} onClick={() => setOpened(!opened)} hiddenFrom="sm" size="sm" />
585
          <div>Logo</div>
586
        </Group>
587
      </AppShell.Header>
588

589
      <AppShell.Navbar p="md">
590
        Navbar content
591
      </AppShell.Navbar>
592

593
      <AppShell.Main>
594
        Main content
595
      </AppShell.Main>
596

597
      <AppShell.Aside p="md">
598
        Aside content
599
      </AppShell.Aside>
600

601
      <AppShell.Footer p="md">
602
        Footer content
603
      </AppShell.Footer>
604
    </AppShell>
605
  );
606
}
607
```
608

609
**Advanced Usage:**
610

611
```typescript
612
// Responsive AppShell with sections
613
<AppShell
614
  header={{ 
615
    height: { base: 60, md: 70, lg: 80 } 
616
  }}
617
  navbar={{ 
618
    width: { base: 200, md: 250, lg: 300 },
619
    breakpoint: 'sm',
620
    collapsed: { mobile: !mobileOpened, desktop: !desktopOpened }
621
  }}
622
  aside={{
623
    width: { base: 200, md: 250 },
624
    breakpoint: 'md',
625
    collapsed: { desktop: false, mobile: true }
626
  }}
627
>
628
  <AppShell.Header>
629
    <Group justify="space-between" h="100%" px="md">
630
      <Burger />
631
      <Group>
632
        <Button>Login</Button>
633
      </Group>
634
    </Group>
635
  </AppShell.Header>
636

637
  <AppShell.Navbar>
638
    <AppShell.Section grow>
639
      <NavbarLinksGroup />
640
    </AppShell.Section>
641
    <AppShell.Section>
642
      <UserButton />
643
    </AppShell.Section>
644
  </AppShell.Navbar>
645

646
  <AppShell.Main>
647
    <Container size="xl">
648
      {children}
649
    </Container>
650
  </AppShell.Main>
651

652
  <AppShell.Aside>
653
    <Stack gap="md">
654
      <TableOfContents />
655
    </Stack>
656
  </AppShell.Aside>
657
</AppShell>
658
```