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.
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.
If you are not sure which components are used in a particular component, you can import all styles for components that are reused in other components:
Global styles
All Mantine components depend on global styles, you need to import them before all other styles:
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.
Files list
| Component | Import |
|---|---|
| global | import '@mantine/core/styles/global.css'; |
| Accordion | import '@mantine/core/styles/Accordion.css'; |
| Affix | import '@mantine/core/styles/Affix.css'; |
| ActionIcon | import '@mantine/core/styles/ActionIcon.css'; |
| Alert | import '@mantine/core/styles/Alert.css'; |
| Anchor | import '@mantine/core/styles/Anchor.css'; |
| AspectRatio | import '@mantine/core/styles/AspectRatio.css'; |
| AppShell | import '@mantine/core/styles/AppShell.css'; |
| Avatar | import '@mantine/core/styles/Avatar.css'; |
| Blockquote | import '@mantine/core/styles/Blockquote.css'; |
| BackgroundImage | import '@mantine/core/styles/BackgroundImage.css'; |
| Badge | import '@mantine/core/styles/Badge.css'; |
| Breadcrumbs | import '@mantine/core/styles/Breadcrumbs.css'; |
| Burger | import '@mantine/core/styles/Burger.css'; |
| Button | import '@mantine/core/styles/Button.css'; |
| Card | import '@mantine/core/styles/Card.css'; |
| Center | import '@mantine/core/styles/Center.css'; |
| Checkbox | import '@mantine/core/styles/Checkbox.css'; |
| Chip | import '@mantine/core/styles/Chip.css'; |
| CloseButton | import '@mantine/core/styles/CloseButton.css'; |
| ColorInput | import '@mantine/core/styles/ColorInput.css'; |
| ColorPicker | import '@mantine/core/styles/ColorPicker.css'; |
| Code | import '@mantine/core/styles/Code.css'; |
| ColorSwatch | import '@mantine/core/styles/ColorSwatch.css'; |
| Combobox | import '@mantine/core/styles/Combobox.css'; |
| Container | import '@mantine/core/styles/Container.css'; |
| Divider | import '@mantine/core/styles/Divider.css'; |
| Dialog | import '@mantine/core/styles/Dialog.css'; |
| Fieldset | import '@mantine/core/styles/Fieldset.css'; |
| Drawer | import '@mantine/core/styles/Drawer.css'; |
| Flex | import '@mantine/core/styles/Flex.css'; |
| FloatingIndicator | import '@mantine/core/styles/FloatingIndicator.css'; |
| Grid | import '@mantine/core/styles/Grid.css'; |
| Group | import '@mantine/core/styles/Group.css'; |
| Indicator | import '@mantine/core/styles/Indicator.css'; |
| Image | import '@mantine/core/styles/Image.css'; |
| InlineInput | import '@mantine/core/styles/InlineInput.css'; |
| Input | import '@mantine/core/styles/Input.css'; |
| List | import '@mantine/core/styles/List.css'; |
| Kbd | import '@mantine/core/styles/Kbd.css'; |
| Loader | import '@mantine/core/styles/Loader.css'; |
| LoadingOverlay | import '@mantine/core/styles/LoadingOverlay.css'; |
| Mark | import '@mantine/core/styles/Mark.css'; |
| Menu | import '@mantine/core/styles/Menu.css'; |
| Modal | import '@mantine/core/styles/Modal.css'; |
| ModalBase | import '@mantine/core/styles/ModalBase.css'; |
| NavLink | import '@mantine/core/styles/NavLink.css'; |
| NumberInput | import '@mantine/core/styles/NumberInput.css'; |
| Notification | import '@mantine/core/styles/Notification.css'; |
| Overlay | import '@mantine/core/styles/Overlay.css'; |
| Pagination | import '@mantine/core/styles/Pagination.css'; |
| Pill | import '@mantine/core/styles/Pill.css'; |
| PasswordInput | import '@mantine/core/styles/PasswordInput.css'; |
| PillsInput | import '@mantine/core/styles/PillsInput.css'; |
| PinInput | import '@mantine/core/styles/PinInput.css'; |
| Popover | import '@mantine/core/styles/Popover.css'; |
| Progress | import '@mantine/core/styles/Progress.css'; |
| Radio | import '@mantine/core/styles/Radio.css'; |
| Rating | import '@mantine/core/styles/Rating.css'; |
| RingProgress | import '@mantine/core/styles/RingProgress.css'; |
| Paper | import '@mantine/core/styles/Paper.css'; |
| SegmentedControl | import '@mantine/core/styles/SegmentedControl.css'; |
| SimpleGrid | import '@mantine/core/styles/SimpleGrid.css'; |
| Skeleton | import '@mantine/core/styles/Skeleton.css'; |
| Slider | import '@mantine/core/styles/Slider.css'; |
| ScrollArea | import '@mantine/core/styles/ScrollArea.css'; |
| Spoiler | import '@mantine/core/styles/Spoiler.css'; |
| Stack | import '@mantine/core/styles/Stack.css'; |
| Stepper | import '@mantine/core/styles/Stepper.css'; |
| Table | import '@mantine/core/styles/Table.css'; |
| Tabs | import '@mantine/core/styles/Tabs.css'; |
| Switch | import '@mantine/core/styles/Switch.css'; |
| Text | import '@mantine/core/styles/Text.css'; |
| ThemeIcon | import '@mantine/core/styles/ThemeIcon.css'; |
| Timeline | import '@mantine/core/styles/Timeline.css'; |
| Title | import '@mantine/core/styles/Title.css'; |
| Tooltip | import '@mantine/core/styles/Tooltip.css'; |
| TypographyStylesProvider | import '@mantine/core/styles/TypographyStylesProvider.css'; |
| Tree | import '@mantine/core/styles/Tree.css'; |
| UnstyledButton | import '@mantine/core/styles/UnstyledButton.css'; |
| VisuallyHidden | import '@mantine/core/styles/VisuallyHidden.css'; |
| CheckboxCard | import '@mantine/core/styles/CheckboxCard.css'; |
| CheckboxIndicator | import '@mantine/core/styles/CheckboxIndicator.css'; |
| RadioCard | import '@mantine/core/styles/RadioCard.css'; |
| RadioIndicator | import '@mantine/core/styles/RadioIndicator.css'; |