0
# React Component
1

2
The `Notifications` component handles rendering notification containers at different screen positions, with full customization of appearance, behavior, and animations. It provides the visual layer for the notification system.
3

4
## Capabilities
5

6
### Notifications Component
7

8
Main React component that renders notification containers at all six positions on the screen.
9

10
```typescript { .api }
11
/**
12
 * React component that renders notification containers at different screen positions
13
 * Handles animations, positioning, and portal rendering
14
 */
15
const Notifications: React.ForwardRefExoticComponent<NotificationsProps & React.RefAttributes<HTMLDivElement>>;
16

17
interface NotificationsProps extends BoxProps, StylesApiProps<NotificationsFactory>, ElementProps<'div'> {
18
  /** Notifications default position, 'bottom-right' by default */
19
  position?: NotificationPosition;
20
  /** Auto close timeout for all notifications in ms, false to disable auto close, 4000 by default */
21
  autoClose?: number | false;
22
  /** Notification transition duration in ms, 250 by default */
23
  transitionDuration?: number;
24
  /** Notification width, cannot exceed 100%, 440 by default */
25
  containerWidth?: number | string;
26
  /** Notification max-height, used for transitions, 200 by default */
27
  notificationMaxHeight?: number | string;
28
  /** Maximum number of notifications displayed at a time, 5 by default */
29
  limit?: number;
30
  /** Notifications container z-index, 400 by default */
31
  zIndex?: string | number;
32
  /** Props passed down to the Portal component */
33
  portalProps?: BasePortalProps;
34
  /** Store for notifications state, defaults to global store */
35
  store?: NotificationsStore;
36
  /** Whether notifications container should be rendered inside Portal, true by default */
37
  withinPortal?: boolean;
38
}
39
```
40

41
**Basic Usage:**
42

43
```typescript
44
import { Notifications } from "@mantine/notifications";
45

46
// Basic setup - place in your app root
47
function App() {
48
  return (
49
    <div>
50
      <YourAppContent />
51
      <Notifications />
52
    </div>
53
  );
54
}
55
```
56

57
**Advanced Configuration:**
58

59
```typescript
60
import { Notifications, createNotificationsStore } from "@mantine/notifications";
61

62
// Custom configuration
63
function App() {
64
  return (
65
    <div>
66
      <YourAppContent />
67
      <Notifications
68
        position="top-center"
69
        autoClose={5000}
70
        limit={3}
71
        containerWidth={500}
72
        transitionDuration={300}
73
        zIndex={1000}
74
      />
75
    </div>
76
  );
77
}
78

79
// Multiple notification systems with separate stores
80
const adminStore = createNotificationsStore();
81
const userStore = createNotificationsStore();
82

83
function App() {
84
  return (
85
    <div>
86
      <YourAppContent />
87
      {/* Admin notifications */}
88
      <Notifications 
89
        store={adminStore}
90
        position="top-right"
91
        containerWidth={400}
92
      />
93
      {/* User notifications */}
94
      <Notifications 
95
        store={userStore}
96
        position="bottom-left"
97
        containerWidth={300}
98
      />
99
    </div>
100
  );
101
}
102
```
103

104
**Portal Configuration:**
105

106
```typescript
107
import { Notifications } from "@mantine/notifications";
108

109
function App() {
110
  return (
111
    <div>
112
      <YourAppContent />
113
      {/* Render without portal */}
114
      <Notifications withinPortal={false} />
115
      
116
      {/* Custom portal target */}
117
      <Notifications 
118
        portalProps={{ target: '#notifications-container' }}
119
      />
120
    </div>
121
  );
122
}
123
```
124

125
### Component Static Methods
126

127
The Notifications component exposes static methods that mirror the store functions for convenience.
128

129
```typescript { .api }
130
/**
131
 * Static methods attached to the Notifications component
132
 * These are identical to the standalone store functions
133
 */
134
interface NotificationsStaticMethods {
135
  show: typeof showNotification;
136
  hide: typeof hideNotification;
137
  update: typeof updateNotification;
138
  clean: typeof cleanNotifications;
139
  cleanQueue: typeof cleanNotificationsQueue;
140
  updateState: typeof updateNotificationsState;
141
}
142
```
143

144
**Usage Examples:**
145

146
```typescript
147
import { Notifications } from "@mantine/notifications";
148

149
// Using static methods - identical to store functions
150
function MyComponent() {
151
  const handleClick = () => {
152
    // All of these are equivalent:
153
    Notifications.show({ message: 'Hello!' });
154
    // notifications.show({ message: 'Hello!' });
155
    // showNotification({ message: 'Hello!' });
156
  };
157

158
  const handleHide = (id: string) => {
159
    Notifications.hide(id);
160
  };
161

162
  const handleUpdate = (id: string) => {
163
    Notifications.update({
164
      id,
165
      message: 'Updated message',
166
      color: 'green',
167
    });
168
  };
169

170
  const handleClean = () => {
171
    Notifications.clean();
172
  };
173

174
  return (
175
    <div>
176
      <button onClick={handleClick}>Show</button>
177
      <button onClick={() => handleHide('some-id')}>Hide</button>
178
      <button onClick={() => handleUpdate('some-id')}>Update</button>
179
      <button onClick={handleClean}>Clean All</button>
180
    </div>
181
  );
182
}
183
```
184

185
### Styling and Theming
186

187
The component supports Mantine's styling system with customizable CSS variables and style names.
188

189
```typescript { .api }
190
type NotificationsStylesNames = 'root' | 'notification';
191

192
type NotificationsCssVariables = {
193
  root: '--notifications-z-index' | '--notifications-container-width';
194
};
195

196
interface NotificationsFactory extends Factory<{
197
  props: NotificationsProps;
198
  ref: HTMLDivElement;
199
  stylesNames: NotificationsStylesNames;
200
  vars: NotificationsCssVariables;
201
  staticComponents: {
202
    show: typeof notifications.show;
203
    hide: typeof notifications.hide;
204
    update: typeof notifications.update;
205
    clean: typeof notifications.clean;
206
    cleanQueue: typeof notifications.cleanQueue;
207
    updateState: typeof notifications.updateState;
208
  };
209
}>;
210
```
211

212
**Custom Styling:**
213

214
```typescript
215
import { Notifications } from "@mantine/notifications";
216

217
function App() {
218
  return (
219
    <Notifications
220
      styles={{
221
        root: { 
222
          // Custom styles for notification containers
223
        },
224
        notification: { 
225
          // Custom styles for individual notifications
226
        },
227
      }}
228
      classNames={{
229
        root: 'my-notifications-container',
230
        notification: 'my-notification',
231
      }}
232
    />
233
  );
234
}
235
```
236

237
### Position System
238

239
The component renders notification containers at all six screen positions simultaneously, showing notifications based on their individual position settings.
240

241
```typescript { .api }
242
type NotificationPosition = 
243
  | 'top-left' 
244
  | 'top-right' 
245
  | 'top-center' 
246
  | 'bottom-left' 
247
  | 'bottom-right' 
248
  | 'bottom-center';
249
```
250

251
**Position Behavior:**
252

253
- Each position has its own container and limit tracking
254
- Notifications without explicit position use the component's `position` prop default
255
- Queuing happens per-position when limits are exceeded
256
- All positions are rendered simultaneously but only show notifications when they have content
257

258
```typescript
259
import { notifications, Notifications } from "@mantine/notifications";
260

261
function App() {
262
  return (
263
    <div>
264
      <YourAppContent />
265
      {/* Component default position */}
266
      <Notifications position="bottom-right" limit={3} />
267
    </div>
268
  );
269
}
270

271
function SomeComponent() {
272
  const showNotifications = () => {
273
    // Uses component default (bottom-right)
274
    notifications.show({ message: 'Default position' });
275
    
276
    // Override position for specific notification
277
    notifications.show({ 
278
      message: 'Top center notification',
279
      position: 'top-center'
280
    });
281
    
282
    // Multiple notifications at same position
283
    for (let i = 0; i < 5; i++) {
284
      notifications.show({ 
285
        message: `Notification ${i + 1}`,
286
        position: 'top-right'
287
      });
288
    }
289
    // First 3 show immediately (limit=3), others are queued
290
  };
291

292
  return <button onClick={showNotifications}>Show Multiple</button>;
293
}
294
```
295

296
## Types
297

298
```typescript { .api }
299
type NotificationPosition = 
300
  | 'top-left' 
301
  | 'top-right' 
302
  | 'top-center' 
303
  | 'bottom-left' 
304
  | 'bottom-right' 
305
  | 'bottom-center';
306

307
interface NotificationsProps extends BoxProps, StylesApiProps<NotificationsFactory>, ElementProps<'div'> {
308
  position?: NotificationPosition;
309
  autoClose?: number | false;
310
  transitionDuration?: number;
311
  containerWidth?: number | string;
312
  notificationMaxHeight?: number | string;
313
  limit?: number;
314
  zIndex?: string | number;
315
  portalProps?: Omit<PortalProps, 'children'>;
316
  store?: NotificationsStore;
317
  withinPortal?: boolean;
318
}
319

320
type NotificationsStylesNames = 'root' | 'notification';
321

322
type NotificationsCssVariables = {
323
  root: '--notifications-z-index' | '--notifications-container-width';
324
};
325
```
326

327
## Integration Examples
328

329
### Next.js App Router
330

331
```typescript
332
// app/layout.tsx
333
import { Notifications } from "@mantine/notifications";
334
import { MantineProvider } from "@mantine/core";
335

336
export default function RootLayout({
337
  children,
338
}: {
339
  children: React.ReactNode;
340
}) {
341
  return (
342
    <html lang="en">
343
      <body>
344
        <MantineProvider>
345
          {children}
346
          <Notifications />
347
        </MantineProvider>
348
      </body>
349
    </html>
350
  );
351
}
352
```
353

354
### Vite/React App
355

356
```typescript
357
// main.tsx or App.tsx
358
import { MantineProvider } from "@mantine/core";
359
import { Notifications } from "@mantine/notifications";
360
import "@mantine/core/styles.css";
361
import "@mantine/notifications/styles.css";
362

363
function App() {
364
  return (
365
    <MantineProvider>
366
      <YourApp />
367
      <Notifications />
368
    </MantineProvider>
369
  );
370
}
371
```
372

373
### Custom Error Boundary Integration
374

375
```typescript
376
import { Notifications } from "@mantine/notifications";
377
import { ErrorBoundary } from "react-error-boundary";
378

379
function ErrorFallback({ error }: { error: Error }) {
380
  React.useEffect(() => {
381
    Notifications.show({
382
      title: 'Application Error',
383
      message: error.message,
384
      color: 'red',
385
      autoClose: false,
386
    });
387
  }, [error]);
388

389
  return <div>Something went wrong. Check notifications.</div>;
390
}
391

392
function App() {
393
  return (
394
    <ErrorBoundary FallbackComponent={ErrorFallback}>
395
      <YourApp />
396
      <Notifications />
397
    </ErrorBoundary>
398
  );
399
}
400
```