Layout

Built-in tags for arranging content on the page — the Mantine layout primitives, each exposed as a single tag with no setup. Reach for these to put things in a row or a column, center them, cap a content width, or build a responsive grid.

Tag	What it does
Group	A flex row with consistent gaps.
Stack	A flex column with consistent gaps.
Flex	A flexbox container with the full CSS flex surface.
Center	Centers content horizontally and vertically.
Container	Caps content width with a comfortable gutter.
Grid	A flexible 12-column grid with spanning cells.
SimpleGrid	A responsive grid of equal-width columns.
AspectRatio	Keeps content at a fixed width-to-height ratio.
Space	An empty spacer between elements.
AppShell	A page-level shell (header / navbar / aside / footer).
Splitter	Two panels side by side with a divider.

Each page’s Attributes table is the complete list of what that tag accepts — the layout options it adds, plus the shared spacing, sizing, and color props. The list is enforced: an attribute a tag doesn’t declare fails the build rather than being quietly ignored, so a typo surfaces while you’re writing instead of shipping as a style that never applied.

Surfaces & utilities

The base primitive, card-like surfaces, scroll containers, and a few low-level helpers:

Tag	What it does
Box	The base primitive every component is built on — padding, margin, background, color, sizing, or a raw style on any block.
Paper	A card-like surface with a shadow, rounded corners, padding, and an optional border.
ScrollArea	A scrollable region with styled, auto-hiding overlay scrollbars.
Scroller	A minimal native-scroll container (the browser’s own scrollbars).
Scroll Buttons	A horizontal scroller with prev/next chevron buttons for paging a wide row of content.
Collapse	Animate content open and closed by height.
Marquee	A continuously scrolling ticker for logos, announcements, or a tagline.
Portal	Render content into a different part of the DOM to escape overflow and stacking contexts.