Styles API

All Mantine components support styling of each component part with inline styles or by passing classNames.

Styling with classNames

Let's say you want to make Slider component look something like this:

20%

50%

80%

But default slider has completely different styles:

20%

50%

80%

Type

Default

Range

Color

Size

Radius

Label always on

To apply your styles to Slider component, go to "Styles API" tab under component documentation and find styles names table. Name column will tell you how to target specific element in component:

Name	Static selector	Description
root	.mantine-slider-root	Root element
track	.mantine-slider-track	Track element, contains all other elements
bar	.mantine-slider-bar	Filled part of the track
thumb	.mantine-slider-thumb	Main control
dragging	.mantine-slider-dragging	Styles added to thumb while dragging
label	.mantine-slider-label	Label element, displayed above thumb
markWrapper	.mantine-slider-markWrapper	Wrapper around mark, contains mark and mark label
mark	.mantine-slider-mark	Mark displayed on the track
markFilled	.mantine-slider-markFilled	Styles added to mark when it is located in filled area
markLabel	.mantine-slider-markLabel	Mark label, displayed below track

For example, if you want to add styles to slider thumb:

// Add className to thumb
<Slider classNames={{ thumb: 'my-slider-thumb' }} />

// Add inline styles to thumb
<Slider styles={{ thumb: { backgroundColor: 'red' } }} />

Now you can write styles for your component with react-jss or any other any other styling tools and languages:

import { Slider, createStyles } from '@mantine/core';

const useStyles = createStyles((theme) => ({
  track: {
    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.blue[1],
  },
  mark: {
    width: 6,
    height: 6,
    borderRadius: 6,
    transform: 'translateX(-3px) translateY(-2px)',
    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.blue[1],
  },
  markFilled: {
    borderColor: theme.colors.blue[6],
  },
  markLabel: { fontSize: theme.fontSizes.xs, marginBottom: 5, marginTop: 0 },
  thumb: {
    height: 16,
    width: 16,
    backgroundColor: theme.white,
    borderWidth: 1,
    boxShadow: theme.shadows.sm,
  },
}));

function MyCustomSlider() {
  const classes = useStyles();
  return (
    <Slider
      classNames={{
        track: classes.track,
        label: classes.label,
        mark: classes.mark,
        markFilled: classes.markFilled,
        markLabel: classes.markLabel,
        markWrapper: classes.markWrapper,
        thumb: classes.thumb,
      }}
    />
  );
}

Styling with inline styles

Same as in the above example – to make this twitter button you will need to use styles API:

Follow on Twitter

Styles names for button component:

Name	Static selector	Description
root	.mantine-button-root	Root button element
icon	.mantine-button-icon	Shared icon styles
leftIcon	.mantine-button-leftIcon	Left icon
rightIcon	.mantine-button-rightIcon	Right icon
inner	.mantine-button-inner	Contains label, left and right icons
label	.mantine-button-label	Contains button children

Here extra styles are required only for root element and left icon:

Follow on Twitter

<Button
  component="a"
  target="_blank"
  rel="noopener noreferrer"
  href="https://twitter.com/mantinedev"
  leftIcon={<TwitterLogoIcon width={18} height={18} />}
  styles={{
    root: {
      backgroundColor: '#00acee',
      border: 0,
      height: 42,
      paddingLeft: 20,
      paddingRight: 20,
    },

    leftIcon: {
      marginRight: 15,
    },
  }}
>
  Follow on Twitter
</Button>

Apart from classNames and styles props each component also has static classes on each element. You can use them to apply your styles if you do not use css modules or just do not want to pass classNames prop.

More examples

Calendar component

Calendar component customization with styles API:

November 2021

import { useState } from 'react';
import { useMantineTheme } from '@mantine/core';
import { Calendar } from '@mantine/dates';

function Demo() {
  const theme = useMantineTheme();
  const [value, setValue] = useState(new Date());

  return (
    <Calendar
      value={value}
      onChange={setValue}
      month={value}
      fullWidth
      size="xl"
      styles={{
        cell: {
          border: `1px solid ${
            theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]
          }`,
        },
        day: { borderRadius: 0, height: 70, fontSize: theme.fontSizes.lg },
        weekday: { fontSize: theme.fontSizes.lg },
        weekdayCell: {
          fontSize: theme.fontSizes.xl,
          backgroundColor:
            theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[0],
          border: `1px solid ${
            theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]
          }`,
          height: 70,
        },
      }}
    />
  );
}

Tabs component

Tabs component customization with styles API:

import { createStyles, Tabs, Tab } from '@mantine/core';

const useStyles = createStyles((theme) => ({
  tabControl: {
    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[9],
    border: `1px solid ${
      theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[4]
    }`,
    fontSize: theme.fontSizes.md,
    padding: [theme.spacing.lg, theme.spacing.xl],

    '& + &': {
      borderLeft: 0,
    },

    '&:first-of-type': {
      borderTopLeftRadius: theme.radius.md,
      borderBottomLeftRadius: theme.radius.md,
    },

    '&:last-of-type': {
      borderTopRightRadius: theme.radius.md,
      borderBottomRightRadius: theme.radius.md,
    },
  },

  tabActive: {
    backgroundColor: theme.colors.blue[7],
    borderColor: theme.colors.blue[7],
    color: theme.white,
  },
}));

function StyledTabs(props: TabsProps) {
  const classes = useStyles();
  return <Tabs variant="unstyled" classNames={classes} {...props} />;
}

function Demo() {
  return (
    <StyledTabs>
      <Tab label="Settings" icon={<GearIcon width={16} height={16} />} />
      <Tab label="Messages" icon={<ChatBubbleIcon width={16} height={16} />} />
      <Tab label="Gallery" icon={<ImageIcon width={16} height={16} />} />
    </StyledTabs>
  );
}

Accordion component

Accordion component customization with styles API:

Customization

Colors, fonts, shadows and many other parts are customizable to fit your design needs

Flexibility

Configure components appearance and behavior with vast amount of settings or overwrite any part of component styles

No annoying focus ring

With new :focus-visible pseudo-class focus ring appears only when user navigates with keyboard

import { Accordion, AccordionItem, AccordionProps, createStyles } from '@mantine/core';

const useStyles = createStyles((theme) => ({
  control: {
    fontSize: theme.fontSizes.lg,
  },

  item: {
    border: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]}`,

    '&:first-of-type': {
      borderTopRightRadius: theme.radius.sm,
      borderTopLeftRadius: theme.radius.sm,
    },

    '&:last-of-type': {
      borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4],
      borderBottomRightRadius: theme.radius.sm,
      borderBottomLeftRadius: theme.radius.sm,
    },

    '& + &': {
      borderTop: 'none',
    },
  },

  itemOpened: {
    '& $control': {
      backgroundColor: theme.colors.blue[theme.colorScheme === 'dark' ? 9 : 0],
      color: theme.colorScheme === 'dark' ? theme.white : theme.colors.blue[9],
    },
  },

  contentInner: {
    paddingTop: theme.spacing.md,
  },
}));

function StyledAccordion(props: AccordionProps) {
  const classes = useStyles();
  return <Accordion classNames={classes} {...props} />;
}

function Demo() {
  return (
    <StyledAccordion>
      <AccordionItem label="Customization">
        Colors, fonts, shadows and many other parts are customizable to fit your design needs
      </AccordionItem>

      <AccordionItem label="Flexibility">
        Configure components appearance and behavior with vast amount of settings or overwrite any
        part of component styles
      </AccordionItem>

      <AccordionItem label="No annoying focus ring">
        With new :focus-visible pseudo-class focus ring appears only when user navigates with
        keyboard
      </AccordionItem>
    </StyledAccordion>
  );
}