# Mantine 9.6.0

- Product: Mantine (https://whatsnew.fyi/product/mantine)
- Vendor: Mantine
- Date: 2026-08-31
- Version: 9.6.0
- Original notes: https://github.com/mantinedev/mantine/releases/tag/9.6.0
- Permalink: https://whatsnew.fyi/product/mantine/releases/9.6.0

What's New is an index, not a publisher: every entry below links to the vendor's own release notes, which are the authoritative source. Entries are labelled where they are hand-curated sample data, pre-releases, or drawn from a secondary source such as a developer blog.

Reuse: the summaries, labels and curation here are © What's New. Quote freely with attribution and a link back; wholesale republication of the corpus is not permitted — terms: https://whatsnew.fyi/terms. The vendors' own release notes remain their publishers'.

---

- **added** — Add @mantine/lightbox package with full-screen media lightbox supporting carousel navigation, zoom, thumbnails, toolbar customization, and store-based API for images, videos, and custom slides
- **added** — Add renderNotification prop to Notifications to completely replace default notification with custom content while preserving animations
- **added** — Add layout="stacked" prop to Notifications to display notifications in a stacked layout where only the latest notification is fully visible

[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/9-6-0)

##### Support Mantine development

You can now sponsor Mantine development with [OpenCollective](https://opencollective.com/mantinedev).
All funds are used to improve Mantine and create new features and components.

##### @mantine/lightbox package

New [@mantine/lightbox](https://mantine.dev/x/lightbox) package – a full-screen media lightbox with carousel navigation,
zoom, thumbnails, toolbar customization, and store-based API. Supports image, video, and custom slides:

```tsx
import '@mantine/lightbox/styles.css';
import { useState } from 'react';
import { Image, SimpleGrid } from '@mantine/core';
import { Lightbox, LightboxSlideData } from '@mantine/lightbox';

const images = [
  'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png',
  'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-2.png',
  'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-3.png',
  'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-4.png',
  'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-5.png',
];

const slides: LightboxSlideData[] = images.map((src) => ({ src }));

function Demo() {
  const [opened, setOpened] = useState(false);
  const [index, setIndex] = useState(0);

  return (
    <>
      <Lightbox
        opened={opened}
        onClose={() => setOpened(false)}
        slides={slides}
        currentIndex={index}
        onIndexChange={setIndex}
      />

      <SimpleGrid cols={3}>
        {images.map((src, i) => (
          <Image
            key={src}
            src={src}
            radius="md"
            style={{ cursor: 'pointer' }}
            onClick={() => {
              setIndex(i);
              setOpened(true);
            }}
          />
        ))}
      </SimpleGrid>
    </>
  );
}
```

Key features:
- **Zoom** – click to zoom on desktop, double-tap on mobile, scroll wheel and pinch gestures
- **Thumbnails** – bottom thumbnail strip with active indicator
- **Store API** – mount once, open from anywhere (same pattern as Spotlight and Notifications)
- **Video slides** – native video player with auto-pause on navigation
- **Custom slides** – render anything with custom thumbnails
- **Transitions** – animated open and close with configurable `transitionProps` (same API as Modal)
- **Keyboard shortcuts** – Escape, arrows, F/T/Z for fullscreen/thumbnails/zoom
- **Localization** – every string is defined in the `labels` prop

##### Notifications custom rendering

[Notifications](https://mantine.dev/x/notifications) now support `renderNotification` prop that allows you to completely
replace the default notification with custom content. All animations (enter, exit, drag dismiss)
are preserved for custom notifications:

```tsx
import { Avatar, Button, Group, rem, Text } from '@mantine/core';
import { notifications } from '@mantine/notifications';

function Demo() {
  return (
    <Group justify="center">
      <Button
        onClick={() =>
          notifications.show({
            autoClose: false,
            renderNotification: (notification) => (
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: rem(12),
                  padding: rem(16),
                  borderRadius: rem(8),
                  backgroundColor: 'var(--mantine-color-body)',
                  border: '1px solid var(--mantine-color-default-border)',
                  boxShadow: 'var(--mantine-shadow-lg)',
                  userSelect: 'none',
                }}
              >
                <Avatar src={null} radius="xl" color="blue">
                  DM
                </Avatar>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <Text size="sm" fw={600}>
                    Dan sent you a message
                  </Text>

_[Truncated at 4000 characters — full notes: https://github.com/mantinedev/mantine/releases/tag/9.6.0]_