Default theme

The default theme spreads over several categories. We should use immediate values (px) instead of abstract values (xs, sm..) whenever possible, to reduce cognitive load. We may browse the default theme.

spacing

used for:

• gap in Group, Flex, Stack.
• padding style props such a p.
• margin style props such as m, notably for Divider
• width and height props such as w and h, notably for Space.

xs: 10px
sm: 12px
md: 16px
lg: 20px
xl: 32px

radius

used for:

• Paper
• Dialog, Modal, ..
• Button, Tooltip..

the default radius is sm, aka 4px.

"defaultRadius": "sm",

mantine provides a lit of sensible values

xs: 2px
sm: 4px (d)
md: 8px
lg: 16px
xl: 32px

breakpoints

determines from which point onward to activate desktop mode.

Some behaviour only makes sense in desktop, such as always-on navbar.

The sm breakpoint activates desktop mode from 768px onwards.

iPads have at least 768px width. As such, they will activate desktop mode. iPad users enjoy the desktop UI because their bigger screen make it reasonable.

  "breakpoints": {
    "xs": "36em", // 576px
    "sm": "48em", // 768px
    "md": "62em",
    "lg": "75em",
    "xl": "88em"
  },

font sizes: a set of 5 distinct values.

a set of font sizes, for body text or UI elements other than titles.

used for:

the fz inline prop.

the middle ground md is 16px.

"fontSizes": {
    "xs": 12px
    "sm": 14px
    "md": 16px,
    "lg": 18px
    "xl": 20px
  },