Skip to content

[@mantine/notifications] Add stacked notifications#9038

Open
mehdiraized wants to merge 1 commit into
mantinedev:masterfrom
mehdiraized:notifications-stacked
Open

[@mantine/notifications] Add stacked notifications#9038
mehdiraized wants to merge 1 commit into
mantinedev:masterfrom
mehdiraized:notifications-stacked

Conversation

@mehdiraized

@mehdiraized mehdiraized commented Jul 5, 2026

Copy link
Copy Markdown

What changed

  • Added stacked prop to Notifications for Sonner-style stacked notification layout.
  • Stacked notifications show the front notification with compact previews behind it and expand on hover/focus.
  • Supported all notification positions: top stacks expand downward, bottom stacks expand upward.
  • New stacked notifications are displayed immediately at the front instead of waiting in the queue.
  • Preserved existing priority, auto-close, drag dismiss, scroll dismiss, and close-disabled behavior.
  • Added documentation, Storybook demo, and focused tests for the new mode.

Testing

  • npm run typecheck
  • npx oxlint -c oxlint.config.mjs packages/@mantine/notifications/src packages/@docs/demos/src/demos/notifications apps/mantine.dev/src/pages/x/notifications.mdx
  • npm run format:write:files ...
  • npm run jest packages/@mantine/notifications/src/Notifications.test.tsx -- --runInBand --watchman=false
  • npm run stylelint
  • npm run build

This pull request introduces a new "stacked notifications" feature to the @mantine/notifications package, allowing notifications to be displayed in a compact stack with previews of older notifications behind the front notification. The stack expands on hover or focus, and the implementation includes new CSS, demo, and comprehensive tests. Several internal changes support this feature, including new props, event handling, and style variables.

Stacked Notifications Feature:

  • Added a stacked prop to the Notifications component, enabling a compact stacked layout where the newest notification is shown in front and older notifications appear as previews behind it. The stack expands on hover or focus, and works with all supported positions. [1] [2] [3]

Implementation and API Changes:

  • Updated NotificationContainer to accept an onHeightChange prop and manage CSS variables for stacking, opacity, and transforms. Added logic to measure notification heights and handle dynamic stacking transitions. [1] [2] [3] [4] [5]
  • Added new constants for stacked notification layout and animation, and updated notification state management to support immediate display of new notifications in stacked mode.

Documentation and Demos:

  • Added a new section to the documentation describing stacked notifications, and created a new interactive demo (Notifications.demo.stacked.tsx) to showcase the feature. [1] [2]
  • Registered the new stacked demo in the storybook and export indexes. [1] [2]

Styling:

  • Added CSS for the stacked notifications layout, including transitions, positioning, and preview/fade-out effects for older notifications.

Testing:

  • Added a comprehensive test suite for stacked notifications, covering layout, stacking order, expansion/collapse behavior, keyboard/mouse interaction, queue handling, and drag-to-dismiss.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant