0
# Mantine Core
1

2
Mantine Core is a comprehensive React components library focused on usability, accessibility, and developer experience. Built with TypeScript, it provides 100+ production-ready components with a complete design system, flexible theming capabilities, and consistent API patterns.
3

4
## Package Information
5

6
- **Package Name**: @mantine/core
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Version**: 8.2.8
10
- **Installation**: `npm install @mantine/core`
11
- **License**: MIT
12
- **Repository**: https://github.com/mantinedev/mantine
13

14
## Core Imports
15

16
```typescript
17
import { MantineProvider, Button, Text, Box } from "@mantine/core";
18
```
19

20
For CommonJS:
21

22
```javascript
23
const { MantineProvider, Button, Text, Box } = require("@mantine/core");
24
```
25

26
CSS imports are also required:
27

28
```typescript
29
import "@mantine/core/styles.css";
30
```
31

32
## Basic Usage
33

34
```typescript
35
import { MantineProvider, Button, Text, Stack } from "@mantine/core";
36
import "@mantine/core/styles.css";
37

38
function App() {
39
  return (
40
    <MantineProvider>
41
      <Stack>
42
        <Text size="xl" fw={500}>
43
          Welcome to Mantine
44
        </Text>
45
        <Button variant="filled" size="md">
46
          Click me
47
        </Button>
48
      </Stack>
49
    </MantineProvider>
50
  );
51
}
52

53
// Advanced usage with theming
54
import { createTheme, MantineProvider, Button } from "@mantine/core";
55

56
const theme = createTheme({
57
  colors: {
58
    brand: [
59
      '#f0f9ff',
60
      '#e0f2fe', 
61
      '#bae6fd',
62
      '#7dd3fc',
63
      '#38bdf8',
64
      '#0ea5e9',
65
      '#0284c7',
66
      '#0369a1',
67
      '#075985',
68
      '#0c4a6e'
69
    ]
70
  },
71
  primaryColor: 'brand'
72
});
73

74
function ThemedApp() {
75
  return (
76
    <MantineProvider theme={theme}>
77
      <Button color="brand">Themed button</Button>
78
    </MantineProvider>
79
  );
80
}
81
```
82

83
## Architecture
84

85
Mantine Core is built around several key architectural concepts:
86

87
- **Component Factory System**: All components are created using the `factory` system that provides consistent API patterns, polymorphic props, and styling capabilities
88
- **Box Foundation**: The `Box` component serves as the foundation for all Mantine components, providing base styling props and polymorphic rendering
89
- **Theme Provider**: `MantineProvider` manages global theme configuration, CSS variables, color schemes, and styling context
90
- **Styles API**: Comprehensive styling system allowing component-level style overrides through `classNames` and `styles` props
91
- **Compound Components**: Complex components use compound patterns (e.g., `Modal.Root`, `Modal.Content`) for flexible composition
92
- **TypeScript Integration**: Full type safety with generic types, variant unions, and comprehensive prop interfaces
93

94
## Capabilities
95

96
### Theme System
97

98
Complete theming and styling system with provider configuration, CSS variables, color schemes, and design tokens.
99

100
```typescript { .api }
101
function MantineProvider(props: MantineProviderProps): JSX.Element;
102

103
interface MantineProviderProps {
104
  theme?: MantineThemeOverride;
105
  colorSchemeManager?: MantineColorSchemeManager;
106
  defaultColorScheme?: MantineColorScheme;
107
  forceColorScheme?: 'light' | 'dark';
108
  cssVariablesSelector?: string;
109
  withCssVariables?: boolean;
110
  children: React.ReactNode;
111
}
112

113
function createTheme(theme: MantineThemeOverride): MantineTheme;
114
```
115

116
[Theme System](./theme-system.md)
117

118
### Core Components
119

120
Foundation components including Box, factory system, and essential utilities that power the entire library.
121

122
```typescript { .api }
123
function Box<C = 'div'>(props: BoxProps<C>): JSX.Element;
124

125
interface BoxProps<C = 'div'> extends MantineStyleProps {
126
  component?: C;
127
  className?: string;
128
  style?: MantineStyleProp;
129
  children?: React.ReactNode;
130
}
131

132
function factory<Payload extends FactoryPayload>(payload: Payload): Factory<Payload>;
133
```
134

135
[Core Components](./core-components.md)
136

137
### Layout Components
138

139
Flexible layout components for building responsive interfaces including Grid, Flex, Stack, and AppShell.
140

141
```typescript { .api }
142
function Grid(props: GridProps): JSX.Element;
143
function Flex(props: FlexProps): JSX.Element;
144
function Stack(props: StackProps): JSX.Element;
145
function AppShell(props: AppShellProps): JSX.Element;
146

147
// Compound components
148
AppShell.Header;
149
AppShell.Navbar;
150
AppShell.Main;
151
AppShell.Footer;
152
AppShell.Aside;
153
```
154

155
[Layout Components](./layout-components.md)
156

157
### Form Components
158

159
Comprehensive form controls including Input system, Select components, Checkbox, Radio, and specialized inputs.
160

161
```typescript { .api }
162
function Input(props: InputProps): JSX.Element;
163
function TextInput(props: TextInputProps): JSX.Element;
164
function Select(props: SelectProps): JSX.Element;
165
function Checkbox(props: CheckboxProps): JSX.Element;
166

167
// Input compound components
168
Input.Wrapper;
169
Input.Label;
170
Input.Description;
171
Input.Error;
172
```
173

174
[Form Components](./form-components.md)
175

176
### Navigation Components
177

178
Navigation and user flow components including Tabs, Stepper, Breadcrumbs, and Pagination.
179

180
```typescript { .api }
181
function Tabs(props: TabsProps): JSX.Element;
182
function Stepper(props: StepperProps): JSX.Element;
183
function Breadcrumbs(props: BreadcrumbsProps): JSX.Element;
184
function Pagination(props: PaginationProps): JSX.Element;
185

186
// Navigation compound components
187
Tabs.List;
188
Tabs.Panel;
189
Tabs.Tab;
190
```
191

192
[Navigation Components](./navigation-components.md)
193

194
### Feedback Components
195

196
User feedback components including Alert, Progress indicators, Loader, and Notification systems.
197

198
```typescript { .api }
199
function Alert(props: AlertProps): JSX.Element;
200
function Progress(props: ProgressProps): JSX.Element;
201
function Loader(props: LoaderProps): JSX.Element;
202
function Notification(props: NotificationProps): JSX.Element;
203

204
// Progress compound components
205
Progress.Root;
206
Progress.Section;
207
Progress.Label;
208
```
209

210
[Feedback Components](./feedback-components.md)
211

212
### Overlay Components
213

214
Modal dialogs, drawers, popovers, and tooltip components for overlay interfaces.
215

216
```typescript { .api }
217
function Modal(props: ModalProps): JSX.Element;
218
function Drawer(props: DrawerProps): JSX.Element;
219
function Popover(props: PopoverProps): JSX.Element;
220
function Tooltip(props: TooltipProps): JSX.Element;
221

222
// Modal compound components
223
Modal.Root;
224
Modal.Overlay;
225
Modal.Content;
226
Modal.Header;
227
Modal.Title;
228
Modal.Body;
229
Modal.CloseButton;
230
```
231

232
[Overlay Components](./overlay-components.md)
233

234
### Data Display
235

236
Components for displaying data including Table, List, Card, Avatar, and Image components.
237

238
```typescript { .api }
239
function Table(props: TableProps): JSX.Element;
240
function List(props: ListProps): JSX.Element;
241
function Card(props: CardProps): JSX.Element;
242
function Avatar(props: AvatarProps): JSX.Element;
243

244
// Table compound components
245
Table.Thead;
246
Table.Tbody;
247
Table.Tr;
248
Table.Th;
249
Table.Td;
250
Table.ScrollContainer;
251
```
252

253
[Data Display Components](./data-display-components.md)
254

255
### Button and Typography Components
256

257
Interactive buttons and text display components including Button, ActionIcon, Text, Title, and formatting utilities.
258

259
```typescript { .api }
260
function Button(props: ButtonProps): JSX.Element;
261
function ActionIcon(props: ActionIconProps): JSX.Element;
262
function Text(props: TextProps): JSX.Element;
263
function Title(props: TitleProps): JSX.Element;
264
function Code(props: CodeProps): JSX.Element;
265

266
// Button variants and groups
267
Button.Group;
268
ActionIcon.Group;
269
```
270

271
[Button and Typography Components](./button-typography-components.md)
272

273
## Third-party Exports
274

275
Mantine Core also re-exports useful third-party libraries:
276

277
```typescript { .api }
278
// From react-remove-scroll
279
export { RemoveScroll } from 'react-remove-scroll';
280
```
281

282
## Peer Dependencies
283

284
Required peer dependencies for proper functionality:
285

286
- **@mantine/hooks**: ^8.2.8
287
- **react**: ^18.x || ^19.x
288
- **react-dom**: ^18.x || ^19.x
289

290
## Key Dependencies
291

292
- **@floating-ui/react**: ^0.26.28 - Floating element positioning
293
- **clsx**: ^2.1.1 - Conditional class name utility
294
- **react-number-format**: ^5.4.3 - Number input formatting
295
- **react-remove-scroll**: ^2.6.2 - Scroll prevention utility
296
- **react-textarea-autosize**: 8.5.9 - Auto-resizing textarea
297
- **type-fest**: ^4.27.0 - TypeScript utility types