Default theme

The default theme covers multiple design areas and categories.

It defines some style primitives directly. It also defines some aliases (such as sm), and what value they resolve to.

See also docs for v7 and v9.

spacing values

Spacing determines space between elements and space inside elements. It is used for:

• gap, for Group, Flex, and Stack.
• padding.
• margin, such as for Divider
• width and height props such as w and h, such as for Space.

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

radius values

The border radius is used for Paper, Dialog and Modal, Button and Tooltip.

"defaultRadius": "md" // changed in v9 from "sm" to "md"

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

breakpoints

A set of thresholds, to activate style conditionally:

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

The sm breakpoint targets tablets and wider devices.

We use those thresholds in styles props to provide alternative values.

font sizes

Those font sizes can be used in the fz style prop:

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

headings have a different set of values.

weights

Note: medium was changed from 500 to 600 in Mantine v9.

"fontWeights": {
    "regular": '400',
    "medium": '600',
    "bold": '700',
  }

line heights

The aliases can be used in the lh style prop:

  "lineHeights": {
    xs: 1.4,
    sm: 1.45,
    md: 1.55, // (d)
    lg: 1.6,
    xl: 1.65
  },

The default line height is 1.55:

--mantine-line-height: 1.55;

headings

headings: {
    fontFamily: DEFAULT_FONT_FAMILY,
    fontWeight: '700',
    textWrap: 'wrap',
    sizes: {
      h1: { fontSize: rem(34), lineHeight: '1.3' }, // 34px
      h2: { fontSize: rem(26), lineHeight: '1.35' },
      h3: { fontSize: rem(22), lineHeight: '1.4' },
      h4: { fontSize: rem(18), lineHeight: '1.45' },
      h5: { fontSize: rem(16), lineHeight: '1.5' },
      h6: { fontSize: rem(14), lineHeight: '1.5' },
    },
  },