Mantine UIFAQColors generator

CSS files list

This page contains a list of CSS files that you can import from @thinker-core/mantine-core package as a replacement for @thinker-core/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 '@thinker-core/mantine-core/styles/UnstyledButton.css';
import '@thinker-core/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.

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:

import '@thinker-core/mantine-core/styles/ScrollArea.css';
import '@thinker-core/mantine-core/styles/UnstyledButton.css';
import '@thinker-core/mantine-core/styles/VisuallyHidden.css';
import '@thinker-core/mantine-core/styles/Paper.css';
import '@thinker-core/mantine-core/styles/Popover.css';
import '@thinker-core/mantine-core/styles/CloseButton.css';
import '@thinker-core/mantine-core/styles/Group.css';
import '@thinker-core/mantine-core/styles/Loader.css';
import '@thinker-core/mantine-core/styles/Overlay.css';
import '@thinker-core/mantine-core/styles/ModalBase.css';
import '@thinker-core/mantine-core/styles/Input.css';
import '@thinker-core/mantine-core/styles/InlineInput.css';
import '@thinker-core/mantine-core/styles/Flex.css';
import '@thinker-core/mantine-core/styles/FloatingIndicator.css';
import '@thinker-core/mantine-core/styles/ActionIcon.css';

Global styles

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

  • baseline.css – a minimal CSS reset, sets box-sizing: border-box and changes font properties
  • default-css-variables.css – contains all CSS variables generated from the default theme
  • global.css – global classes used in Mantine components
import '@thinker-core/mantine-core/styles/baseline.css';
import '@thinker-core/mantine-core/styles/default-css-variables.css';
import '@thinker-core/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 '@thinker-core/mantine-core/styles/UnstyledButton.css';
import '@thinker-core/mantine-core/styles/Button.css';
// ❌ Incorrect order – UnstyledButton styles will override Button styles
import '@thinker-core/mantine-core/styles/Button.css';
import '@thinker-core/mantine-core/styles/UnstyledButton.css';

Files list

Note that if you cannot find a particular file in the list below, it means that the component does not have any styles on its own or it is built on top of other components.

ComponentImport
baseline
import '@thinker-core/mantine-core/styles/baseline.css';
default-css-variables
import '@thinker-core/mantine-core/styles/default-css-variables.css';
global
import '@thinker-core/mantine-core/styles/global.css';
Accordion
import '@thinker-core/mantine-core/styles/Accordion.css';
ActionIcon
import '@thinker-core/mantine-core/styles/ActionIcon.css';
Affix
import '@thinker-core/mantine-core/styles/Affix.css';
Alert
import '@thinker-core/mantine-core/styles/Alert.css';
Anchor
import '@thinker-core/mantine-core/styles/Anchor.css';
AngleSlider
import '@thinker-core/mantine-core/styles/AngleSlider.css';
AppShell
import '@thinker-core/mantine-core/styles/AppShell.css';
AspectRatio
import '@thinker-core/mantine-core/styles/AspectRatio.css';
Avatar
import '@thinker-core/mantine-core/styles/Avatar.css';
BackgroundImage
import '@thinker-core/mantine-core/styles/BackgroundImage.css';
Badge
import '@thinker-core/mantine-core/styles/Badge.css';
Blockquote
import '@thinker-core/mantine-core/styles/Blockquote.css';
Breadcrumbs
import '@thinker-core/mantine-core/styles/Breadcrumbs.css';
Burger
import '@thinker-core/mantine-core/styles/Burger.css';
Button
import '@thinker-core/mantine-core/styles/Button.css';
Card
import '@thinker-core/mantine-core/styles/Card.css';
Center
import '@thinker-core/mantine-core/styles/Center.css';
Checkbox
import '@thinker-core/mantine-core/styles/Checkbox.css';
Chip
import '@thinker-core/mantine-core/styles/Chip.css';
CloseButton
import '@thinker-core/mantine-core/styles/CloseButton.css';
Code
import '@thinker-core/mantine-core/styles/Code.css';
ColorInput
import '@thinker-core/mantine-core/styles/ColorInput.css';
ColorPicker
import '@thinker-core/mantine-core/styles/ColorPicker.css';
ColorSwatch
import '@thinker-core/mantine-core/styles/ColorSwatch.css';
Container
import '@thinker-core/mantine-core/styles/Container.css';
Combobox
import '@thinker-core/mantine-core/styles/Combobox.css';
Dialog
import '@thinker-core/mantine-core/styles/Dialog.css';
Divider
import '@thinker-core/mantine-core/styles/Divider.css';
Drawer
import '@thinker-core/mantine-core/styles/Drawer.css';
Fieldset
import '@thinker-core/mantine-core/styles/Fieldset.css';
ExampleComponent
import '@thinker-core/mantine-core/styles/ExampleComponent.css';
FileInput
import '@thinker-core/mantine-core/styles/FileInput.css';
Flex
import '@thinker-core/mantine-core/styles/Flex.css';
FloatingIndicator
import '@thinker-core/mantine-core/styles/FloatingIndicator.css';
Grid
import '@thinker-core/mantine-core/styles/Grid.css';
Group
import '@thinker-core/mantine-core/styles/Group.css';
Image
import '@thinker-core/mantine-core/styles/Image.css';
ImageAndFileDisplay
import '@thinker-core/mantine-core/styles/ImageAndFileDisplay.css';
Indicator
import '@thinker-core/mantine-core/styles/Indicator.css';
Input
import '@thinker-core/mantine-core/styles/Input.css';
Kbd
import '@thinker-core/mantine-core/styles/Kbd.css';
List
import '@thinker-core/mantine-core/styles/List.css';
Loader
import '@thinker-core/mantine-core/styles/Loader.css';
LoadingOverlay
import '@thinker-core/mantine-core/styles/LoadingOverlay.css';
Mark
import '@thinker-core/mantine-core/styles/Mark.css';
Menu
import '@thinker-core/mantine-core/styles/Menu.css';
Modal
import '@thinker-core/mantine-core/styles/Modal.css';
ModalBase
import '@thinker-core/mantine-core/styles/ModalBase.css';
NavLink
import '@thinker-core/mantine-core/styles/NavLink.css';
Notification
import '@thinker-core/mantine-core/styles/Notification.css';
NumberInput
import '@thinker-core/mantine-core/styles/NumberInput.css';
Overlay
import '@thinker-core/mantine-core/styles/Overlay.css';
Pagination
import '@thinker-core/mantine-core/styles/Pagination.css';
Paper
import '@thinker-core/mantine-core/styles/Paper.css';
PasswordInput
import '@thinker-core/mantine-core/styles/PasswordInput.css';
Pill
import '@thinker-core/mantine-core/styles/Pill.css';
PillsInput
import '@thinker-core/mantine-core/styles/PillsInput.css';
PinInput
import '@thinker-core/mantine-core/styles/PinInput.css';
Popover
import '@thinker-core/mantine-core/styles/Popover.css';
Progress
import '@thinker-core/mantine-core/styles/Progress.css';
Radio
import '@thinker-core/mantine-core/styles/Radio.css';
Rating
import '@thinker-core/mantine-core/styles/Rating.css';
RingProgress
import '@thinker-core/mantine-core/styles/RingProgress.css';
ScrollArea
import '@thinker-core/mantine-core/styles/ScrollArea.css';
SegmentedControl
import '@thinker-core/mantine-core/styles/SegmentedControl.css';
SemiCircleProgress
import '@thinker-core/mantine-core/styles/SemiCircleProgress.css';
SimpleGrid
import '@thinker-core/mantine-core/styles/SimpleGrid.css';
Skeleton
import '@thinker-core/mantine-core/styles/Skeleton.css';
Slider
import '@thinker-core/mantine-core/styles/Slider.css';
Spoiler
import '@thinker-core/mantine-core/styles/Spoiler.css';
Stack
import '@thinker-core/mantine-core/styles/Stack.css';
Stepper
import '@thinker-core/mantine-core/styles/Stepper.css';
Switch
import '@thinker-core/mantine-core/styles/Switch.css';
Table
import '@thinker-core/mantine-core/styles/Table.css';
TableOfContents
import '@thinker-core/mantine-core/styles/TableOfContents.css';
Tabs
import '@thinker-core/mantine-core/styles/Tabs.css';
Text
import '@thinker-core/mantine-core/styles/Text.css';
ThemeIcon
import '@thinker-core/mantine-core/styles/ThemeIcon.css';
Timeline
import '@thinker-core/mantine-core/styles/Timeline.css';
Title
import '@thinker-core/mantine-core/styles/Title.css';
Tooltip
import '@thinker-core/mantine-core/styles/Tooltip.css';
Tree
import '@thinker-core/mantine-core/styles/Tree.css';
Typography
import '@thinker-core/mantine-core/styles/Typography.css';
UnstyledButton
import '@thinker-core/mantine-core/styles/UnstyledButton.css';
VisuallyHidden
import '@thinker-core/mantine-core/styles/VisuallyHidden.css';
InlineInput
import '@thinker-core/mantine-core/styles/InlineInput.css';
CheckboxCard
import '@thinker-core/mantine-core/styles/CheckboxCard.css';
CheckboxIndicator
import '@thinker-core/mantine-core/styles/CheckboxIndicator.css';
RadioCard
import '@thinker-core/mantine-core/styles/RadioCard.css';
RadioIndicator
import '@thinker-core/mantine-core/styles/RadioIndicator.css';

Mantine styles

CSS modules