Unstyled components

Using Mantine as a headless UI library

You can use Mantine as a headless UI library. To do that, simply do not import @mantine/*/styles.css in your application. Then you will be able to apply styles to Mantine components using Styles API with a styling solution of your choice.

unstyled prop

Most of Mantine components support unstyled prop that removes library styles from the component and allows you to style it from scratch. Note that unstyled prop is not supported by compound components (Tabs.Tab, Menu.Dropdown, Accordion.Control, etc.) – it only works on root component (Tabs, Menu, Accordion, etc.).

Unstyled Tabs component:

import { Tabs } from '@mantine/core';

function Demo() {
  return (
    <Tabs defaultValue="chat" unstyled>
      <Tabs.List>
        <Tabs.Tab value="chat">Chat</Tabs.Tab>
        <Tabs.Tab value="gallery">Gallery</Tabs.Tab>
        <Tabs.Tab value="account">Account</Tabs.Tab>
      </Tabs.List>

      <Tabs.Panel value="chat">Chat panel</Tabs.Panel>
      <Tabs.Panel value="gallery">Gallery panel</Tabs.Panel>
      <Tabs.Panel value="account">Account panel</Tabs.Panel>
    </Tabs>
  );
}

Choosing between unstyled prop and headless components

unstyled prop is useful when you want to remove library styles from a single component, but keep styles for other components. For example, if Tabs component does not meet your design system requirements, but all other components do, you can use unstyled prop to remove styles from Tabs and style it from scratch, while keeping all other components styled with Mantine styles.

Note that unstyled prop does not remove Mantine library styles from your .css bundle – it only does not apply them to component with unstyled prop.