Mantine Extensions Newsletter

🎉 April 18 – April 29, 2026

Hey there, Mantine enthusiasts! 👋

Twelve days, four meaty minor releases — no breaking changes anywhere — and a clear theme running through them: more polish, better defaults, richer interactions. Mantine Scene gets three brand-new sub-scenes plus a viewport-aware lazy mode, Picker gains uncontrolled mode and haptics, Rings Progress lets you click rings and paint them with gradients, and Window irons out the long-standing z-index escalation problem. Let’s dive in.

🚀 Featured Releases

🌌 Mantine Scene v2.1.0 — Three new sub-scenes, true zero-re-render lazy mode

The biggest mantine-scene release since 2.0. Three brand-new compound sub-scenes, two new top-level props on Scene, and a full migration of responsive dimension props to Mantine’s native StyleProp + InlineStyles pattern.

What’s new:

• Scene.Rain — angled rain streaks with a fully tunable splash effect at the bottom edge. Configure splashSize, splashOpacity, splashThickness, and splashCount for everything from gentle drizzle to a full storm. Pair it with Scene.Glow for an instant lightning-flash effect.
• Scene.Confetti — multi-color celebration effect with three shapes ('rectangle', 'circle', 'triangle'), a continuous loop and a one-shot burst mode with onComplete. The new origin="bottom" flips it into a confetti cannon: pieces shoot upward in a parabolic arc, peak at rise pixels, then fall back down.
• Scene.Waves — multi-layer parallax SVG waves panning horizontally. Per-layer paths are generated deterministically via a PRNG seed and tile seamlessly under a translateX(-50%) CSS animation. Choose direction ('left' / 'right'), parallax intensity (negative values invert the depth for a dreamy feel), position ('top' / 'bottom'), and either a single Mantine color (shades derived automatically) or an explicit color palette.
• lazy mode — set lazy on the root Scene and the component pauses every child animation and the internal mouse-tracking rAF loop when it scrolls off-screen, automatically resuming when it comes back. Implementation uses IntersectionObserver and toggles a CSS attribute directly on the DOM — zero React re-renders on viewport enter/leave.
• onMousePosition callback — pipe the smoothed cursor coordinates (0–100% of the container) out to external UI. Handy for syncing toasts, custom cursors, or any element that should track the same eased-out position the scene uses internally.

Performance:

• All responsive dimension props (Glow size / blur, DotGrid spacing) now resolve at the CSS layer via InlineStyles + @media queries — same pattern Mantine core uses for SimpleGrid. Zero React re-renders on resize for CSS-derivable values.
• Defensive clamping on count, splashCount, and speed across Rain and Confetti — pathological inputs no longer throw or produce invalid CSS animations.

Note: the legacy ResponsiveValue<T> type is now a deprecated alias for StyleProp<T> from @mantine/core. Existing imports keep working.

📦 npm  · 📖 Docs  · ⚡ Don’t miss the fullscreen playground at /fullscreen — twelve sub-scenes, all toggleable in real time.

🎯 Mantine Picker v3.1.0 — Uncontrolled mode, scroll lifecycle, haptics

Three additive features that close gaps in Picker’s API and bring it closer to the rest of the Mantine input family.

What’s new:

• defaultValue for uncontrolled mode — the picker can now manage its own selection state. Pass defaultValue and skip the useState plumbing; onChange still fires if you provide it. Built on top of Mantine’s useUncontrolled, so value wins when both are provided. The “Uncontrolled” docs section was removed entirely (uncontrolled is the implicit default, mirroring Mantine’s own component docs).
• onScrollStart / onScrollEnd lifecycle callbacks — fire on the boundaries of any scroll interaction (drag, momentum, mouse wheel, keyboard, programmatic animation). The four internal scroll states are unioned into a single isScrolling boolean so a continuous interaction (e.g. drag → momentum) only fires the pair once. Useful for analytics, coordinating multiple pickers, or gating other inputs while the wheel is spinning.
• hapticFeedback prop — trigger a short navigator.vibrate() pulse on supported devices whenever the selection changes. Pass true for a 15 ms default or a number to set a custom duration. Silent no-op on desktop and unsupported devices.
• Three new docs examples — Slot Machine reworked with proper scoring, plus Color Palette and Alarm pickers.

Bug fixes:

• Stale closures in the loop-change and value-change effects (#23, #24) — both now read the latest value via refs, so toggling loop or changing value mid-interaction works reliably.
• selectedIndex falls back to a real item when the supplied value is missing from data (instead of resolving to -1 and clamping out of bounds).

📦 npm  · 📖 Docs 

🎯 Mantine Rings Progress v4.1.0 — Gradients, clickable rings, smooth value transitions

A focused minor release that turns rings into interactive surfaces and gives them a visual upgrade.

What’s new:

• Per-ring linear gradient strokes — each ring accepts a gradient: { from, to, deg } prop that paints its stroke with a two-stop gradient instead of a solid color. deg follows CSS conventions (0° = bottom→top, 90° = left→right). Multiple RingsProgress on the same page get unique gradient IDs so they never collide.
• Per-ring onClick and onHover callbacks — make any ring keyboard-focusable and clickable. When onClick is set the ring becomes a role="button", Enter/Space activates it, and the cursor switches to pointer. Hit-testing is geometric (radial distance from the center matched against each ring’s stroke band) so a click on the outer ring’s curve always hits the right callback, even though SVG wrappers overlap.
• animateValueChanges for smooth transitions — by default animate only controls the entrance; after mount, value changes snap. The new prop keeps the transition active so every value update interpolates smoothly. Perfect for live dashboards or “Apply changes” flows. Respects prefers-reduced-motion.
• Per-ring value labels at the arc endpoint — showValues renders a soft pill with the ring’s value at the end of its arc, computed from value, thickness, startAngle, and direction. Customize per-ring via formatValue and toggle individually with showValue. New valueLabel Styles API selector for full styling control.

Bug fixes:

• Animation, pulse-on-completion, and onRingComplete effects no longer re-trigger on every parent re-render — they now mirror rings into a ref and key on ringCount + a stringified ringValuesKey instead of the array reference.
• Hit-test bands realigned with Mantine’s actual RingProgress geometry — overlapping rings can no longer trigger the wrong callback.

📦 npm  · 📖 Docs 

🪟 Mantine Window v3.1.0 — Z-index escalation, solved

Two long-standing coordination problems in Window.Group are gone, and there are new knobs to make stacking behavior configurable per-group and per-window.

What’s new:

• zIndexStrategy on Window.Group — choose between 'increment' (default, monotonic counter, preserves pre-3.1 behavior) and 'normalize' (z-indexes derived from the current stacking order, always within initialZIndex .. initialZIndex + N - 1). 'normalize' is recommended for long-running apps and any time Window coexists with Mantine Modal, Menu, or Popover — it makes z-index escalation impossible by construction.
• initialZIndex and maxZIndex — available on both Window.Group and stand-alone Window. initialZIndex sets the starting stacking value (defaults match the previous hardcoded 200 / 1). maxZIndex wraps the counter back to initialZIndex when reached, preventing escalation above modals and menus.
• stackOrder on WindowGroupContextValue — read-only snapshot of the bottom→top stacking order, available via groupRef.current?.stackOrder. Useful for introspection, analytics, or custom UI that reflects what’s on top.
• Dynamic windows support — applyLayout (tile, columns, rows, snap, fill) now handles windows rendered dynamically via .map() over state. Previously preset buttons would silently no-op because the registry was still populating asynchronously; the group now defers and flushes the deferred layout once the registry and container measurements are ready. Live demo in the new “Dynamic Windows” docs section.

Bug fixes:

• Z-index escalation above modals and menus (#23) — fixed by maxZIndex wrap and 'normalize' strategy.
• Layout presets did nothing on .map()-rendered windows (#24) — now defer-and-flush via requestAnimationFrame once the registry is ready.
• Stand-alone Window could move backward on first bringToFront when initialZIndex was raised — the counter now seeds up to initialZIndex before incrementing.

Internal: the Window.Group registry was reworked from mutable refs with forceUpdate to reactive React state (stackOrder: string[]), so context consumers re-render reliably when stacking changes.

📦 npm  · 📖 Docs 

🔧 Across the Ecosystem

All four releases this period rolled in the same dependency refresh — Yarn 4.14.1, latest Mantine 9 minors, and aligned tooling versions. Several repos also synchronized their .oxfmtrc.json formatting config with the shared extension-template, so contributing across packages stays friction-free.

💡 Pro Tip — Pair lazy mode with onMousePosition on Mantine Scene

If you’ve been using interactive on Scene to react to the cursor, the new onMousePosition callback unlocks a clean pattern for coordinating external UI with the scene’s smoothed cursor — toasts that follow the cursor, custom hover indicators, badges that track the mouse, anything. The callback receives the same eased-out coordinates (0–100% of the container) that sub-scenes use internally, so external elements stay visually in sync with the scene’s animations.

Pair it with the new lazy mode for landing pages: scenes pause when scrolled off-screen and their mouse-tracking rAF loop is fully suspended (not just throttled), so multiple decorative scenes on the same page no longer compete for the main thread.

Thanks for reading, and as always — happy building! 🛠️

— The Mantine Extensions team, April 29, 2026