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

Show label on hover

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 createStyles function or 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
outline	.mantine-button-outline	Outline variant root element modifier
filled	.mantine-button-filled	Filled variant root element modifier
light	.mantine-button-light	Light variant root element modifier
default	.mantine-button-default	Default variant root element modifier
subtle	.mantine-button-subtle	Default variant root element modifier
gradient	.mantine-button-gradient	Gradient variant root element modifier
white	.mantine-button-white	White variant root element modifier
loading	.mantine-button-loading	Loading root element modifier
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={(theme) => ({
    root: {
      backgroundColor: '#00acee',
      border: 0,
      height: 42,
      paddingLeft: 20,
      paddingRight: 20,

      '&:hover': {
        backgroundColor: theme.fn.darken('#00acee', 0.05),
      },
    },

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

Styles API with MantineProvider

You can also use Styles API in MantineProvider with styles prop. All styles defined there will be added to each component rendered inside provider.

Dot badge

import { MantineProvider, Button, Badge } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider
      styles={{
        Button: (theme) => ({
          // Shared button styles are applied to all buttons
          root: { height: 42, padding: '0 30px' },

          // These styles are applied only to buttons with outline variant
          outline: {
            // You can use any selectors inside (the same way as in createStyles function)
            '&:hover': {
              backgroundColor:
                theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
            },
          },
        }),

        // Use raw styles object if you do not need theme dependency
        Badge: {
          dot: {
            borderWidth: 2,
          },
        },
      }}
    >
      <Button variant="outline">Outline button</Button>
      <Button variant="filled">Filled button</Button>
      <Badge variant="dot">Dot badge</Badge>
    </MantineProvider>
  );
}

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

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

  return (
    <Calendar
      value={value}
      onChange={setValue}
      month={value}
      fullWidth
      size="xl"
      styles={(theme) => ({
        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 { TabsProps, Tabs, Tab } from '@mantine/core';
import { ImageIcon, ChatBubbleIcon, GearIcon } from '@modulz/radix-icons';

function StyledTabs(props: TabsProps) {
  return (
    <Tabs
      variant="unstyled"
      styles={(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}px ${theme.spacing.xl}px`,

          '&:not(:first-of-type)': {
            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,
        },
      })}
      {...props}
    />
  );
}

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

Accordion component

Accordion component customization with styles API:

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

import { Accordion, AccordionProps, createStyles } from '@mantine/core';
import { PlusIcon } from '@modulz/radix-icons';

const useStyles = createStyles((theme, _params, getRef) => {
  const controlRef = getRef('control');
  const iconRef = getRef('icon');

  return {
    icon: { ref: iconRef },

    control: {
      ref: controlRef,
      border: 0,
      opacity: 0.6,
      color: theme.colorScheme === 'dark' ? theme.white : theme.black,

      '&:hover': {
        backgroundColor: 'transparent',
        opacity: 1,
      },
    },

    item: {
      borderBottom: 0,
      overflow: 'hidden',
      transition: `box-shadow 150ms ${theme.transitionTimingFunction}`,
      border: '1px solid transparent',
      borderRadius: theme.radius.sm,
    },

    itemOpened: {
      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white,
      borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[3],

      [`& .${controlRef}`]: {
        opacity: 1,
      },

      [`& .${iconRef}`]: {
        transform: 'rotate(45deg)',
      },
    },

    content: {
      paddingLeft: 0,
    },
  };
});

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

function Demo() {
  return (
    <StyledAccordion initialItem={0}>
      {/* <Accordion.Item /> components */}
    </StyledAccordion>
  );
}