Universal style props
Mantine components accept a series of props that let us control various style aspects:
spacing
| Prop | CSS Property | Theme key |
|---|
| m | margin | theme.spacing |
| mt | marginTop | theme.spacing |
| mb | marginBottom | theme.spacing |
| ml | marginLeft | theme.spacing |
| mr | marginRight | theme.spacing |
| mx | marginRight, marginLeft | theme.spacing |
| my | marginTop, marginBottom | theme.spacing |
| | |
| p | padding | theme.spacing |
| pt | paddingTop | theme.spacing |
| pb | paddingBottom | theme.spacing |
| pl | paddingLeft | theme.spacing |
| pr | paddingRight | theme.spacing |
| px | paddingRight, paddingLeft | theme.spacing |
| py | paddingTop, paddingBottom | theme.spacing |
typography
| Prop | CSS Property | Theme key |
|---|
| ff | fontFamily | – |
| fz | fontSize | theme.fontSizes |
| fw | fontWeight | – |
| lts | letterSpacing | – |
| ta | textAlign | – |
| lh | lineHeight | theme.lineHeights |
| fs | fontStyle | – |
| tt | textTransform | – |
| td | textDecoration | – |
size
| Prop | CSS Property | Theme key |
|---|
| w | width | theme.spacing |
| miw | minWidth | theme.spacing |
| maw | maxWidth | theme.spacing |
| h | height | theme.spacing |
| mih | minHeight | theme.spacing |
| mah | maxHeight | theme.spacing |
position
| Prop | CSS Property | Theme key |
|---|
| pos | position | – |
| top | top | – |
| left | left | – |
| bottom | bottom | – |
| right | right | – |
| inset | inset | – |
other props
| Prop | CSS Property | Theme key |
|---|
| display | display | – |
| | |
| flex | flex | |
| | |
| bd | border | |
| bdrs | borderRadius | |
| | |
| bg | background | theme.colors |
| bgsz | backgroundSize | – |
| bgp | backgroundPosition | – |
| bgr | backgroundRepeat | – |
| bga | backgroundAttachment | – |
| | |
| c | color | theme.colors gray.5 blue |
| opacity | opacity | – |
responsiveness: provide alternative values.
Instead of a single value, we provide an object with alternative values. Most of
the time, we only provide two values.
- the base value provides the mobile-centric, default value. Its exact scope depends on which other breakpoints we define.
- The xs value activates at 576p. It excludes most smartphones. For reference, iPhones are under 450p width, with standard-size iPhones under 400p. If we want to exclude phablets as well, we use sm instead.
- The sm value activates at 768p (48em), which excludes phablets, and includes tablets and wider screens. For reference, iPads start at 768px.
<Flex
direction= {{ base: 'column',sm: 'row' }}
gap= {{ base: 'sm', sm: 'lg' }}
justify= {{ base: 'sm', sm: 'lg' }}
>