CSS files list

This page contains a list of CSS files that you can import from @mantine/core package as a replacement for @mantine/core/styles.css.

Components dependencies

Some components require additional styles to work properly. For example, Button component is based on UnstyledButton. If you want to use Button, you need to import styles for UnstyledButton as well.

import '@mantine/core/styles/UnstyledButton.css';
import '@mantine/core/styles/Button.css';

Some components like Select do not have any styles on their own – they are built on top of other components. To find out which components are used in a particular component, check the component source code.

Global styles

All Mantine components depend on global styles, you need to import them before all other styles:

import '@mantine/core/styles/global.css';

Import order

It is important to keep correct styles import order. For example, if you want to use Button component, you need to import styles for UnstyledButton first and then import styles for Button.

// ✅ Correct order – Button styles will override UnstyledButton styles
import '@mantine/core/styles/UnstyledButton.css';
import '@mantine/core/styles/Button.css';
// ❌ Incorrect order – UnstyledButton styles will override Button styles
import '@mantine/core/styles/Button.css';
import '@mantine/core/styles/UnstyledButton.css';

Files list

ComponentImport
globalimport '@mantine/core/styles/global.css';
Accordionimport '@mantine/core/styles/Accordion.css';
ActionIconimport '@mantine/core/styles/ActionIcon.css';
Affiximport '@mantine/core/styles/Affix.css';
Alertimport '@mantine/core/styles/Alert.css';
Anchorimport '@mantine/core/styles/Anchor.css';
AppShellimport '@mantine/core/styles/AppShell.css';
AspectRatioimport '@mantine/core/styles/AspectRatio.css';
Avatarimport '@mantine/core/styles/Avatar.css';
BackgroundImageimport '@mantine/core/styles/BackgroundImage.css';
Badgeimport '@mantine/core/styles/Badge.css';
Blockquoteimport '@mantine/core/styles/Blockquote.css';
Breadcrumbsimport '@mantine/core/styles/Breadcrumbs.css';
Burgerimport '@mantine/core/styles/Burger.css';
Buttonimport '@mantine/core/styles/Button.css';
Cardimport '@mantine/core/styles/Card.css';
Centerimport '@mantine/core/styles/Center.css';
Checkboximport '@mantine/core/styles/Checkbox.css';
Chipimport '@mantine/core/styles/Chip.css';
CloseButtonimport '@mantine/core/styles/CloseButton.css';
Codeimport '@mantine/core/styles/Code.css';
ColorInputimport '@mantine/core/styles/ColorInput.css';
ColorPickerimport '@mantine/core/styles/ColorPicker.css';
ColorSwatchimport '@mantine/core/styles/ColorSwatch.css';
Comboboximport '@mantine/core/styles/Combobox.css';
Containerimport '@mantine/core/styles/Container.css';
Dialogimport '@mantine/core/styles/Dialog.css';
Dividerimport '@mantine/core/styles/Divider.css';
Drawerimport '@mantine/core/styles/Drawer.css';
Fieldsetimport '@mantine/core/styles/Fieldset.css';
Fleximport '@mantine/core/styles/Flex.css';
Gridimport '@mantine/core/styles/Grid.css';
Groupimport '@mantine/core/styles/Group.css';
Imageimport '@mantine/core/styles/Image.css';
Indicatorimport '@mantine/core/styles/Indicator.css';
InlineInputimport '@mantine/core/styles/InlineInput.css';
Inputimport '@mantine/core/styles/Input.css';
Kbdimport '@mantine/core/styles/Kbd.css';
Listimport '@mantine/core/styles/List.css';
Loaderimport '@mantine/core/styles/Loader.css';
LoadingOverlayimport '@mantine/core/styles/LoadingOverlay.css';
Markimport '@mantine/core/styles/Mark.css';
Menuimport '@mantine/core/styles/Menu.css';
Modalimport '@mantine/core/styles/Modal.css';
ModalBaseimport '@mantine/core/styles/ModalBase.css';
NavLinkimport '@mantine/core/styles/NavLink.css';
Notificationimport '@mantine/core/styles/Notification.css';
NumberInputimport '@mantine/core/styles/NumberInput.css';
Overlayimport '@mantine/core/styles/Overlay.css';
Paginationimport '@mantine/core/styles/Pagination.css';
Paperimport '@mantine/core/styles/Paper.css';
PasswordInputimport '@mantine/core/styles/PasswordInput.css';
Pillimport '@mantine/core/styles/Pill.css';
PillsInputimport '@mantine/core/styles/PillsInput.css';
PinInputimport '@mantine/core/styles/PinInput.css';
Popoverimport '@mantine/core/styles/Popover.css';
Progressimport '@mantine/core/styles/Progress.css';
Radioimport '@mantine/core/styles/Radio.css';
Ratingimport '@mantine/core/styles/Rating.css';
RingProgressimport '@mantine/core/styles/RingProgress.css';
ScrollAreaimport '@mantine/core/styles/ScrollArea.css';
SegmentedControlimport '@mantine/core/styles/SegmentedControl.css';
SimpleGridimport '@mantine/core/styles/SimpleGrid.css';
Skeletonimport '@mantine/core/styles/Skeleton.css';
Sliderimport '@mantine/core/styles/Slider.css';
Spoilerimport '@mantine/core/styles/Spoiler.css';
Stackimport '@mantine/core/styles/Stack.css';
Stepperimport '@mantine/core/styles/Stepper.css';
Switchimport '@mantine/core/styles/Switch.css';
Tableimport '@mantine/core/styles/Table.css';
Tabsimport '@mantine/core/styles/Tabs.css';
Textimport '@mantine/core/styles/Text.css';
ThemeIconimport '@mantine/core/styles/ThemeIcon.css';
Timelineimport '@mantine/core/styles/Timeline.css';
Titleimport '@mantine/core/styles/Title.css';
Tooltipimport '@mantine/core/styles/Tooltip.css';
TypographyStylesProviderimport '@mantine/core/styles/TypographyStylesProvider.css';
UnstyledButtonimport '@mantine/core/styles/UnstyledButton.css';
VisuallyHiddenimport '@mantine/core/styles/VisuallyHidden.css';