A day with twelve repositories

Before. You have a ~/Projects folder with twelve Git repos in it. To know which ones are dirty, you open Terminal, cd into each, run git status, repeat. Or you open Tower and wait for it to scan. Or you open VS Code twelve times. None of this is looking at your files — it’s ceremony around looking at your files.

After. You open FinderGit and the folder tree looks like Finder’s list view, plus four columns: branch name, clean/dirty/unpushed badge, number of changed files, and sizes and dates. Directories inside a dirty repo get a small orange dot with a count — so you spot modifications three levels deep without expanding anything.

That’s the whole pitch. The rest of this post is the details.

What is FinderGit?

FinderGit is a native macOS app built with SwiftUI. It’s positioned somewhere between Finder and a heavy Git client like Tower — it’s not a replacement for either. If your day involves interactive rebases, submodule surgery, or cherry-picking across a long history, you’ll still want Tower, GitX, or your CLI.

FinderGit is for the other 90% of the day: the part where you’re browsing your projects, quickly checking “what did I leave dirty yesterday?”, staging a few files, typing a commit message, pushing. Everything happens in the window that already shows your files — no context switch.

It runs on macOS 15 Sequoia or later. It’s free, open-source (the website repo is public, the app repo will follow), and this is the public beta — v0.1.0. Expect a few rough edges; file them, I fix them.

✨ Key features

• Tree view with sortable columns — Finder-style list view, but the columns are Name, Branch, Status, Changes, Size, Date Modified. Click any header to sort.

• Live Git status per repository — a small badge next to each repo: CLEAN (green), DIRTY (orange), UNPUSHED (blue). Updates in real time via FSEvents.

• Sub-directory dirty indicators — directories inside a repo show an orange dot with the number of modified files they contain. Walk down to the changes without expanding every folder.

• Inline diff viewer — click any modified file and the right pane renders a unified diff with green/red lines, hunk headers, and line numbers. Supports HEAD, staged, unstaged, and even untracked files (rendered as all-added).

• Git actions from the UI — Stage, Unstage, Commit, Push, Pull, Fetch. Per file or per repo. Commit messages get a TextField and two buttons: Commit Staged or Commit All & Push.

• Native Markdown preview via Quick Look — press Space on any .md or .markdown file and it opens in a native renderer with a GitHub-style theme. Close with Space or Escape. Every other file type falls back to the system qlmanage, so you keep PDF, image, video previews for free.

• Smart context menus — right-click adapts to what you clicked: repo gets Fetch / Pull / Push / Stage All; tracked file gets Stage / Unstage; non-git directory gets Add as Root Folder; everything gets Open / Reveal in Finder / Copy Path / Open in Terminal.

• Multiple root folders — add as many as you want. Drop folders from Finder directly onto the sidebar; they become tree roots.

• Search & filter — type in the toolbar to filter the tree by name (300ms debounce). Toggle Git Only to hide everything that isn’t a repo — instant overview of just your projects.

• Keyboard-driven — ⌘⇧F Fetch, ⌘⇧L Pull, ⌘⇧P Push, ⌘⇧A Stage All, ⌘⇧S Stage selected, Space Quick Look, ⌘+/⌘- zoom, ⌘⇧R Reveal in Finder. The usual Mac muscle memory.

🛠 What’s powering it

For the developer-curious reader:

• Swift + SwiftUI, deployment target macOS 15. The UI uses NavigationSplitView with a native Table(children:) for the tree, so sorting, keyboard navigation and selection come from AppKit under the hood.

• Observation framework (@Observable) for state — no ObservableObject / @Published boilerplate. Structured concurrency (async/await) everywhere, no DispatchQueue.

• FSEvents via a small GitWatcher that observes both the worktree and .git/HEAD, .git/index, .git/refs/, .git/FETCH_HEAD — debounced at the user-configurable latency. So pushing in Terminal updates the FinderGit badge within milliseconds.

• git status --porcelain=v2 under the hood. /usr/bin/git is called via Process with a parser for the machine-readable output. No libgit2, no reimplementing history — the real git binary is the source of truth.

• MarkdownUI for the Markdown preview. Pattern is extensible — same “interceptor” will take .css / .js / .swift with syntax highlighting in a future release.

• Sparkle for auto-updates, EdDSA-signed. See below.

• Personal Team signing, no Apple Developer Program ($99/year) required. That has implications for Gatekeeper — covered in the install section.

📦 Install

Requirements

• macOS 15 (Sequoia) or later

• Xcode Command Line Tools — FinderGit uses the system git binary, which on macOS is shipped as a stub. On a fresh Mac, run once:

  xcode-select --install
  sudo xcodebuild -license

Without these, every Git action inside FinderGit returns nonZeroExit(status: 89, …). This will be surfaced as a friendly dialog in a future release — for now, the Terminal workaround is a one-time setup.

Download

1. Grab the latest .dmg from the GitHub Release.

2. Open it and drag FinderGit into your Applications folder.

First launch — Gatekeeper

The app is signed with a free Personal Team, not with an Apple Developer ID. That means macOS Gatekeeper doesn’t know it and will block the first launch with a generic warning. The fix is the standard Mac dance:

1. Open Applications in Finder.

2. Right-click on FinderGit.app → Open.

3. In the confirmation popup, click Open again.

Done once — from then on the app launches normally, including auto-updates. No paid developer program is funding this; you’re trading a 5-second first-launch gesture for a free app.

🔄 Auto-updates

FinderGit ships with Sparkle. The app checks https://findergit.app/appcast.xml on launch and periodically; when a new version is available, you get the standard Sparkle alert with release notes. Each release DMG is signed with an EdDSA key — the public key ships inside the app, so Sparkle refuses to install an update it cannot verify. Even if my GitHub account were compromised tomorrow, an attacker couldn’t push a malicious update without my private signing key.

You can also trigger a check manually via the FinderGit → Check for Updates… menu item.

🗺 What’s next

The beta is functional, but plenty is already planned. Highlights of the public issue tracker:

• Syntax highlighting in Quick Look for code files (.swift, .js, .ts, .py, .css, .json, …) — the Markdown interceptor pattern, extended.

• Double-click a folder to navigate into it (drill-down, with a breadcrumb to go back).

• Branch creation, renaming, deletion, checkout from the UI.

• Stash management (save, pop, apply, drop).

• GitHub / GitLab / Bitbucket providers — list Issues and Pull Requests for the current repo. Preference for gh / glab CLI when installed; REST fallback with a token in Keychain.

• Kaleidoscope integration — jump from the inline diff to the full Kaleidoscope comparison, à la Tower.

• AI-generated commit messages — a built-in ✨ AI button next to the commit text field that drafts a message from your staged diff, no external tools or API keys required.

• Auto-fetch on an interval wired to the setting that already exists.

• Drag files from the tree to external apps — without breaking row selection, which is why it’s not in v0.1.0.

If any of these are on your wish list, say so — priorities move.

Download, feedback, sponsorship

Three things, in order of how much they help:

1. Download it and try it → latest release. Ten minutes with real repos tells you more than any blog post.

2. Tell me what works and what doesn’t → open an issue on the website repo. Bug reports, feature requests, workflow pain points — all welcome. Screenshots help.

3. If it turns into something you rely on, consider sponsoring → GitHub Sponsors. FinderGit is free, unsigned by Apple, and maintained in evenings and weekends. Sponsorship keeps the momentum.

Links

• 🌐 Website & docs: findergit.app

• 📥 Download: GitHub Release v0.1.0

• 🐛 Issues & feedback: github.com/gfazioli/findergit-website/issues

• ⭐ Sponsor: github.com/sponsors/gfazioli

Back in 1991, I started writing what would become a 5,800-line shared library for the Commodore Amiga — entirely in hand-optimized Motorola 68020 assembly. The first routines (string utilities in libraries.asm) were saved on July 29, 1991. Over the next four years, the library grew steadily — graphics in October 1994, file I/O and memory management in early 1995, the REI windowing system through mid-1995, and the last recorded update in September 1995.

That code sat on floppy disks and hard drives for decades. Now, in 2026, I’ve dusted it off, open-sourced it, and built a modern documentation site for it with Next.js.

Let me tell you the story.

What Is This?

The Amiga Assembly Library is a shared library (assembly.library) for AmigaOS, written between 1991 and 1995, that provides 50+ high-level utility functions in optimized 68020 assembly. Think of it as a “standard library” for Amiga developers — covering everything from memory management and file I/O to bitmap graphics, string manipulation, and even a full windowing abstraction.

It’s Public Domain — no copyright, no licensing, no restrictions. Use it however you want.

Why Assembly? And Why Now?

When I wrote this library in the early ‘90s, the Amiga was my daily machine. I was 19, obsessed with squeezing every cycle out of the 68020, and frustrated by rewriting the same utility routines for every project. So I did what any obsessive programmer would do — I built a shared library.

The Amiga community, remarkably, is still alive and well in 2026. People are building hardware accelerators, writing new software, and pushing these machines beyond what anyone thought possible. When you’re working with a 7 MHz 68000 (or a 50 MHz 68060 if you’re lucky), every cycle counts. Hand-optimized assembly isn’t a flex — it’s a necessity.

I decided to open-source the library and give it the documentation it always deserved — because if this code helped me build a dozen projects in the ‘90s, maybe it can help someone else today.

What’s Inside?

The library is organized into 8 modules:

Exec — Memory and linked list management. AllocNewList, AllocNode, FreeList, ReAllocVec, and RevertMem for reversing memory regions.

DOS — File operations. Load and Save files to/from memory, FileInfo for metadata, CheckSum for data integrity, LineInput for reading files line by line, and UnitInfo for volume information.

Graphics — Bitmap rendering. Allocate and clone RastPorts, manage bitplanes dynamically, draw boxes and frames, and render printf-style formatted text directly to graphics surfaces.

Libraries — String utilities and media parsing. Case conversion, character filtering, AIFF/IFF chunk parsing, and ILBM image decompression.

Math — Number conversions between decimal, hex, binary strings and values — in both directions.

Intuition & GadTools — UI widgets. Custom dialog requesters with buttons, gadget property control by name (not just ID), and attribute manipulation.

REI Interface — This is the crown jewel. A complete windowing abstraction that separates UI definitions from application logic. You define your window layout in a .rei binary file, load it at runtime, and interact with named gadgets through an event-driven message loop. Think of it as a declarative UI system — for a 1990s computer.

C Interface — Full C prototypes and SAS/C pragma declarations so you can call every function from C with type safety.

The Magic of Auto-Opening

One of my favorite design decisions: when you open assembly.library, it automatically opens and caches 12+ system libraries for you:

#include <assembly/assemblybase.h>
#include <clib/assembly_protos.h>

struct AssemblyBase *AssemblyBase;

void main(int argc, char **argv)
{
    if (AssemblyBase = (struct AssemblyBase *)
        OpenLibrary(ASSEMBLYNAME, ASSEMBLY_MINIMUM))
    {
        /* All sub-libraries are now available:
         * AssemblyBase->ab_DosBase
         * AssemblyBase->ab_IntuiBase
         * AssemblyBase->ab_GfxBase
         * AssemblyBase->ab_GadToolsBase
         * AssemblyBase->ab_AslBase
         * ... and 7 more
         */

        CloseLibrary((struct Library *)AssemblyBase);
    }
}

One OpenLibrary call and you get graphics.library, intuition.library, dos.library, gadtools.library, asl.library, icon.library, workbench.library, datatypes.library, locale.library, lowlevel.library, realtime.library — all ready to use. No boilerplate. No forgetting to close one of them.

The REI Windowing System

The REI (Runtime External Interface) module deserves its own section. Instead of hardcoding window layouts in your application code, you define them in .rei files — binary interface definitions that describe windows, gadgets, menus, and their relationships.

At runtime, you load the .rei file and interact with UI elements by name:

OpenREI          → Create the window from a .rei file
WaitREIMsg       → Event-driven message loop
FindAsmGadget    → Find a gadget by its name
SetREIAttrs      → Change window properties
LockREI/UnlockREI → Thread-safe access
CloseREI         → Clean shutdown

The project even includes a visual REI Editor (v0.52) — a GUI tool for designing .rei files without writing code.

This approach is philosophically similar to what modern frameworks do with JSX or XML layouts. But this was designed for AmigaOS, running on a 68020.

The Documentation Site

Here’s where old meets new. The library documentation lives at amiga-assembly-library.vercel.app — a modern site built with:

• Next.js 15 with Nextra for MDX-based docs

• Mantine 9 for the UI components

• TypeScript 6 for type safety

• Syntax-highlighted 68020 assembly source code

• Complete API reference for all 50+ functions

• Example programs with full source

• An Amiga Mode toggle that applies retro styling

Yes, a documentation site built with React and TypeScript — for a 68020 assembly library. The irony is not lost on me.

Getting Started

Requirements

• CPU: Motorola 68020 or higher

• OS: AmigaOS with KickStart 3.0 (V39) or later

• Assembler: HiSoft DevPac or compatible

• C Compiler (optional): SAS/C, DICE, or compatible

Installation

Copy assembly.library to your LIBS: directory. That’s it — it’s a standard AmigaOS shared library, available system-wide to all applications.

Assembly Usage

        move.l  _AbsExecBase,a6
        lea     AssemblyName(pc),a1
        moveq   #ASSEMBLY_MINIMUM,d0
        jsr     _LVOOpenLibrary(a6)
        move.l  d0,_AssemblyBase
        beq     .error

        ; Use library functions...
        move.l  _AssemblyBase,a6
        jsr     _LVOAllocNewList(a6)

        ; Clean up
        move.l  _AbsExecBase,a6
        move.l  _AssemblyBase,a1
        jsr     _LVOCloseLibrary(a6)

C Usage

Include the headers, open the library, and call functions directly:

#include <assembly/assemblybase.h>
#include <clib/assembly_protos.h>
#pragma libcall AssemblyBase AllocNewList 1e 00

struct List *myList = AllocNewList();

What’s in the Source?

The library is about 5,800 lines of hand-optimized 68020 assembly across 8 modules:

Plus C headers, pragma declarations, example programs (including a screen grabber, a window inspector, and the visual REI editor), and comprehensive documentation.

Why Open Source This?

Because the Amiga community thrives on sharing. The best Amiga software was always the stuff people passed around on floppy disks, uploaded to Aminet, and shared freely. This library is Public Domain — not MIT, not GPL, not Apache. Public Domain. Take it, use it, modify it, sell it, whatever you want. No attribution required.

If even one person building an Amiga project finds a useful function in here, it was worth it.

Links

• Documentation: amiga-assembly-library.vercel.app

• Source Code: github.com/gfazioli/Assembly-Library

• Documentation Source: github.com/gfazioli/amiga-assembly-library

This code is over 30 years old. I wrote it when I was a teenager, on a machine with 2 MB of RAM. And somehow it still works, still compiles, and still does exactly what it was designed to do. There’s something deeply satisfying about that.

If you’re into retro computing, 68k assembly, or just appreciate the craft of writing software for constrained platforms — I’d love to hear from you. Drop a star on the repo, open an issue, or just say hi.

The Amiga isn’t dead. It’s just warming up.

Introduction

Remember the first time you used macOS Time Machine? That moment when your desktop peeled away into an infinite corridor of snapshots, and navigating through time suddenly felt physical. That spatial metaphor stuck with us. mantine-depth-select brings that same sense of depth to any selection UI in your React application — pricing plans, document versions, onboarding steps, or anything else where browsing through stacked content beats scrolling a flat list. It’s a single component with zero extra dependencies, built entirely on Mantine 8’s Styles API.

What is DepthSelect?

DepthSelect renders an array of items as a 3D stack of cards. The frontmost card is the active selection; cards behind it recede with progressive scale, vertical offset, opacity, and blur — all configurable per-level. When the user navigates (via keyboard, mouse wheel, trackpad swipe, click, or arrow controls), cards animate smoothly in and out of the stack with CSS transitions.

The component follows Mantine’s compound component pattern. Built-in arrow controls appear by default, but you can hide them and wire up your own UI through controlled value/onChange. It supports both string and numeric values, loop mode, and respects prefers-reduced-motion.

✨ Key Features

3D Perspective Stack

Each card in the stack receives progressive CSS transforms based on its depth. Four props control the effect:

<DepthSelect
  data={items}
  scaleStep={0.1}       // scale reduction per level (default)
  translateYStep={30}    // vertical offset in px per level
  opacityStep={0.15}     // opacity reduction per level
  blurStep={1}           // blur in px per level
  w={400}
  h={300}
/>

Cards that exit the stack (when navigating forward) animate toward the viewer with a scale-up and fade-out. Cards entering from behind animate in from the deepest visible position.

Multi-Input Navigation

Every common input method works out of the box:

• Keyboard: ArrowUp/ArrowDown to step through, Home/End to jump

• Mouse wheel / Trackpad: Scroll over the component to navigate (page scroll is blocked automatically). Disable with withScrollNavigation={false}

• Touch: Vertical swipe gestures for mobile

• Click: Click the second card (depth 1) to advance

• Controls: Built-in arrow buttons with optional label

Built-in Controls with controlsProps

The default controls sit to the right of the stack. You can reposition them, add a label, set a fixed width, change alignment, or swap the icons — all through a single controlsProps object:

<DepthSelect
  data={items}
  controlsPosition="left"
  controlsProps={{
    w: 100,
    justify: 'end',
    labelFormatter: (item) => `Step ${item.value}`,
    upIcon: <IconChevronUp size={16} />,
    downIcon: <IconChevronDown size={16} />,
  }}
  w={400}
  h={300}
/>

Compound Component Pattern

Need full layout control? Set withControls={false} and use DepthSelect.Controls as a child:

<DepthSelect data={items} withControls={false} w={400} h={300}>
  <DepthSelect.Controls labelFormatter={(item) => String(item.value)} />
</DepthSelect>

Or skip the built-in controls entirely and build your own navigation with value and onChange.

Loop Mode

Enable loop to let navigation wrap from the last item back to the first (and vice versa). The arrow controls never show a disabled state in loop mode:

<DepthSelect data={items} loop w={400} h={200} />

🚀 Getting Started

npm install @gfazioli/mantine-depth-select

Import the styles at the root of your application:

import '@gfazioli/mantine-depth-select/styles.css';

Minimal example:

import { Card, Text } from '@mantine/core';
import { DepthSelect, DepthSelectItem } from '@gfazioli/mantine-depth-select';

const data: DepthSelectItem[] = [
  { value: 'first', view: <Card p="lg" withBorder h="100%"><Text>First item</Text></Card> },
  { value: 'second', view: <Card p="lg" withBorder h="100%"><Text>Second item</Text></Card> },
  { value: 'third', view: <Card p="lg" withBorder h="100%"><Text>Third item</Text></Card> },
];

function Demo() {
  return <DepthSelect data={data} w={400} h={200} />;
}

The w and h props define the area where cards live. Cards should use h="100%" to fill the available height.

Props & API

DepthSelect

• data — DepthSelectItem[] — Array of { value, view } objects. value can be string or number, view is any ReactNode

• value / defaultValue / onChange — Standard controlled/uncontrolled pattern

• w / h — Dimensions of the card area (passed to the inner stack container)

• visibleCards — Number of cards visible in the stack (default: 4)

• withControls — Show built-in arrow controls (default: true)

• controlsPosition — "right" (default) or "left"

• controlsProps — All DepthSelectControlsProps passed to the built-in controls

• loop — Enable wrap-around navigation (default: false)

• withScrollNavigation — Enable mouse wheel / trackpad navigation (default: true)

• transitionDuration — Animation duration in ms (default: 400)

• scaleStep / translateYStep / opacityStep / blurStep — Per-level depth effect parameters

DepthSelect.Controls

• labelFormatter — (item: DepthSelectItem) => ReactNode — Custom label between arrows

• upIcon / downIcon — Custom icons for the arrow buttons

• justify — Vertical alignment: "start", "center" (default), "end"

• Plus all Mantine BoxProps (w, h, style, etc.)

🎨 Styles API

Selectors: root, stack, card, controls, controlUp, controlDown, controlLabel

Data attributes:

• data-active — Frontmost (selected) card

• data-depth="N" — Card depth level (0 = front)

• data-exited — Card that has animated out

• data-disabled — Disabled control button

• data-controls-position — "right" or "left" on root

CSS variables: --ds-transition-duration, --ds-scale-step, --ds-translate-y-step, --ds-opacity-step, --ds-blur-step, --ds-visible-cards

⚡ Performance

• Render window: Only activeIndex - 1 through activeIndex + visibleCards + 1 are in the DOM. A dataset of 100 items renders ~6 nodes

• Memoized styles: Card CSS is computed once per navigation change via useMemo

• Targeted will-change: Only visible cards get GPU layer promotion; hidden cards use will-change: auto

• Non-passive wheel listener: Blocks page scroll without layout thrashing

• prefers-reduced-motion: Transitions are disabled automatically for users who prefer reduced motion

Live Demo & Documentation

Explore interactive demos — including a configurator with live props, rich card examples, pricing plan selector, version history browser, onboarding wizard, and more:

gfazioli.github.io/mantine-depth-select

Links

• 📦 npm: @gfazioli/mantine-depth-select

• 📖 Docs: gfazioli.github.io/mantine-depth-select

• 🔗 GitHub: github.com/gfazioli/mantine-depth-select

• 🧩 Mantine Extensions: mantine-extensions.vercel.app

Introduction

Version 1.0.0 of @gfazioli/mantine-border-animate is a major release that reimagines how animated borders work. The beam effect — the heart of the component — now ships with two distinct rendering modes, letting you choose between pixel-perfect border tracing and smooth conic rotation. Combined with new multi-color gradients, hover pause, custom easing, and built-in accessibility, this release makes animated borders more flexible, more beautiful, and easier to use than ever.

What’s New

Two Beam Rendering Modes

The biggest addition in v1.0 is the beamMode prop, which lets you choose how the beam effect is rendered:

Path mode (beamMode="path", the new default) uses CSS offset-path to move a radial-gradient circle along the component’s border. The beam maintains a uniform size at every position and travels at constant speed along the perimeter. This is the best choice for most UI elements.

<BorderAnimate beamMode="path" size="md" duration={5}>
  <Card>Your content</Card>
</BorderAnimate>

Conic mode (beamMode="conic") uses a rotating conic-gradient wedge animated via CSS @property. The rotation is buttery smooth, and the size prop controls the angular spread of the wedge (from a tight 18-degree spotlight at xs to a full 180-degree sweep at xl). It works best on circular or near-square elements.

<BorderAnimate beamMode="conic" size="lg" duration={3}>
  <Avatar radius="100%" />
</BorderAnimate>

Multi-Color Gradients with colorStops

Move beyond two-color gradients. The new colorStops prop gives you full control over the beam’s colors:

<BorderAnimate
  colorStops={[
    { color: 'transparent', position: 0 },
    { color: 'green', position: 20 },
    { color: 'cyan', position: 40 },
    { color: 'yellow', position: 60 },
    { color: 'red', position: 80 },
    { color: 'transparent', position: 100 },
  ]}
>
  <Paper>Multi-color beam</Paper>
</BorderAnimate>

colorStops works with both beam modes:

• Path mode generates a radial-gradient with concentric color rings

• Conic mode generates a custom conic-gradient — use transparent stops for beam/wedge effects, or fill the entire circle for a rotating rainbow border

Pause on Hover

Interactive elements often need the animation to pause during user interaction. The new pauseOnHover prop does exactly that — using pure CSS animation-play-state with zero JavaScript overhead:

<BorderAnimate pauseOnHover>
  <Button>Hover me to pause</Button>
</BorderAnimate>

Custom Timing Functions

Fine-tune animation feel with timingFunction. By default, beam uses linear and glow/pulse use ease-in-out, but you can override with any CSS timing function:

<BorderAnimate timingFunction="ease-in-out" />
<BorderAnimate timingFunction="cubic-bezier(0.4, 0, 0.2, 1)" />
<BorderAnimate timingFunction="steps(8)" />  {/* retro pixel effect */}

Accessibility Out of the Box

BorderAnimate now respects prefers-reduced-motion automatically. Users who have enabled “Reduce motion” in their OS settings will see no animations — no configuration needed, no extra props. It just works.

Breaking Changes

This is a major release with several breaking changes. Here’s what you need to update:

gradient variant removed

The gradient variant is gone. Use beamMode="conic" with full colorStops instead:

// v0.x
<BorderAnimate variant="gradient" colorFrom="red" colorTo="blue" />

// v1.0
<BorderAnimate
  beamMode="conic"
  colorStops={[
    { color: 'red', position: 0 },
    { color: 'blue', position: 50 },
    { color: 'red', position: 100 },
  ]}
/>

opacity renamed to borderOpacity

The old opacity prop conflicted with the CSS opacity property inherited from Mantine’s BoxProps. It’s now borderOpacity:

// v0.x
<BorderAnimate opacity={0.5} />

// v1.0
<BorderAnimate borderOpacity={0.5} />

anchor and count props removed

Both props have been removed with no direct replacement. Simply remove them from your components.

size semantics changed

The size prop now behaves differently depending on beamMode:

• Path mode: still pixel-based (xs=64px to xl=480px) — same as v0.x

• Conic mode: angular spread of the wedge (xs=18 degrees to xl=180 degrees)

BorderAnimateVariant type updated

The type changed from 'beam' | 'glow' | 'gradient' | 'pulse' to 'beam' | 'glow' | 'pulse'. Update any type assertions or switch statements in your code.

Improvements

• Glow z-index fix — the glow variant now correctly renders behind content, preventing the overlay from obscuring text

• Accurate demos — all documentation demos now show code that exactly matches the rendered output

• New exported types — BorderAnimateBeamMode, BorderAnimateColorStop, and BorderAnimateVariant are now properly exported for consumers

Getting Started

Install or update:

npm install @gfazioli/mantine-border-animate@1

Import styles at the root of your application:

import '@gfazioli/mantine-border-animate/styles.css';

Basic usage:

import { BorderAnimate } from '@gfazioli/mantine-border-animate';

function Demo() {
  return (
    <BorderAnimate>
      <Paper withBorder p="md" radius="md">
        Your content with an animated border
      </Paper>
    </BorderAnimate>
  );
}

Links

• npm package

• Documentation and Demos

• GitHub Repository

• Mantine Extensions Hub

Introduction

Version 3.0.0 of @gfazioli/mantine-rings-progress is a ground-up rewrite. The internal fork of Mantine’s RingProgress has been completely removed, replaced by the native component from @mantine/core. This eliminates ~600 lines of custom SVG and animation code while adding 10 new features that bring the component closer to the Apple Watch activity rings experience.

Whether you’re building fitness dashboards, goal trackers, or compact data visualizations, this release gives you the tools to make your rings shine — literally.

✨ New Features

Per-ring Customization

Each ring can now override global props individually. Mix thick and thin rings, toggle round caps per ring, or set a custom background track color:

const rings = [
  { value: 40, color: 'cyan', thickness: 18 },
  { value: 65, color: 'red', thickness: 10, roundCaps: false },
  { value: 90, color: '#f90', thickness: 6, rootColor: 'gray' },
];

<RingsProgress size={180} rings={rings} />

Supported per-ring overrides: thickness, roundCaps, rootColor, glowIntensity, glowColor, ariaLabel, tooltip.

Staggered Entrance Animation

Instead of all rings appearing at once, use staggerDelay to animate them one after another — outer ring first, inner ring last:

<RingsProgress animate staggerDelay={300} transitionDuration={1000} rings={rings} />

Glow / Neon Effect

Add a neon-like glow that follows the ring shape using CSS drop-shadow. Set glow={true} for a default 6px blur, or pass a custom radius. Each ring can override the effect with glowIntensity and glowColor:

<RingsProgress glow={8} rings={rings} />

Pulse on Completion

When a ring reaches 100%, trigger a satisfying scale + brightness pulse animation — inspired by the Apple Watch ring closure celebration:

<RingsProgress pulseOnComplete rings={rings} />

The animation respects prefers-reduced-motion and uses a data-pulsing attribute for CSS customization.

onRingComplete Callback

Run custom logic when a ring crosses the 100% threshold:

<RingsProgress
  onRingComplete={(index, ring) => {
    showNotification({ message: `${ring.color} ring completed!` });
  }}
  rings={rings}
/>

Start Angle & Direction

Control where rings start filling and in which direction:

<RingsProgress startAngle={90} direction="counterclockwise" rings={rings} />

startAngle={0} is the 12 o’clock position (default). Direction accepts 'clockwise' or 'counterclockwise'.

Unified Tooltip

The new withTooltip prop shows a single, chart-style tooltip with color swatches for all rings — no more overlapping per-ring tooltips:

<RingsProgress
  withTooltip
  rings={[
    { value: 20, color: 'green', tooltip: 'Fitness – 40 Gb' },
    { value: 80, color: 'blue', tooltip: 'Running – 50 min' },
  ]}
/>

If tooltip is not set on a ring, the percentage value is shown automatically.

Accessibility

The component is now fully accessible out of the box:

• Root element: role="group" with aria-label="Progress rings" (overridable)

• Each ring: role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax

• Per-ring ariaLabel for custom screen reader text

• Automatic prefers-reduced-motion support via useReducedMotion

💥 Breaking Changes

This is a major release with breaking changes. Here’s what you need to update:

Animation props renamed/removed

  <RingsProgress
-   animationDuration={1000}
-   animationSteps={60}
-   animationTimingFunction="ease"
+   transitionDuration={1000}
    animate
    rings={rings}
  />

• animationDuration → transitionDuration (default changed from 1000 to 0)

• animationSteps — removed (CSS transitions replaced JS setInterval)

• animationTimingFunction — removed (CSS uses ease by default)

Tip: If you only use animate for entrance animation, you can omit transitionDuration entirely — the component auto-applies 1000ms during the entrance phase.

Ring type changed

- import { RingProgressSection } from '@gfazioli/mantine-rings-progress';
- const rings: RingProgressSection[] = [...]
+ import { RingsProgressRing } from '@gfazioli/mantine-rings-progress';
+ const rings: RingsProgressRing[] = [...]

The base properties (value, color, tooltip) remain the same, so existing code that only uses those will work without changes.

Props interface

RingsProgressProps now extends BoxProps + StylesApiProps + ElementProps<'div'> (standard Mantine pattern) instead of the forked RingProgressProps. All common props (size, thickness, roundCaps, label, animate) are still available.

Styles API

A new 'label' style name was added. Style names are now 'root' | 'ring' | 'label'.

🔧 Improvements

Drastically simplified internals

The entire forked RingProgress/ directory (~600 lines) has been deleted. The component now delegates entirely to Mantine’s native RingProgress, ensuring better compatibility with future Mantine releases and smaller bundle size.

Smart entrance animation

The component auto-applies 1000ms transition during the entrance phase only. After all rings mount, transitionDuration reverts to 0 — preventing geometry changes (like resizing) from triggering unwanted CSS transitions.

Interactive demos

The documentation now includes replay buttons for animation demos, interactive sliders for the pulse demo, and a configurator with all new props.

🐛 Bug Fixes

• Label centering: Fixed the label being offset from center — now rendered as a separate overlay

• Debug styles: Removed hardcoded color: 'red' on the label

• Theme overrides: Fixed useProps('Rings', ...) → useProps('RingsProgress', ...)

• Countdown demo: Added transitionDuration={0} to prevent CSS transitions from interfering with rapid updates

Getting Started

npm install @gfazioli/mantine-rings-progress@3

Import styles at the root of your application:

import '@gfazioli/mantine-rings-progress/styles.css';

Basic usage with the new features:

import { RingsProgress } from '@gfazioli/mantine-rings-progress';

function ActivityRings() {
  const rings = [
    { value: 75, color: 'green', tooltip: 'Move' },
    { value: 50, color: 'blue', tooltip: 'Exercise' },
    { value: 90, color: 'orange', tooltip: 'Stand' },
  ];

  return (
    <RingsProgress
      size={180}
      rings={rings}
      animate
      staggerDelay={300}
      glow={6}
      withTooltip
      pulseOnComplete
      onRingComplete={(i) => console.log(`Ring ${i} done!`)}
    />
  );
}

Links

• 📦 npm package

• 📖 Documentation & Demos

• 🔗 GitHub Repository

• 🧩 Mantine Extensions Hub

Introduction

The Mantine QR Code component has been completely rebuilt from the ground up. What was previously an LED-style indicator has been transformed into a fully functional QR code generator that produces real, scannable codes from any string input. It renders pure SVG for crisp output at any resolution, follows Mantine’s Styles API conventions, and ships with a dedicated download hook for exporting to SVG, PNG, JPEG, or WebP.

✨ New Features

Real QR Code Generation

The component now encodes actual QR code data using the qrcode library. Pass any string — a URL, WiFi credentials, vCard, plain text — and get a scannable QR code rendered as optimized SVG.

import { QRCode } from '@gfazioli/mantine-qr-code';

function Demo() {
  return <QRCode value="https://mantine.dev" />;
}

The value prop is the only required prop. Everything else has sensible defaults.

Dot Styles

Control the appearance of data modules with the dotStyle prop. Three built-in styles are available:

<QRCode value="https://mantine.dev" dotStyle="square" />   {/* Default */}
<QRCode value="https://mantine.dev" dotStyle="rounded" />
<QRCode value="https://mantine.dev" dotStyle="dots" />

Each style generates a single combined <path> element for all data modules, keeping the DOM lightweight even for dense QR codes.

Corner Styles

The three finder patterns (the large squares in the corners) can be styled independently with cornerStyle:

<QRCode value="https://mantine.dev" cornerStyle="square" />   {/* Default */}
<QRCode value="https://mantine.dev" cornerStyle="rounded" />
<QRCode value="https://mantine.dev" cornerStyle="dots" />

Mix and match dot and corner styles for unique designs:

<QRCode
  value="https://mantine.dev"
  dotStyle="dots"
  cornerStyle="rounded"
  color="violet"
/>

Image Overlay with Excavation

Add a logo or image at the center of the QR code. The component automatically removes (”excavates”) the data modules behind the image to keep the code scannable:

<QRCode
  value="https://mantine.dev"
  size="xl"
  image="https://example.com/logo.png"
  imageSize={0.2}
  imageRadius="md"
  imagePadding={1}
  imageExcavate={true}
  errorCorrectionLevel="H"
/>

Tip: Use errorCorrectionLevel="H" when overlaying images — it provides 30% error correction, ensuring the code remains scannable even with a portion covered.

Error Correction Levels

Four standard error correction levels are supported via the errorCorrectionLevel prop:

useQRCodeDownload Hook

A dedicated hook makes it easy to export the QR code in multiple formats:

import { QRCode, useQRCodeDownload } from '@gfazioli/mantine-qr-code';

function Demo() {
  const { ref, download, getDataUrl } = useQRCodeDownload({
    fileName: 'my-qr-code',
    scale: 4,          // 4x resolution for raster formats
  });

  return (
    <>
      <QRCode ref={ref} value="https://mantine.dev" />
      <button onClick={() => download({ format: 'svg' })}>Download SVG</button>
      <button onClick={() => download({ format: 'png' })}>Download PNG</button>
    </>
  );
}

Supported formats: svg, png, jpeg, webp. The getDataUrl function returns a data URL — useful for preview thumbnails or embedding.

Theme-Aware Colors

Both foreground and background colors integrate with the Mantine theme:

<QRCode value="https://mantine.dev" color="blue" background="gray.1" />
<QRCode value="https://mantine.dev" color="white" background="dark" />
<QRCode value="https://mantine.dev" color="teal" background="transparent" />

Full Styles API

The component exposes 8 style selectors for granular customization:

CSS Variables

Size presets: xs (80px), sm (120px), md (160px), lg (200px), xl (256px).

🔧 Improvements

• SVG Accessibility: The SVG element includes role="img" and an aria-label derived from the encoded value.

• Optimized Rendering: All data modules are combined into a single <path> element, keeping the DOM minimal regardless of QR code density.

• Memoized Computation: QR matrix generation and SVG path building are wrapped in useMemo — re-computation only happens when relevant props change.

• SSR Compatible: No browser-only APIs (window, document) are used during rendering. The download hook uses browser APIs only when explicitly called.

📖 Complete Props Reference

interface QRCodeBaseProps {
  value: string;                              // Required — data to encode
  size?: MantineSize | string | number;       // Default: 'md'
  radius?: MantineRadius | string | number;   // Container border radius
  color?: MantineColor;                       // Default: 'dark'
  background?: MantineColor | 'transparent';  // Default: 'white'
  errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H'; // Default: 'M'
  quietZone?: number;                         // Default: 1
  dotStyle?: 'square' | 'rounded' | 'dots';  // Default: 'square'
  cornerStyle?: 'square' | 'rounded' | 'dots'; // Default: 'square'
  image?: string;                             // Center image URL
  imageSize?: number;                         // 0–1, default: 0.2
  imageRadius?: MantineRadius | string | number;
  imagePadding?: number;                      // Default: 1
  imageExcavate?: boolean;                    // Default: true
}

Getting Started

Install the package:

npm install @gfazioli/mantine-qr-code

Import styles at the root of your application:

import '@gfazioli/mantine-qr-code/styles.css';

Use the component:

import { QRCode } from '@gfazioli/mantine-qr-code';

function App() {
  return (
    <QRCode
      value="https://mantine.dev"
      size="lg"
      dotStyle="rounded"
      cornerStyle="rounded"
      color="blue"
    />
  );
}

Use Cases

{/* URL */}
<QRCode value="https://mantine.dev" />

{/* WiFi credentials */}
<QRCode value="WIFI:T:WPA;S:MyNetwork;P:MyPassword;;" />

{/* vCard contact */}
<QRCode value="BEGIN:VCARD\nVERSION:3.0\nFN:John Doe\nTEL:+1234567890\nEND:VCARD" />

Links

• 📦 npm package

• 📖 Documentation & Demos

• 🔗 GitHub Repository

• 🧩 More Mantine Extensions

Introduction

Mantine Scene is a brand-new composable background component for React that lets you build atmospheric, animated backgrounds by stacking visual layers. Think of it as a stage director for your UI — you compose the mood by combining gradients, glow effects, dot grids, star fields, snowfall, auroras, and more, all with first-class Mantine theme integration, responsive props, and accessibility baked in from day one.

This 1.0.0 release ships with 10 composable sub-components, full interactive mouse-tracking support, GPU-accelerated animations, and a complete documentation site with live configurators for every layer type.

What’s New in 1.0.0

The Scene Component

The root Scene component acts as a container for all visual layers. It supports fullscreen mode, interactive mouse tracking, and respects prefers-reduced-motion out of the box.

import { Scene } from '@gfazioli/mantine-scene';

function HeroBackground() {
  return (
    <Scene fullscreen interactive>
      <Scene.Gradient from="violet" to="transparent" animate />
      <Scene.Glow color="blue" size={300} />
      <Scene.StarField count={80} twinkle />
      <Scene.Noise opacity={0.03} />
    </Scene>
  );
}

Root Props:

10 Composable Sub-Components

Every sub-component is a visual layer you can freely compose. Layer order follows DOM order — the last child renders on top.

✨ Scene.Gradient

Radial, linear, or conic gradients with optional rotate or pulse animation. Supports interactive mouse tracking for radial/conic types.

<Scene.Gradient
  type="radial"
  from="violet"
  to="transparent"
  fromOpacity={0.2}
  animate
  animationType="rotate"
  duration={20}
/>

✨ Scene.Glow

Floating, animated glow blobs. Choose between float, pulse, or breathe animation styles. Supports responsive size and blur props and interactive mouse tracking.

<Scene.Glow
  color="cyan"
  size={{ base: 200, md: 400 }}
  blur={{ base: 80, md: 120 }}
  opacity={0.5}
  animate
  animationType="float"
  driftX="30px"
  driftY="20px"
/>

✨ Scene.DotGrid

Repeating dot patterns with optional stagger (honeycomb) layout, fade masks, and twinkle animation. Supports responsive spacing.

<Scene.DotGrid
  color="gray"
  spacing={{ base: 16, md: 24 }}
  stagger
  fade="radial"
  animate
/>

✨ Scene.Mesh

Multi-stop radial gradient overlay simulating a mesh gradient. Supports hue-rotate animation and blend modes.

<Scene.Mesh
  stops={[
    { color: 'violet', position: '20% 30%', spread: 50 },
    { color: 'pink', position: '80% 20%', spread: 40 },
    { color: 'blue', position: '50% 80%', spread: 60 },
  ]}
  animate
  blend="screen"
/>

✨ Scene.Noise

SVG-based film grain texture. Add subtle texture to any background with configurable grain, seed, and color tint.

<Scene.Noise opacity={0.03} grain={0.65} type="fractalNoise" tint="blue" />

✨ Scene.StarField

CSS-only star field with deterministic PRNG positioning and twinkle animation across 3 staggered layers. Supports responsive count.

<Scene.StarField count={{ base: 50, md: 100 }} twinkle duration={3} seed={42} />

✨ Scene.StarWarp

Hyperspace warp-speed effect with configurable focal point, direction, and streak trails. Supports responsive count and interactive mouse tracking for the focal point.

<Scene.StarWarp
  count={100}
  speed={1.5}
  direction="out"
  trail
  color="white"
/>

✨ Scene.ShootingStar

Animated shooting star trails at configurable angles and intervals. Multiple lanes with randomized timing for a natural feel.

<Scene.ShootingStar
  count={3}
  angle={215}
  trailLength={80}
  speed={1}
  minInterval={3}
  maxInterval={8}
/>

✨ Scene.Snow

Falling snowflakes with horizontal drift and wind control. Supports responsive count for performance-conscious responsive designs.

<Scene.Snow
  count={{ base: 30, md: 50 }}
  speed={1}
  drift={30}
  wind={0.2}
/>

✨ Scene.Aurora

Shimmering aurora borealis bands with wave animation. Configurable band count, position, and colors.

<Scene.Aurora
  colors={['green', 'teal', 'cyan']}
  bands={3}
  position="top"
  opacity={0.3}
  blur={60}
/>

Key Features

🎨 Full Mantine Theme Integration

Every color prop accepts MantineColor values, so your backgrounds stay consistent with your theme. Shade overrides are available on components like Glow and DotGrid.

📱 Responsive Props

Key numeric props support Mantine’s responsive object syntax. This means you can adjust visual density based on breakpoint — fewer stars on mobile, larger glows on desktop:

<Scene.StarField count={{ base: 40, sm: 60, md: 100 }} />
<Scene.Glow size={{ base: 150, md: 400 }} blur={{ base: 60, md: 120 }} />

Responsive props are available on: Glow (size, blur), DotGrid (spacing), StarField (count), StarWarp (count), Snow (count).

🖱️ Interactive Mouse Tracking

Set interactive on the root Scene to enable cursor-driven effects:

• Glow — blob position follows the mouse

• Gradient — radial/conic center follows the mouse

• StarWarp — focal point tracks the mouse

The interactiveEasing prop controls how smoothly elements follow the cursor (0 = sluggish, 1 = instant). Components gracefully fall back to their default positions when the mouse leaves.

♿ Accessibility

• The root component renders with aria-hidden="true" — it’s purely decorative

• reducedMotion="auto" respects prefers-reduced-motion by default

• Set reducedMotion="always" to disable all animations, or "never" to force them on

⚡ Performance

• All animations use GPU-accelerated CSS (transform, opacity) — no JavaScript animation loops

• Deterministic PRNG (seeded) for StarField, StarWarp, ShootingStar, and Snow ensures reproducible layouts without runtime randomness

• StarWarp caps at 200 elements; Snow recommends ~80 max for smooth performance

• Responsive count props let you reduce particle counts on lower-powered devices

🎛️ Styles API

Full Mantine Styles API support. Override styles for any part of any sub-component using classNames, styles, or unstyled props. CSS variables are exposed for all dynamic values (e.g., --scene-glow-size, --scene-aurora-duration).

Putting It All Together

Here’s a complete example combining multiple layers into a rich hero background:

import { Scene } from '@gfazioli/mantine-scene';

function CosmicHero() {
  return (
    <Scene fullscreen interactive interactiveEasing={0.08}>
      {/* Base gradient */}
      <Scene.Gradient type="radial" from="indigo" fromOpacity={0.2} animate />

      {/* Mesh overlay */}
      <Scene.Mesh
        stops={[
          { color: 'violet', position: '25% 25%' },
          { color: 'blue', position: '75% 75%' },
        ]}
        blend="screen"
        opacity={0.6}
      />

      {/* Floating glows */}
      <Scene.Glow color="cyan" size={350} top="20%" left="30%" />
      <Scene.Glow color="violet" size={250} top="60%" left="70%" delay={2} />

      {/* Stars */}
      <Scene.StarField count={{ base: 60, md: 120 }} twinkle />
      <Scene.ShootingStar count={2} />

      {/* Subtle texture */}
      <Scene.Noise opacity={0.02} />
    </Scene>
  );
}

Getting Started

Installation

npm install @gfazioli/mantine-scene
# or
yarn add @gfazioli/mantine-scene

Import Styles

Add the styles import to your app entry point:

import '@gfazioli/mantine-scene/styles.css';

Or use the @layer variant for CSS cascade control:

import '@gfazioli/mantine-scene/styles.layer.css';

Requirements

• React 18 or 19

• @mantine/core >= 7.0.0

• @mantine/hooks >= 7.0.0

Links

• 📦 npm package

• 📖 Documentation & Live Demos

• 🔗 GitHub Repository

• 🌐 Mantine Extensions Hub

Introduction

Version 3.0.0 of @gfazioli/mantine-text-animate is the biggest release yet. It doubles the number of compound components from five to ten, introduces powerful new animation modes like looping and viewport-triggered animations, and brings first-class accessibility with prefers-reduced-motion support across every component. Whether you need a retro airport departure board, a smooth text morphing transition, or an animated gradient heading, this release has you covered.

What’s New

Five New Compound Components

TextAnimate.Gradient — Animated Gradient Text

Apply an animated gradient effect to any text, with full support for Mantine theme colors. Choose from 8 animation directions and pass your own color palette.

<TextAnimate.Gradient colors={['blue', 'cyan', 'green']} speed={1.5} direction="to-right">
  Gradient Text
</TextAnimate.Gradient>

The component resolves Mantine color tokens like 'blue.5' via parseThemeColor, so your gradients stay consistent with your theme.

TextAnimate.Highlight — Animated Highlighter Marker

A CSS-only highlighter effect that sweeps a colored marker across your text. No JavaScript animation loop needed — it’s all CSS keyframes.

<TextAnimate.Highlight color="yellow" highlightHeight="40%" speed={1}>
  Important Text
</TextAnimate.Highlight>

TextAnimate.SplitFlap — Airport Departure Board

Inspired by the classic Solari boards found in train stations and airports, this component flips through a character set with 3D CSS perspective transforms until each character reaches its target.

<TextAnimate.SplitFlap value="DEPARTING 14:30" speed={1.5} />

Each character animates independently with configurable stagger timing. Customize the characterSet, flipDuration, radius, and dividerColor. The companion useSplitFlap hook gives you full programmatic control.

TextAnimate.Morphing — Fluid Text Transitions

Smoothly morph between two strings. The component uses the Longest Common Subsequence (LCS) algorithm to identify shared characters — they stay in place while new characters fade in and old ones fade out.

const [text, setText] = useState('Hello World');

<TextAnimate.Morphing value={text} speed={1} />
<Button onClick={() => setText('Hello Mantine')}>Change</Button>

TextAnimate.RotatingText — Text Carousel

Cycle through an array of strings with animated transitions. Six built-in transition styles: slideUp, slideDown, fade, blur, blurUp, blurDown.

<Text>
  I speak{' '}
  <TextAnimate.RotatingText
    values={['English', 'French', 'Italian', 'Spanish']}
    animation="blurUp"
    interval={3000}
  />
</Text>

The component renders inline (<span>) so it flows naturally within a sentence. The useRotatingText hook is available for headless usage.

Loop Mode

The base TextAnimate component now supports continuous looping. Set animate="loop" and the animation will cycle: animate in, pause, animate out, pause, and repeat.

<TextAnimate animate="loop" animation="blurDown" loopDelay={2000}>
  This text loops forever
</TextAnimate>

The loopDelay prop controls the pause between phases (default: 2000ms).

Viewport-Triggered Animations

Delay animations until the element scrolls into view using IntersectionObserver:

<TextAnimate trigger="inView" triggerOptions={{ threshold: 0.5 }}>
  I animate when you can see me
</TextAnimate>

Three trigger modes are available: "mount" (default, same as v2), "inView", and "manual" for full programmatic control.

The useTextAnimate Hook

A new hook for controlling TextAnimate from the outside:

const { animate, setAnimate, replay, isAnimating, key, onAnimationComplete } = useTextAnimate();

<TextAnimate animate={animate} key={key} onAnimationComplete={onAnimationComplete}>
  Controlled animation
</TextAnimate>

<Button onClick={replay}>Replay</Button>
<Button onClick={() => setAnimate('out')}>Animate Out</Button>

onAnimationComplete Callback

Unlike onAnimationEnd (which fires per segment), onAnimationComplete fires once when all segments have finished animating — essential for orchestrating sequential animations.

<TextAnimate
  by="character"
  onAnimationComplete={(direction) => {
    if (direction === 'in') showNextElement();
  }}
>
  Staggered characters
</TextAnimate>

TextTicker Scramble Mode

The existing TextTicker component gains a new “hacker terminal” mode. Set scrambleDuration to make each character cycle through random characters for a fixed duration before settling on the target.

<TextAnimate.TextTicker
  value="ACCESS GRANTED"
  scrambleDuration={800}
  staggerDelay={50}
  revealDirection="left-to-right"
/>

Typewriter Enhancements

Three new capabilities for the Typewriter component:

Sound effects — Synthesized mechanical keyboard clicks via Web Audio API:

<TextAnimate.Typewriter value="Click clack..." withSound soundVolume={0.3} />

Per-character callbacks — React to each character as it’s typed:

<TextAnimate.Typewriter
  value="Hello"
  onCharType={(char, index) => console.log(`Typed: ${char}`)}
/>

Custom pauses — Insert dramatic pauses at specific character positions:

<TextAnimate.Typewriter
  value="Hello, world!"
  pauseAt={{ 5: 1000, 6: 500 }}  // Pause 1s after comma, 500ms after space
/>

NumberTicker Custom Formatting

Override the default Intl.NumberFormat with your own formatting function:

<TextAnimate.NumberTicker
  value={1234.56}
  formatValue={(v) => `$${v.toFixed(2)}`}
/>

Breaking Changes

speed Prop Semantics Standardized

The speed prop now works as a multiplier on all components: speed={1} is normal speed, speed={2} is twice as fast. This is a breaking change for Typewriter, Gradient, and Spinner, which previously used different units.

// Before (v2)
<TextAnimate.Typewriter value="Hello" speed={0.03} />
<TextAnimate.Gradient speed={3}>Hello</TextAnimate.Gradient>
<TextAnimate.Spinner speed={10}>Hello</TextAnimate.Spinner>

// After (v3)
<TextAnimate.Typewriter value="Hello" speed={1} />
<TextAnimate.Gradient speed={1}>Hello</TextAnimate.Gradient>
<TextAnimate.Spinner speed={2}>Hello</TextAnimate.Spinner>

Spinner Children Type Expanded

Spinner now accepts string | ReactNode[]. If you relied on TypeScript enforcing children: string, the type is now wider. Existing string usage works identically.

Improvements

Full Accessibility Support

Every component now respects prefers-reduced-motion:

• TextAnimate detects reduced motion in JS to properly fire onAnimationComplete and advance loop phases even when CSS animations are disabled

• Typewriter shows the final text immediately

• NumberTicker shows the target value instantly

• SplitFlap displays the target text without flipping

ARIA attributes have been added throughout: aria-live="polite" on TextAnimate hidden/static states, automatic role="img" and aria-label on Spinner for string children.

Safety and Robustness

• All speed divisions are clamped to a minimum of 0.1, preventing Infinity or NaN timeouts

• AudioContext creation/resume is wrapped in try/catch for restricted environments

• Loop timer accumulation is prevented by clearing previous timers

• NumberTicker uses epsilon-based float comparison to reliably detect animation completion

Test Coverage

Expanded from 1 test to 42 tests across 5 suites, covering rendering, props, ARIA attributes, animation directions, text splitting, trigger modes, and more.

Getting Started

# Install or update
npm install @gfazioli/mantine-text-animate@3

# or with yarn
yarn add @gfazioli/mantine-text-animate@3

All new components are accessed as compound components on TextAnimate:

import { TextAnimate } from '@gfazioli/mantine-text-animate';

// New components
<TextAnimate.Gradient>...</TextAnimate.Gradient>
<TextAnimate.Highlight>...</TextAnimate.Highlight>
<TextAnimate.SplitFlap value="..." />
<TextAnimate.Morphing value="..." />
<TextAnimate.RotatingText values={[...]} />

Hooks are exported directly:

import {
  useTextAnimate,
  useSplitFlap,
  useMorphing,
  useRotatingText,
} from '@gfazioli/mantine-text-animate';

Links

• npm: npmjs.com/package/@gfazioli/mantine-text-animate

• Documentation: gfazioli.github.io/mantine-text-animate

• GitHub: github.com/gfazioli/mantine-text-animate

• Mantine Extensions Hub: mantine-extensions.vercel.app

Introduction

Version 3.0.0 of @gfazioli/mantine-onboarding-tour is a major overhaul that makes guided tours feel polished on every screen size. The responsive system has been completely redesigned around Mantine’s useMatches() pattern, transitions between steps are now seamless, and the API is cleaner and fully type-safe. If you’re building onboarding experiences with Mantine 8, this release is a significant step forward.

What’s New

Responsive Popover Positioning

The old responsive / mobileBreakpoint / mobilePosition toggle has been replaced by something far more powerful: responsive objects on popover props. The position, offset, width, and arrowSize properties now accept breakpoint-to-value maps — the same pattern Mantine uses throughout its ecosystem.

<OnboardingTour
  focusRevealProps={{
    popoverProps: {
      position: { base: 'bottom', sm: 'right' },
      offset: { base: 8, sm: -4 },
      width: { base: 'target', md: 350 },
    },
  }}
/>

Each step can also define its own responsive overrides:

const steps: OnboardingTourStep[] = [
  {
    id: 'sidebar',
    title: 'Sidebar Navigation',
    content: 'Explore the menu items here.',
    focusRevealProps: {
      popoverProps: {
        position: { base: 'bottom', sm: 'right', lg: 'left' },
      },
    },
  },
];

On top of that, Floating UI shift and flip middlewares are now enabled by default — popovers stay within the viewport automatically, no extra configuration needed.

Granular Tour Lifecycle Callbacks

The single onOnboardingTourClose callback has been replaced with three distinct callbacks that let you react differently to how the tour ends:

<OnboardingTour
  onOnboardingTourComplete={() => {
    // User finished all steps — mark as completed
    markTourAsCompleted();
  }}
  onOnboardingTourSkip={() => {
    // User clicked Skip — maybe show later
    markTourAsSkipped();
  }}
  onOnboardingTourEnd={() => {
    // Always fires — close the UI
    setStarted(false);
  }}
/>

The controller also exposes a new skipTour() method for programmatic use in custom popover content.

Persistent Overlay

The backdrop overlay is now rendered once at the OnboardingTour level and stays visible across step transitions. This eliminates the flicker that occurred when the overlay would unmount and remount between steps. Each step can customize the overlay appearance (color, opacity, blur) via focusRevealProps.overlayProps, with smooth CSS transitions between them.

Type-Safe Custom Step Properties

No more [key: string]: any. Custom step properties are now declared via a generic type parameter:

type MyStep = { icon: string; badge?: string };

const steps: OnboardingTourStep<MyStep>[] = [
  { id: 'step1', title: 'Welcome', icon: 'home', badge: 'New' },
];

The generic flows through OnboardingTourController<T>, so you get full autocomplete and type checking in render functions.

Smoother Step Transitions

A new two-phase transition mechanism ensures the current popover closes completely before the next one opens. No more flash of the wrong content during navigation.

Additional Improvements

• focusedZIndex prop — Control the z-index of focused elements (default: 201)

• factory() pattern — OnboardingTour now supports Mantine’s factory() API for ref forwarding and Styles API integration

• Scroll centering — Target elements are always scrolled to center of the viewport; Floating UI handles the rest

• No more horizontal scroll — overflowX: hidden is applied to <html> while the tour is active

Breaking Changes

This is a major release with several breaking changes. Here’s a quick overview:

Migration Guide

1. Replace onOnboardingTourClose

The simplest migration — onOnboardingTourEnd is a drop-in replacement:

// v2
<OnboardingTour onOnboardingTourClose={() => setStarted(false)} />

// v3
<OnboardingTour onOnboardingTourEnd={() => setStarted(false)} />

2. Replace responsive props

// v2
<OnboardingTour responsive mobileBreakpoint="sm" mobilePosition="bottom" />

// v3 — responsive is built-in, no toggle needed
<OnboardingTour
  focusRevealProps={{
    popoverProps: {
      position: { base: 'bottom', sm: 'left' },
    },
  }}
/>

3. Remove useOnboardingTour import

This hook was internal and created isolated state. Use render functions instead:

// v2
import { useOnboardingTour } from '@gfazioli/mantine-onboarding-tour';

// v3 — delete the import, use render functions
<OnboardingTour
  content={(controller) => <div>Step {controller.currentStepIndex}</div>}
/>

4. Add generics for custom step properties

// v2
const steps: OnboardingTourStep[] = [
  { id: 's1', price: 9.99 },
];

// v3
const steps: OnboardingTourStep<{ price: number }>[] = [
  { id: 's1', price: 9.99 },
];

Bug Fixes

• Popover content flash — No more brief flash of the next step’s content inside the current popover during transitions

• Overlay flickering — Persistent overlay eliminates unmount/remount flicker between steps

• Horizontal scroll — Portal-rendered popovers no longer cause horizontal scrollbars

• Popover behind overlay — Popovers now render via portal by default, always appearing above the overlay

• withinPortal was locked — popoverProps now accepts the full PopoverProps type

Links

• npm: npmjs.com/package/@gfazioli/mantine-onboarding-tour

• Documentation: gfazioli.github.io/mantine-onboarding-tour

• GitHub: github.com/gfazioli/mantine-onboarding-tour

• Mantine Extensions Hub

• Mantine: Compatible with Mantine 8.x and React 18/19

The fade edges system has been completely rebuilt on CSS mask-image -- background-independent, zero extra DOM nodes, and three distinct mask shapes to choose from.

Introduction

This major release of @gfazioli/mantine-marquee represents the biggest architectural upgrade since the component’s initial release. The entire edge-fading system has been rewritten from scratch: instead of rendering overlay <div> elements with colored gradients, the component now uses CSS mask-image for true alpha compositing that works on any background -- solid colors, gradients, images, or transparent. On top of that, the vertical and gap props are now fully responsive via Mantine’s breakpoint system, and several CSS performance fixes ensure silky-smooth animations across all browsers.

What’s New

A New Fade Edges System Built on CSS Masks

The fadeEdges prop has evolved from a simple boolean toggle into a union type that lets you choose the exact shape of the fade effect:

// Previously: only boolean
<Marquee fadeEdges>{children}</Marquee>

// Now: choose your mask shape
<Marquee fadeEdges="linear">{children}</Marquee>   // same as fadeEdges={true}
<Marquee fadeEdges="ellipse">{children}</Marquee>  // radial vignette
<Marquee fadeEdges="rect">{children}</Marquee>     // all 4 edges independently

The type signature is:

type MarqueeFadeEdges = boolean | 'linear' | 'ellipse' | 'rect';

Passing true still works and maps to "linear", so existing boolean usage is fully backward-compatible.

Why CSS masks? The previous overlay-div approach had a fundamental limitation: the fade color had to match the background. If your page background was a gradient, an image, or simply a different color than what you passed to fadeEdgesColor, the fade edges would look wrong. CSS mask-image performs true alpha compositing at the GPU level -- it masks pixels directly, independent of what is behind them.

Under the hood, the implementation uses one-sided gradients (one per edge) composited with mask-composite: intersect. This was a deliberate choice: a single double-sided gradient (transparent -> black -> transparent) breaks when the fade size exceeds 50% of the container, because the gradient stop positions swap and the browser clamps them per the CSS spec, creating a hard visible seam. One-sided gradients can never have overlapping stops, so they work correctly at any size.

Linear Mode

The classic fade effect: content fades in on the leading edge and fades out on the trailing edge. In vertical mode, the gradients switch from left/right to top/bottom automatically.

import { Marquee } from '@gfazioli/mantine-marquee';

function Demo() {
  return (
    <Marquee fadeEdges="linear" fadeEdgesSize="sm">
      <Box bg="blue" p="md" c="white">Item 1</Box>
      <Box bg="cyan" p="md" c="white">Item 2</Box>
      <Box bg="indigo" p="md" c="white">Item 3</Box>
    </Marquee>
  );
}

Ellipse Mode

A radial vignette that fades all edges simultaneously, creating a spotlight effect. The ellipse uses closest-side sizing so that it adapts naturally to rectangular containers. No orientation variant is needed -- radial gradients are inherently direction-independent.

<Marquee fadeEdges="ellipse" fadeEdgesSize="md" pauseOnHover>
  <ThemeIcon variant="transparent" size="120px">
    <IconBrandGithub style={{ width: '70%', height: '70%' }} />
  </ThemeIcon>
  <ThemeIcon variant="transparent" size="120px">
    <IconBrandMantine style={{ width: '70%', height: '70%' }} />
  </ThemeIcon>
  {/* ... */}
</Marquee>

On a square element (where width equals height), the ellipse naturally produces a circular mask -- no additional props are required.

Rect Mode

Fades all four edges independently, with separate control over horizontal and vertical fade extent. This is where the new [x, y] tuple support for fadeEdgesSize really shines:

{/* Uniform fade on all 4 edges */}
<Marquee fadeEdges="rect" fadeEdgesSize="md" h={60}>
  {children}
</Marquee>

{/* More fade on left/right (lg), less on top/bottom (xs) */}
<Marquee fadeEdges="rect" fadeEdgesSize={['lg', 'xs']} h={60}>
  {children}
</Marquee>

At corners, the alpha values multiply naturally (e.g. 0.5 x 0.5 = 0.25), producing smooth diagonal falloff with no special handling needed.

Tuple Support for fadeEdgesSize

The fadeEdgesSize prop now accepts an [x, y] tuple for independent axis control:

type MarqueeFadeEdgesSize =
  | MantineSize          // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  | (string & {})        // any CSS value
  | [x, y];             // tuple: [horizontal, vertical]

A single value applies uniformly to all edges. A tuple lets you set different sizes for horizontal (x = left/right) and vertical (y = top/bottom) fading. The tuple maps to two new CSS custom properties: --marquee-fade-edge-size-x and --marquee-fade-edge-size-y.

Responsive vertical Prop

The vertical prop now accepts a Mantine breakpoint object, enabling layout that switches between vertical and horizontal scrolling at different viewport widths:

<Marquee vertical={{ base: true, md: false }} h={300} fadeEdges>
  <Box bg="blue" p="md" c="white">Item 1</Box>
  <Box bg="cyan" p="md" c="white">Item 2</Box>
  <Box bg="indigo" p="md" c="white">Item 3</Box>
</Marquee>

In this example, the marquee scrolls vertically on small screens and switches to horizontal at the md breakpoint. Plain boolean values continue to work as before.

type MarqueeVertical = boolean | Partial<Record<MantineBreakpoint, boolean>>;

Responsive gap Prop

Similarly, the gap prop now accepts a responsive breakpoint object:

<Marquee gap={{ base: 'xs', md: 'xl' }} fadeEdges="linear">
  <Box bg="blue" p="md" c="white">Item 1</Box>
  <Box bg="cyan" p="md" c="white">Item 2</Box>
  <Box bg="indigo" p="md" c="white">Item 3</Box>
</Marquee>

This gives you tight spacing on mobile and generous spacing on larger screens, without any custom CSS or media queries.

type MarqueeGap =
  | MantineSize
  | (string & {})
  | Partial<Record<MantineBreakpoint, MantineSize | (string & {})>>;

New Exported Types

Four new TypeScript types are exported from the package, making it easier to type your own wrapper components:

• MarqueeFadeEdges -- the union type for fadeEdges

• MarqueeFadeEdgesSize -- the union type (with tuple) for fadeEdgesSize

• MarqueeVertical -- the union type for responsive vertical

• MarqueeGap -- the union type for responsive gap

import type {
  MarqueeFadeEdges,
  MarqueeFadeEdgesSize,
  MarqueeVertical,
  MarqueeGap,
} from '@gfazioli/mantine-marquee';

Breaking Changes

1. fadeEdgesColor Prop Removed

The fadeEdgesColor prop has been completely removed. The new CSS mask system is background-independent -- it does not need to know the background color.

Before:

<Marquee fadeEdges fadeEdgesColor="dark.7">
  {children}
</Marquee>

After:

<Marquee fadeEdges>
  {children}
</Marquee>

Simply remove the fadeEdgesColor prop. The fade effect now works correctly on any background.

2. fadeEdges Type Changed

While fadeEdges={true} and the shorthand fadeEdges continue to work exactly as before, the TypeScript type is now a union. If your wrapper component declares fadeEdges?: boolean, update it:

// Before
fadeEdges?: boolean;

// After
fadeEdges?: MarqueeFadeEdges;
// or inline: boolean | 'linear' | 'ellipse' | 'rect'

3. CSS Custom Properties Removed from Styles API

The following CSS variables have been removed from MarqueeCssVariables and are no longer available via the vars prop:

If you were overriding these through the Styles API vars prop, use the component props instead:

// Before: overriding via vars
<Marquee vars={{ root: { '--marquee-gap': '2rem' } }}>
  {children}
</Marquee>

// After: use the gap prop directly
<Marquee gap="2rem">
  {children}
</Marquee>

4. Internal Overlay CSS Selectors Removed

The internal CSS classes .marqueeFadeEdgeLeft, .marqueeFadeEdgeRight, .marqueeFadeEdgeTop, and .marqueeFadeEdgeBottom no longer exist in the DOM. If you were targeting these with custom CSS, the fade is now controlled entirely through mask-image on the .root element. Customize the fade extent via the fadeEdgesSize prop or the --marquee-fade-edge-size* CSS custom properties.

Performance Improvements

• GPU compositor layer promotion -- Added will-change: transform and backface-visibility: hidden to all animated clone wrappers. This tells the browser to promote each element to a dedicated GPU layer, preventing frame drops and eliminating the flicker visible on Safari/iOS during keyframe animation loop resets.

• Removed duplicate stacking context -- overflow: hidden was previously set on both .root and .marqueeContainer. The double declaration created an extra stacking context that could interfere with GPU layer compositing. It is now only on .root.

• Zero additional DOM nodes for fade edges -- The old system rendered 2-4 absolutely-positioned <div> elements. The CSS mask-image approach achieves the same visual effect with no extra DOM nodes at all.

Bug Fixes

• Fixed a triple-dash typo in CSS variable fallback (---marquee-gap-xl corrected to --marquee-gap-xl) that caused the gap to always fall through to the hardcoded 16px fallback.

• Fixed justify-content: space-around in .marqueeContent to flex-start. The previous value distributed extra space between clones, breaking the seamless loop geometry.

• Fixed missing useMemo dependencies (gap, duration) that prevented runtime prop changes from regenerating clone keys.

• Fixed libraryValue mismatches in the configurator demo that showed incorrect “changed” indicators.

• Fixed missing import statements in documentation code snippets (ReactNode, Box, Flex, ThemeIcon) so that users can copy and paste them correctly.

Styles API Reference

Selectors

CSS Variables (set via varsResolver)

CSS Variables (set via inline style, runtime-dependent)

Data Attributes

Getting Started

Installation

npm install @gfazioli/mantine-marquee
# or
yarn add @gfazioli/mantine-marquee

Make sure you have @mantine/core and @mantine/hooks (>= 7.0.0) installed as peer dependencies.

Basic Usage

import { Marquee } from '@gfazioli/mantine-marquee';
import '@gfazioli/mantine-marquee/styles.css';

function Demo() {
  return (
    <Marquee fadeEdges="linear" fadeEdgesSize="sm" pauseOnHover>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
    </Marquee>
  );
}

Migration from v2

1. Remove all fadeEdgesColor props -- they are no longer needed.

2. If you were overriding --marquee-gap or --marquee-direction via the vars prop, switch to using the gap and vertical props directly.

3. If you have custom CSS targeting .marqueeFadeEdgeLeft / .marqueeFadeEdgeRight / etc., remove it and use fadeEdgesSize or the --marquee-fade-edge-size* CSS custom properties instead.

4. If your TypeScript wrapper types used fadeEdges?: boolean, update to fadeEdges?: MarqueeFadeEdges.

All other existing usage (including fadeEdges={true}, fadeEdges shorthand, fadeEdgesSize="md", and plain vertical={true} / gap="xl") works without any changes.

Links

• npm package

• Documentation and live demos

• GitHub repository

• Report an issue

In the world of modern web development, choosing the right UI component can make or break the user experience. Today, we’re excited to introduce you to Mantine SelectStepper, a React component that revolutionizes how users interact with predefined option lists. Built on top of the powerful Mantine UI library, this component offers an elegant, intuitive alternative to traditional dropdown selects.

What is Mantine SelectStepper?

The Mantine SelectStepper is a Mantine-based React component that allows users to navigate through a list of options using increment and decrement buttons. Instead of clicking to open a dropdown menu, users can simply click left or right arrows to cycle through predefined values. This approach is particularly effective for:

• Configuration panels with sequential options

• Forms where users need to select from an ordered list

• Mobile interfaces where dropdowns can be cumbersome

• Applications requiring keyboard-friendly navigation

Getting Started: Incredibly Simple

One of the most impressive aspects of SelectStepper is its simplicity. Getting started requires just a few lines of code:

yarn add @gfazioli/mantine-select-stepper
# or
npm install @gfazioli/mantine-select-stepper

After installation, import the styles at the root of your application:

import '@gfazioli/mantine-select-stepper/styles.css';

And you’re ready to use it:

import { SelectStepper } from '@gfazioli/mantine-select-stepper';

function Demo() {
  return <SelectStepper data={['React', 'Vue', 'Angular']} />;
}

That’s it! With just three lines of code, you have a fully functional, beautifully styled stepper component.

Key Features That Set It Apart

1. Infinite Loop Navigation

Enable seamless cycling through options with the loop prop. When users reach the end of the list, they automatically wrap back to the beginning—perfect for circular selections like months, days, or priority levels.

<SelectStepper data={['January', 'February', 'March']} loop />

2. Controlled Component Pattern

SelectStepper supports both controlled and uncontrolled modes, giving you complete flexibility in state management:

import { useState } from 'react';
import { SelectStepper } from '@gfazioli/mantine-select-stepper';

function Demo() {
  const [value, setValue] = useState('react');

  return (
    <SelectStepper
      data={['React', 'Vue', 'Angular']}
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  );
}

3. Disabled Items Support

Need to restrict certain options? Simply mark them as disabled in your data array:

const data = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue', disabled: true },
  { value: 'angular', label: 'Angular' },
];

<SelectStepper data={data} />

The stepper will intelligently skip disabled items during navigation.

4. Custom Icons

Personalize your stepper with custom icons using the leftIcon and rightIcon props:

import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';

<SelectStepper
  data={['Small', 'Medium', 'Large']}
  leftIcon={<IconChevronLeft />}
  rightIcon={<IconChevronRight />}
/>

5. Custom Rendering

Take full control over how options are displayed with the renderOption prop:

<SelectStepper
  data={frameworks}
  renderOption={(item) => (
    <Group gap="xs">
      <Badge color={item.color}>{item.label}</Badge>
      <span>v{item.version}</span>
    </Group>
  )}
/>

6. Extended Data Properties

Need to store additional metadata with your options? Simply extend the ComboboxItem interface:

interface ComplexItem extends ComboboxItem {
  version?: string;
  color?: string;
}

const data: ComplexItem[] = [
  { value: 'react', label: 'React', version: '18.2.0', color: 'blue' },
  { value: 'vue', label: 'Vue.js', version: '3.2.37', color: 'green' },
];

function Demo() {
  const [value, setValue] = useState<ComplexItem | null>(null);

  return (
    <SelectStepper
      data={data}
      value={value?.value}
      onChange={(_val, option) => setValue(option as ComplexItem)}
    />
  );
}

The onChange handler provides the complete option object with all your custom properties.

7. Smooth Animations

Control animation behavior with dedicated props:

<SelectStepper
  data={['Option 1', 'Option 2', 'Option 3']}
  animate={true}
  animationDuration={300}
  animationTimingFunction="ease-in-out"
/>

Or disable animations entirely for a snappier feel.

8. Keyboard Navigation

Built-in keyboard support makes the component accessible and efficient:

• ArrowLeft or ArrowDown - Move to previous item

• ArrowRight or ArrowUp - Move to next item

9. Mantine Styles API Integration

Fully integrated with Mantine’s Styles API, SelectStepper allows you to customize every inner element:

<SelectStepper
  data={['React', 'Vue', 'Angular']}
  classNames={{
    root: 'custom-root',
    view: 'custom-view',
    action: 'custom-action',
  }}
/>

10. Perfect for Forms

SelectStepper integrates seamlessly with other Mantine form components:

<Stack>
  <TextInput label="Name" placeholder="Your name" />

  <SelectStepper 
    data={['React', 'Vue', 'Angular']} 
    withBorder 
    placeholder="Select framework"
  />

  <Group grow>
    <SelectStepper 
      data={['Junior', 'Mid', 'Senior']} 
      withBorder 
      placeholder="Experience level"
    />
    <TextInput label="Years of experience" />
  </Group>
</Stack>

Creative Use Cases

Boolean Stepper Pattern

One clever pattern is using SelectStepper as an enhanced boolean toggle:

const [enabled, setEnabled] = useState(false);

<SelectStepper
  data={[
    { value: 'false', label: 'Disabled' },
    { value: 'true', label: 'Enabled' },
  ]}
  value={enabled ? 'true' : 'false'}
  onChange={(val) => setEnabled(val === 'true')}
  leftIcon={enabled ? <IconToggleRight /> : <IconToggleLeft />}
  renderOption={(item) => (
    <Badge color={item.value === 'true' ? 'green' : 'red'}>
      {item.label}
    </Badge>
  )}
/>

Why Choose SelectStepper?

1. Simplicity: Minimal setup, maximum functionality

2. TypeScript: Full type safety with TypeScript support

3. Accessibility: Built-in keyboard navigation

4. Customization: Extensive styling options through Mantine’s Styles API

5. Performance: Smooth animations and optimized rendering

6. Flexibility: Works in controlled and uncontrolled modes

7. Modern: Built on React 18/19 with modern best practices

Part of the Mantine Extensions Ecosystem

SelectStepper is part of a growing collection of high-quality Mantine components. If you’re looking for more extensions to enhance your Mantine UI applications, check out Mantine Extensions for additional components that integrate seamlessly with your existing Mantine setup.

Documentation and Demos

For comprehensive documentation, live demos, and interactive examples, visit the official SelectStepper documentation. The documentation includes:

• Interactive configurator to experiment with all props

• Complete API reference

• Real-world usage examples

• Styles API documentation

• TypeScript type definitions

Conclusion

Mantine SelectStepper proves that sometimes the best solutions are the simplest ones. By rethinking how users interact with option lists, it provides a refreshing alternative to traditional dropdowns that’s both elegant and highly functional. Whether you’re building a configuration panel, a multi-step form, or any interface requiring option selection, SelectStepper offers the perfect blend of simplicity, flexibility, and user experience.

Give it a try in your next project, and experience how a thoughtfully designed component can elevate your user interface!

Resources:

• 📦 npm package

• 📖 Documentation & Demos

• 🐛 GitHub Repository

• 🎨 Mantine UI

• 🔌 More Mantine Extensions

Designing clear, glanceable status indicators is one of the most underrated parts of UI design. Whether you are building an admin dashboard, a real‑time monitoring panel, or a fun DEFCON‑style alert system, users need an immediate visual cue about what is going on.

In this article, we will explore the Mantine Led component from the @gfazioli/mantine-led package: a small, focused React component built specifically for the Mantine UI library.

It is designed to be:

• Simple to install and use

• Fully controlled and predictable

• Seamlessly theme‑aware

• Easily customizable via Mantine’s Styles API

You can also find this and other Mantine-based extensions on the Mantine Extensions website at https://mantine-extensions.vercel.app/.

Installation and setup

The LED component is published as a standalone package. Install it via your favorite package manager:

npm install @gfazioli/mantine-led
# or
yarn add @gfazioli/mantine-led

Then, import the styles once at the root of your application:

import '@gfazioli/mantine-led/styles.css';

If you are using CSS layers and want finer control over the cascade, you can instead import the layered stylesheet:

import '@gfazioli/mantine-led/styles.layer.css';

That’s all you need to start using the component in any React + Mantine UI project.

Basic usage: a single LED indicator

At its core, the Led component is a compact visual indicator controlled through props. A minimal example looks like this:

import { Led } from '@gfazioli/mantine-led';

function ServerStatus() {
  return <Led value="on" color="green" label="Server online" />;
}

Key ideas here:

• value controls the LED state (for example, "on", "off", or other states supported by your design).

• color is integrated with the Mantine theme, so you can reuse existing semantic colors.

• label lets you attach a text (or any React node) describing what the LED represents.

This small piece of UI is immediately understandable to users, but remains type‑safe and composable in a larger React codebase.

Fully controlled with the value prop

One of the most important design decisions of this component is that it is fully controlled via the value prop. That means you always decide when and how the LED changes.

import { useState } from 'react';
import { Button, Group } from '@mantine/core';
import { Led } from '@gfazioli/mantine-led';

export function ControlledExample() {
  const [status, setStatus] = useState<'on' | 'off'>('off');

  return (
    <Group align="center" gap="md">
      <Led value={status} color={status === 'on' ? 'green' : 'red'} label={status === 'on' ? 'Active' : 'Inactive'} />

      <Button onClick={() => setStatus((current) => (current === 'on' ? 'off' : 'on'))}>
        Toggle status
      </Button>
    </Group>
  );
}

Because the Led is controlled, it behaves exactly like any other input or view component in a modern React + TypeScript app: your state is the single source of truth, and the UI simply reflects it.

Theme-aware colors

The LED component integrates seamlessly with the Mantine theme. The color prop accepts any Mantine theme color, so your indicators always match the rest of your design system:

import { Stack } from '@mantine/core';
import { Led } from '@gfazioli/mantine-led';

function ColorPalettePreview() {
  return (
    <Stack>
      <Led value="on" color="green" label="Success" />
      <Led value="on" color="yellow" label="Warning" />
      <Led value="on" color="red" label="Error" />
      <Led value="on" color="blue" label="Info" />
    </Stack>
  );
}

By reusing Mantine’s palette, LEDs automatically adapt when you change themes (for example, switching between light and dark mode) without any extra work.

Built-in animations for real-time feedback

Static indicators are useful, but animated feedback can make status changes much more noticeable. The LED component ships with multiple built‑in animations that you can apply via props:

• pulse: smooth pulsing effect (default)

• flash: quick flashing for urgent alerts

• breathe: slow breathing effect for softer attention

• blink: regular blinking pattern

• glow: a strong glow for highly visible states

A simple animated example:

import { Group } from '@mantine/core';
import { Led } from '@gfazioli/mantine-led';

function AnimatedIndicators() {
  return (
    <Group>
      <Led value="on" color="green" animation="pulse" label="Healthy" />
      <Led value="on" color="yellow" animation="breathe" label="Degraded" />
      <Led value="on" color="red" animation="flash" label="Critical" />
    </Group>
  );
}

These animations make it easy to differentiate between normal, warning, and critical states at a glance, while keeping the API surface intentionally small and easy to remember.

Flexible labels and layout

Real-world dashboards rarely show an icon alone; labels are essential for clarity. The Led component provides a label prop that accepts any React node and a labelPosition prop to control layout.

import { Badge } from '@mantine/core';
import { Led } from '@gfazioli/mantine-led';

function LabeledLed() {
  return (
    <Led
      value="on"
      color="teal"
      labelPosition="right"
      label={<Badge color="teal">Payment gateway</Badge>}
    />
  );
}

Because label is a React node, you are not limited to plain text: badges, icons, formatted text, or composite components all work out of the box.

Styling with Mantine Styles API

The Led component is built following Mantine’s factory pattern and fully supports the Styles API (https://mantine.dev/styles/styles-api/). This means you can target internal parts of the component using classNames, styles, or CSS variables.

For example, you can override styles of the root element, the LED itself, or the label container:

import { Led } from '@gfazioli/mantine-led';

function CustomStyledLed() {
  return (
    <Led
      value="on"
      color="blue"
      label="Custom styled"
      classNames={{
        root: 'my-root',
        led: 'my-led',
        label: 'my-label',
      }}
    />
  );
}

Combined with CSS variables like --led-size and --led-color, you can fine‑tune dimensions, spacing, and visual tone without losing the type safety and clarity of the public props.

Real-world use cases

The official documentation showcases some practical patterns that are extremely easy to reproduce in your own codebase:

System status panel

A panel displaying multiple services, each represented by a label and an LED. This pattern is ideal for infrastructure dashboards, IoT control panels, and internal tooling.

• Each row uses a Led component with a descriptive label

• Colors and animations convey health (green/pulse for healthy, yellow/breathe for partial, red/flash for critical)

• The component’s simplicity keeps the JSX readable even with many indicators on screen

DEFCON-style alert system

For more playful or storytelling UIs, you can stack multiple LEDs with different colors and animations to represent escalating alert levels (like a DEFCON scale). Because the API is so small, the resulting code stays approachable, even as the visual result feels dynamic and polished.

Why this LED component works so well with Mantine

What makes this component stand out is how naturally it fits into a Mantine UI ecosystem:

• It uses Mantine’s polymorphic factory and Styles API under the hood, so its behavior is consistent with core Mantine components.

• It respects theme colors and sizing scales, providing a familiar configuration surface for existing Mantine users.

• It embraces controlled state via the value prop, making it easy to integrate with Zustand, Redux, React Query, or any other data layer.

All of this is wrapped in a tiny, focused API that you can learn in minutes.

Conclusion

If you need a compact, expressive way to visualize status in your React + Mantine UI projects, the Mantine Led component is a great fit. It combines:

• Minimal, predictable props

• Theme‑aware colors and sizes

• Built‑in animations for richer feedback

• Flexible labels and a powerful Styles API

Together, these features make it trivial to build anything from simple on/off indicators to complex monitoring dashboards, without sacrificing type safety or design consistency.

Explore more Mantine‑powered components and ideas on Mantine UI at https://mantine.dev/ and discover additional community extensions on Mantine Extensions at https://mantine-extensions.vercel.app/.

If you’ve ever wished for a subtle way to guide attention in a UI—highlighting imagery, content blocks, or interactive regions—Mantine Mask delivers a clean, performant “spotlight” you can drop anywhere in your React app. Built to pair beautifully with the Mantine UI Library, Mantine Mask wraps any content and applies a CSS-driven radial or linear mask that can follow the cursor or stay fixed, giving you fine-grained control over size, feathering, opacity, and interaction.

At its core, Mask is a simple wrapper: place it around your content, and decide whether the spotlight should be static or cursor‑tracked. The “inside” of the mask remains visible while the “outside” fades to transparent. Flip it with invertMask, and you get a “hole” effect to reveal backgrounds or layers beneath.

You’ll start by importing styles at your app root:

import ‘@gfazioli/mantine-mask/styles.css’;
// or layer-aware:
import ‘@gfazioli/mantine-mask/styles.layer.css’;

Two ways to focus: cursor or static 

• Cursor spotlight: enable withCursorMask to have the mask follow the pointer. Tune the motion with animation and easing, from instant to lerp-like smoothing.

• Static spotlight: fix the origin using maskX/maskY to create an anchored reveal. Ideal for hero images, headers, or guided tours.

For size, choose maskRadius for a circular spotlight or maskRadiusX/maskRadiusY for elliptical control. For edge softness, maskFeather offers a quick, intuitive knob (0 = hard edge, 100 = full fade), while maskTransparencyStart/End give you advanced control over the fade curve.

Radial and linear variants 

• Radial (default): the classic circular/elliptical spotlight.

• Linear: a band-like “scanner” that works wonders for reveal stripes, highlights, or motion-driven accents. Control thickness via maskRadius, softness via maskFeather or transparency boundaries, and orientation via maskAngle.

Inverted masks and layered reveals 

Invert the logic with invertMask to make the spotlight area transparent and keep the outside visible. This unlocks “hole” bands in linear mode and background reveals in radial mode. For consistent aesthetics across themes, set a background on Mask (e.g., Mantine’s bg prop) so the glow looks uniform in light and dark modes.

Interaction and accessibility 

Activation determines when the mask is active: always, hover, pointer, or focus. Prefer activation=“focus” for keyboard-friendly UIs—Mask applies tabIndex by default, keeping your components accessible. Need full control? Use active and onActiveChange to manage visibility programmatically.

Keep the spotlight inside 

When using cursor mode, clampToBounds ensures the center never slips outside the container, and clampPadding adds margin from the edges. These small touches keep the experience polished and predictable.

Works with any content 

Mask is content-agnostic: images, cards, text blocks, custom React trees—wrap it and go. It’s great for:

• Reveal: different background on the container, shown through the spotlight for a playful discovery effect.

• Zoom: a magnified background behind the same image, creating a lightweight loupe without complex canvas logic.

Quick examples 

• Circular spotlight that tracks the cursor:

<Mask withCursorMask maskRadius={360}>
  <Image ... />
</Mask>

Elliptical highlight for wide banners:

<Mask withCursorMask maskRadiusX={420} maskRadiusY={180}>
  <Image ... />
</Mask>

Static origin with hard‑edge reveal:

<Mask withCursorMask={false} maskX={25} maskY={35} maskFeather={0}>
  <Image ... />
</Mask>

Linear + inverted “hole band”:

<Mask variant=”linear” invertMask withCursorMask maskAngle={90} maskRadius={180} maskFeather={30}>
  <Image ... />
</Mask>

Why it fits naturally in a Mantine app 

Mantine Mask embraces Mantine’s design philosophy: composable, accessible, and theme-aware. It exposes sensible defaults yet gives you low-level controls when you need precision. Combined with Mantine’s layout, typography, and theming, you can craft focused, delightful interactions without heavy custom CSS or complex animation stacks. Explore Mantine’s full component ecosystem to round out your UI: Mantine UI Library ↗.

For more extensions that complement Mantine, including comparison sliders, reflection effects, and more, browse the curated hub: Mantine Extensions HUB ↗. It’s a great way to find production-ready building blocks that maintain consistency across your app.

Final thoughts 

Mantine Mask is a small component with outsized impact. Whether you’re guiding users through content, spotlighting important UI regions, or creating playful reveal effects, the combination of cursor awareness, radial/linear variants, inversion, and feathering lets you tune the exact mood and clarity your design calls for. Drop it in, clamp it to bounds, and watch your interface gain a subtle, professional focus.

Mantine Compare brings polished, responsive side‑by‑side comparisons to your Next.js + TypeScript projects with zero friction.

If you build product previews, image diff views, A/B demos, or UI changelogs, Mantine Compare is the extension that turns “quick comparison” into a delightful experience. Designed to pair perfectly with the Mantine UI Library, it ships with consistent styling, accessibility, and flexible layout controls—so you can focus on storytelling, not boilerplate.

Why Mantine Compare stands out 

Mantine Compare is an interactive container that reveals two content sections—images or custom React nodes—along a movable divider. You get a smooth UI, keyboard‑friendly controls, and a Styles API that lets you tailor every inner element. In practice, this means you can compare two product states, designs, or datasets with just a few lines of code while preserving your brand look and feel.

Key highlights:

• Angle control for the divider: vertical, horizontal, or diagonal with any angle between 0–360.

• Three interaction variants: drag (default), hover, and fixed—each suited to different storytelling patterns.

• Works with any React content: not just images; pass custom components, charts, or annotated boxes.

• Full Styles API support: style the slider, line, sections, and root with classNames across your theme.

Installation and setup in seconds 

Add the package, then import styles at your app root:

// install
// yarn add @gfazioli/mantine-compare
// or npm i @gfazioli/mantine-compare

// styles: pick one of the following
import ‘@gfazioli/mantine-compare/styles.css’;
// or, with CSS layers
import ‘@gfazioli/mantine-compare/styles.layer.css’;

With Mantine and Next.js, this fits right into your App Router structure and theming model. If you’re new to Mantine, start here: the official [Getting Started](https://mantine.dev/getting-started/) guide. For a broader view of community components, explore the [Mantine Extensions HUB](https://mantine-extensions.vercel.app/).

Use cases that shine 

• Product “Before/After” reveals: demonstrate upgrades like performance, color correction, or UI polish.

• Design reviews: compare two versions of a layout, component, or icon set.

• Data visualizations: show state changes over time with charts or dashboards on either side.

• Documentation demos: embed in Nextra or MDX pages to make release notes visual and interactive.

A clean API you’ll enjoy using 

The core component accepts two sections—left and right—and renders them inside a resizable frame:

import { Compare } from ‘@gfazioli/mantine-compare’;
import { Image } from ‘@mantine/core’;

export function ProductDiff() {
  return (
    <Compare
      leftSection={
        <Image
          src=”https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&auto=format&fit=crop”
          alt=”Before”
          style={{ width: ‘100%’, height: ‘100%’, objectFit: ‘cover’ }}
        />
      }
      rightSection={
        <Image
          src=”https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&auto=format&fit=crop”
          alt=”After”
          style={{ width: ‘100%’, height: ‘100%’, objectFit: ‘cover’ }}
        />
      }
    />
  );
}

Need a horizontal or diagonal split? Set the angle:

• angle={0}: classic vertical divider (left/right).

• angle={90}: horizontal divider (top/bottom).

• angle={30} (or any 0–360): diagonal for more dynamic reveals.

<Compare angle={30} leftSection={...} rightSection={...} />

Prefer non‑interactive reveals? Choose a variant:

• drag (default): click and drag the slider.

• hover: reveal by moving the cursor; no slider button.

• fixed: static split at a preset percentage via defaultPosition.

<Compare variant=”fixed” defaultPosition={35} leftSection={...} rightSection={...} />

Styling with precision 

Mantine Compare embraces Mantine’s Styles API, exposing classNames hooks like root, leftSection, rightSection, slider, sliderLine, and sliderButton. This gives you granular control to sync with your theme, support dark mode, and integrate brand motion or colors—without hacking CSS.

Example targets:

• root: the container

• leftSection/rightSection: wrappers for content panes

• slider/sliderLine: the draggable element and its accent line

• sliderButton: the clickable area for accessibility and hit target

Built for modern Mantine workflows 

• Accessible by default: focus targets and interaction affordances are thoughtfully designed.

• Responsive: fills parent dimensions and adapts to different aspect ratios.

• Composable: accepts any React node—Mantine components, charts, or custom containers.

• TypeScript‑friendly: props and variants are straightforward and IDE‑discoverable.

If you develop with Mantine daily, Mantine Compare feels native—familiar props, predictable styling, and polished UX out of the box.

Where to explore more 

• Mantine UI Library

• Mantine Extensions HUB

These resources give you everything you need to scaffold, theme, and document your comparisons in production‑ready apps.

Final thoughts 

Mantine Compare turns content comparison into a premium, interactive experience. Whether you’re shipping product showcases, design diffs, or data reveals, it’s a small component that makes a big impression—and it plugs seamlessly into your Next.js + TypeScript + Mantine stack. Install it, style it, and start telling better visual stories today.

Elevate your React interfaces with BorderAnimate, a polished Mantine extension that wraps any element—cards, buttons, inputs, alerts—and adds stunning, configurable border animations without sacrificing performance. If you’re building with Next.js and TypeScript and already rely on Mantine UI, this component feels like a natural superpower upgrade to your design system.

Why BorderAnimate belongs in modern Mantine projects

Visual feedback and motion are essential to contemporary UI. BorderAnimate delivers a carefully engineered set of animation variants that draw attention tastefully—perfect for highlights, CTAs, focus states, and premium surfaces—while keeping your app buttery smooth via CSS animations at 60fps.

Installation is straightforward, theming is intuitive, and the API aligns perfectly with Mantine’s props-driven ergonomics.

Quick start

Add styles at your app root:

import ‘@gfazioli/mantine-border-animate/styles.css’;
// or scoped layer version:
import ‘@gfazioli/mantine-border-animate/styles.layer.css’;

Wrap any content:

import { BorderAnimate } from ‘@gfazioli/mantine-border-animate’;
import { Flex, Title, Text } from ‘@mantine/core’;

export function Demo() {
  return (
    <BorderAnimate w={500} h={400}>
      <Flex
        flex={1}
        direction=”column”
        align=”center”
        justify=”center”
        h=”100%”
        style={{ borderRadius: ‘inherit’, backgroundColor: ‘var(--mantine-color-default)’ }}
      >
        <Title>Animate Border</Title>
        <Text>This is an example of BorderAnimate component</Text>
      </Flex>
    </BorderAnimate>
  );
}

Four variants, endless polish

• Beam: a traveling glow that traces your border radius—great for interactive emphasis. Tune with size, anchor, and duration.

• Gradient: a rotating conic gradient between colorFrom and colorTo—ideal for premium visuals and loaders. Control duration and blur.

• Glow: a gentle pulsation that fills the border area—perfect for notifications or attention states. Adjust duration, blur, opacity.

• Pulse: subtle scale + opacity breathing for refined emphasis—minimal yet expressive.

Switch via the variant prop and fine‑tune with props like colorFrom, colorTo, size, blur, duration, border width, radius, and more.

Controlled and predictable

BorderAnimate is fully controllable:

• show: toggle border visibility for conditional states.

• animate: keep motion on or make it static; combine with angle for directional control.
  This makes it effortless to integrate with app state, forms, and feature flags.

Mask and background effects

For advanced visuals, pair with withMask and zIndex:

• withMask=true clips the animation to the border area.

• withMask=false lets the glow soft‑spill beyond the element for ambient highlights.

• Combine anchor with zIndex={-1} to create tasteful background illumination behind content—beautiful for hero cards, pricing blocks, or featured widgets.

Example:

<BorderAnimate w={200} h={150} withMask={false} size={200} blur={4} anchor={40}>
  {/* content with var(--mantine-radius-md) to match your theme */}
</BorderAnimate>

Built to feel Mantine‑native

BorderAnimate respects Mantine’s design language:

• Works with any Mantine component: Paper, Button, Card, Flex, Stack, etc.

• Inherits your border radius and colors via CSS custom properties.

• Plays nicely with Mantine’s Style Props and Styles API, making theming straightforward and predictable.

Explore Mantine UI’s foundations and best practices here: Mantine UI Getting Started ↗

Perfect for Next.js + TypeScript teams

• Type‑safe props and predictable APIs.

• Minimal bundle footprint; pure CSS animations for performance.

• Drop‑in, componentized design that fits Server Components layouts and client interactivity.

Where it shines in production

• Featured product cards and pricing sections that need premium polish.

• CTA buttons that warrant subtle motion without distraction.

• Focus states for inputs and forms when accessibility needs visual clarity.

• Status indicators and alerts that benefit from gentle animated emphasis.

• Onboarding moments and spotlight panels using background glow with withMask=false.

Try it, then level up your Mantine stack

Mantine BorderAnimate is part of a growing ecosystem of high‑quality enhancements.

Vote on Product Hunt

Discover more components tailored for Mantine at the community hub: Mantine Extensions HUB ↗. If you’re standardizing your design system in Next.js, these extensions accelerate UI innovation while staying consistent with Mantine’s principles.

Final thoughts

BorderAnimate adds refined motion to your interfaces with the craftsmanship you expect from Mantine‑aligned components. It’s simple to adopt, delightful to tune, and powerful enough to become a signature detail across your app. Wrap, configure, and let your borders come alive—responsively, accessibly, and beautifully.

Why Mantine Window stands out

Mantine Window wraps advanced interaction patterns in a straightforward API that feels native to Mantine. You get smooth dragging, resizing, collapsing, close controls, configurable shadows and radii, and a smart persistence layer—without reinventing the wheel.

If you already use Mantine components and theming, this slots in effortlessly. Start here: Mantine Window ↗ and explore more extensions on the community Mantine Extensions HUB: mantine-extensions.vercel.app ↗.

Quick start

Install and import styles at your app root:

import ‘@gfazioli/mantine-window/styles.css’;
// or scoped layer support:
import ‘@gfazioli/mantine-window/styles.layer.css’;

Then drop a window into any container:

import { Window } from ‘@gfazioli/mantine-window’;
import { Box, Title } from ‘@mantine/core’;

export function Demo() {
  return (
    <Box pos=”relative” style={{ width: ‘100%’, height: 500 }}>
      <Window
        title=”Hello, Mantine Window”
        defaultPosition={{ x: 0, y: 0 }}
        defaultSize={{ width: 320, height: 256 }}
        withinPortal={false}
        opened
      >
        <Title order={4}>This is a window with data</Title>
      </Window>
    </Box>
  );
}

Portal vs. container: control positioning

Choose exactly how windows behave:

• Fixed via portal: ‎withinPortal={true} keeps the window pinned to the viewport—ideal for overlays and modals that ignore scroll.

• Relative within a container: ‎withinPortal={false} uses absolute positioning inside a ‎position: relative parent—great for embedded widgets and constrained canvases.

Fully controlled or fire‑and‑forget

Drive visibility with ‎opened and onClose for modal‑style flows, or keep it simple using defaultPosition and ‎defaultSize. It’s React‑friendly either way.

const [opened, { open, close }] = useDisclosure(false);
<Window title=”Controlled Window” opened={opened} onClose={close} withinPortal={false} />

Precision movement: drag boundaries

Lock window movement to specific ranges using ‎dragBounds so your UI stays tidy and intentional—for example, dashboards with hard limits:

dragBounds={{ minX: 50, maxX: 500, minY: 50, maxY: 400 }}

Persistence that delights

With ‎persistState (enabled by default), position and size are remembered via localStorage. Refresh the page, and your layout feels personal—not fragile.

Add an ‎id for multiple distinct windows:

<Window id=”analytics-panel” persistState defaultPosition={{ x: 50, y: 50 }} />

Callbacks for analytics and UX

React to user intent with onPositionChange and ‎onSizeChange. Log telemetry, snap to a grid, or update layout state in real time:

onPositionChange={(pos) => console.log(pos)}
onSizeChange={(size) => console.log(size)}

Lock it down when needed

Create a centered, fixed window and disable interactions:

• ‎draggable=”none”

• ‎resizable=”none”

• Supply ‎defaultPosition and ‎defaultSize for a crisp, modal‑like panel.

You can also disable collapsing entirely with ‎collapsable={false} for deterministic flows.

Styles API: theme it like Mantine

Mantine Window embraces Mantine’s Styles API, letting you style inner parts with ‎classNames and your theme tokens. It plays nicely with color schemes, radius, shadows, borders, and any design system rules you enforce through ‎MantineProvider.

Perfect use cases

• Analytics dashboards with movable panels

• Admin tools with modular widgets

• In‑app editors and inspectors

• Multi‑window experiences with persistence

• Demo environments that need windowed layouts

Why teams adopt Mantine Window

• It’s familiar: Component props and patterns mirror Mantine conventions.

• It’s robust: Drag/resizing, boundaries, persistence, and callbacks cover real production needs.

• It’s flexible: Portal vs container makes the right placement trivial.

• It’s maintainable: The Styles API keeps design aligned across your system.

If you’re building with Mantine, Mantine Window adds the missing desktop‑style interactions your users subconsciously expect—clean, predictable, and delightful. Dive into Mantine first at https://mantine.dev/getting-started/ ↗ and browse more community‑maintained gems at the Mantine Extensions HUB: https://mantine-extensions.vercel.app/ ↗.

If you build React apps with Mantine UI, you already value clarity, consistency, and speed. JsonTree continues that tradition: it renders any JavaScript value—primitives, arrays, and objects—into an interactive tree with minimal effort. Drop it in, point it to data, and you’re done. When you need more, it offers clean extension points and Mantine-friendly styling.

Why JsonTree

• Works with any value: string, number, boolean, null, array, object.

• Instant visibility: expand/collapse nodes to navigate complex payloads.

• Mantine-first: designed to fit your theme, typography, spacing, and dark mode.

• Zero-config by default; composable when you need control.

Quick start examples

The following snippets demonstrate how JsonTree gracefully renders different data types. Each example uses defaultExpanded for immediate visibility and an optional title for context.

//data.js
export const data = {
  name: ‘John Doe’,
  age: 30,
  isAdmin: false,
  courses: [’html’, ‘css’, ‘js’],
  wife: null,
  address: {
    street: ‘123 Main St’,
    city: ‘Anytown’,
    zip: ‘12345’,
  },
  action: { type: ‘click’, payload: undefined },
  projects: [
    {
      name: ‘Project A’,
      status: ‘completed’,
    },
    {
      name: ‘Project B’,
      status: ‘in progress’,
    },
  ],
};

import { JsonTree } from “@gfazioli/mantine-json-tree”;
import { data } from ‘./data’;

function Demo() {
  return <JsonTree showIndentGuides data={data} maxDepth={1} defaultExpanded/>;
}

Full demo with Mantine layout

Wrap JsonTree with familiar Mantine components like Stack and Paper to get polished spacing, borders, and responsiveness out of the box:

import { JsonTree } from “@gfazioli/mantine-json-tree”;
import { data } from ‘./data’;

function Demo() {
  return (
    <Stack>
      <Paper withBorder>
        <JsonTree data=”Hello, World!” defaultExpanded title=”Simple string” />
      </Paper>
      <Paper withBorder>
        <JsonTree data={42} defaultExpanded title=”Number value” />
      </Paper>
      <Paper withBorder>
        <JsonTree data={true} defaultExpanded title=”Boolean value (true)” />
      </Paper>
      <Paper withBorder>
        <JsonTree data={false} defaultExpanded title=”Boolean value (false)” />
      </Paper>
      <Paper withBorder>
        <JsonTree data={null} defaultExpanded title=”Null value” />
      </Paper>
      <Paper withBorder>
        <JsonTree data={{ key1: ‘value1’, key2: 123, key3: false, key4: null }} defaultExpanded title=”Object value” />
      </Paper>
      <Paper withBorder>
        <JsonTree data={[’string’, 456, true, null, { nestedKey: ‘nestedValue’ }]} defaultExpanded title=”Array value” />
      </Paper>
    </Stack>
  );
}

Use cases

• API response debugging: Quickly explore fetched JSON without switching tools.

• Admin interfaces: Render configuration blobs, feature flags, or audit objects.

• Developer tools: Embed a live inspector during development or in internal dashboards.

• Education/demo pages: Show data shapes and changes clearly for tutorials and onboarding.

Design philosophy: simplicity first, customization later
JsonTree’s primary goal is effortless inspection: pass data and get a clean, browsable tree. But it’s built for Mantine, so you can compose it within Paper, Card, Stack, ScrollArea, and more, apply theme tokens, and keep your UX coherent—light/dark included.

Tips for smooth integration

• Combine defaultExpanded with a clear title to provide instant context.

• Use Paper withBorder to visually separate multiple trees in a layout.

• Pair with Mantine’s Code or Text components to annotate nodes or describe payloads.

• Wrap in ScrollArea for very large trees to keep the page layout tidy.

• Keep large payloads collapsed by default and let users progressively explore.

Mantine ecosystem and extensions

JsonTree is written for Mantine UI and plays nicely with its core components and theme system. If you’re exploring additional add-ons, you can find other extensions on Mantine Extensions to round out your toolkit.

Closing thoughts

JsonTree embraces what Mantine developers love: speed, clarity, and control. It removes friction from inspecting data while staying 100% Mantine-friendly. Whether you’re debugging, documenting, or shipping a production admin UI, JsonTree gives you a dependable way to present complex structures with an elegant, approachable interface.

You can watch More video

Happy building!

We're excited to announce the release of Mantine Clock 2.0, featuring a game-changing addition: dynamic arc rendering. This major update transforms how users visualize time progression by adding colorful, customizable arcs that follow clock hands and instantly communicate elapsed time.

What Are Clock Arcs?

Clock arcs are sector-shaped visual indicators that sweep from a defined starting point to the current position of each clock hand. Think of them as progress indicators that make it incredibly easy to see at a glance how much time has passed since a specific moment.

For example:

• A seconds arc might show how many seconds have elapsed since the start of the current minute

• A minutes arc could visualize how much of the current hour has passed

• An hours arc might display progress through a work shift or meeting duration

Key Features

Independent Control for Each Hand

The new arc system provides complete control over seconds, minutes, and hours arcs:

<Clock
  withSecondsArc
  secondsArcFrom="12:00:00"
  secondsArcColor="red.6"
  secondsArcOpacity={0.6}
  
  withMinutesArc
  minutesArcFrom="12:00"
  minutesArcColor="blue.6"
  minutesArcOpacity={0.5}
  
  withHoursArc
  hoursArcFrom="12:00"
  hoursArcDirection="counterClockwise"
  hoursArcColor="teal.6"
  hoursArcOpacity={0.4}
/>

Smart Arc Positioning

Each arc intelligently respects the corresponding hand's length, ensuring perfect visual alignment. The arc never extends beyond its hand, maintaining clean, professional aesthetics.

Bidirectional Support

Arcs can sweep both clockwise and counterclockwise, opening up creative possibilities for different use cases:

• Clockwise arcs for showing elapsed time

• Counterclockwise arcs for displaying remaining time

• Mixed directions for complex time tracking scenarios

Flexible Time References

The system supports multiple time input formats:

• String format: "12:30:45" for precise time specification

• Date objects: For timezone-aware calculations

• Fractional precision: Seconds contribute to minute positioning, minutes affect hour positioning

Real-World Applications

Meeting Duration Tracker

Show how much of a scheduled meeting has elapsed with a subtle arc that grows as time progresses, helping participants stay aware of remaining time without checking their phones.

Workout Timer

Display workout intervals with color-coded arcs—red for high-intensity periods, blue for rest periods—making it easy to see progress at a glance.

Shift Progress Indicator

For service industries, display work shift progress with an arc that fills throughout the day, providing instant visual feedback on how much of the shift remains.

Educational Tools

In classroom settings, use arcs to show lesson segment progress or exam time remaining, helping students manage their time more effectively.

Technical Excellence

Performance Optimized

The arc rendering system uses optimized SVG rendering with geometric precision hints to ensure smooth performance and crisp visuals across all devices.

Theme Integration

Arcs seamlessly integrate with Mantine's theming system, supporting all color variants and automatically adapting to light and dark modes.

TypeScript Ready

Full TypeScript support with comprehensive interfaces ensures type safety and excellent developer experience:

interface ClockArcsProps {
  withSecondsArc?: boolean;
  secondsArcFrom?: string | Date;
  secondsArcDirection?: 'clockwise' | 'counterClockwise';
  secondsArcColor?: MantineColor;
  secondsArcOpacity?: number;
  // ... and more for minutes and hours
}

Migration and Compatibility

Mantine Clock 2.0 maintains complete backward compatibility—existing implementations continue working without changes. The arc features are opt-in, activated only when you explicitly enable them with props like `withSecondsArc`.

Interactive Demo

We've built a comprehensive interactive demo that lets you experiment with all arc parameters in real-time. Adjust colors, directions, start times, and opacities to see how arcs can enhance your time visualization needs.

In the world of React UI development, Mantine is a top choice for building beautiful, accessible, and highly customizable interfaces. But what if you need advanced timekeeping features—like real-time clocks, timezone displays, or countdown logic—without leaving the Mantine ecosystem? Enter Mantine Clock, a powerful extension that brings professional-grade clock components and hooks to your NextJS and Typescript projects.

Why Mantine Extensions?

If you’re already using the Mantine UI Library (official docs ↗), you know it’s all about developer experience, accessibility, and design consistency. But Mantine’s real power comes from its extension ecosystem, available through the Mantine Extensions Hub ↗. Here, you’ll find community-driven solutions like Mantine Clock, which solve real-world UI needs while staying true to Mantine’s design language.

What is Mantine clock?

Mantine Clock is a React package that provides highly customizable clock components and hooks, designed to integrate natively with Mantine’s design system. Whether you want a classic analog clock, a digital display, or need to handle timezones and countdowns, Mantine Clock has you covered—with full support for Mantine theming and responsive layouts.

Key Features

• Analog & Digital Clocks: Render beautiful, theme-aware clocks that fit your app’s style.

• Timezone Support: Display accurate time for any region—ideal for global apps.

• Real-Time Updates: Clocks update live, so your users always see the correct time.

• Customization: Style hands, ticks, numbers, and colors to match your brand.

• Mantine Native: Seamlessly blends with Mantine’s color schemes and dark mode.

• Typescript Ready: Built for type safety and autocompletion.

• Countdown & Timer Hooks: Use hooks to implement countdowns and timers with full control.

Getting Started

1. Install the Package

Add Mantine Clock to your project with yarn or npm:

yarn add @gfazioli/mantine-clock

# or

npm install @gfazioli/mantine-clock

After installation, import the package styles at the root of your application:

import '@gfazioli/mantine-clock/styles.css';

For advanced CSS layering, you can also import:

import '@gfazioli/mantine-clock/styles.layer.css';

2. Basic Usage

The main ‎Clock component is easy to use in any Mantine layout:

import { Clock } from '@gfazioli/mantine-clock';

export function MyDashboard() {
  return (
    <Clock
      size={200}
      color="blue"
      timezone="America/New_York"
      showSeconds
    />
  );
}

You can further customize the appearance by adjusting props for hour/minute/second hands, tick marks, and number styles. The component is fully theme-aware, adapting to your Mantine color scheme and dark mode settings.

3. Advanced: Real-Time and Countdown Logic with Hooks

Need a countdown for a product launch or event? Mantine Clock provides hooks like ‎useCountdown and ‎useClock to help you build custom logic with full Typescript support:

import { useCountdown } from '@gfazioli/mantine-clock';

export function LaunchCountdown() {
  const { days, hours, minutes, seconds, isCompleted } = useCountdown({
    targetDate: new Date('2025-09-01T12:00:00Z'),
  });

  if (isCompleted) {
    return <span>Launched!</span>;
  }

  return (
    <span>
      {days}d {hours}h {minutes}m {seconds}s
    </span>
  );
}

You can use these hooks to create your own countdown or timer components, giving you full flexibility and control.

Why Choose Mantine Clock?

Seamless Mantine Integration

Mantine Clock is designed specifically for Mantine’s design language. You get:

• Consistent look and feel across your UI

• Responsive and accessible components

• Effortless integration with Mantine’s theming and color modes

Built for NextJS & Typescript

Whether you’re building a static site or a dynamic dashboard, Mantine Clock is optimized for server-side rendering and type safety. Enjoy autocompletion and reliable prop types out of the box.

Community-Driven and Actively Maintained

Mantine Clock is part of the vibrant Mantine Extensions Hub (see more extensions ↗), ensuring you’re using components that are open-source, actively developed, and trusted by the community.

Real-World Use Cases

• Dashboards: Show local and global times for distributed teams.

• Event Pages: Add countdowns for launches, webinars, or deadlines.

• Productivity Tools: Integrate timers and clocks into your workflow apps.

• Educational Platforms: Teach time concepts interactively.

Final Thoughts

If you’re already leveraging Mantine for your React projects, Mantine Clock is a must-have extension. It brings professional-grade timekeeping, stunning visuals, and seamless integration—all with the reliability and polish you expect from the Mantine ecosystem.

If you’re building modern web applications with Next.js and TypeScript, you already know the importance of clean, interactive data presentation. Tables are a staple for displaying structured information, but what if you could offer your users a familiar, macOS Finder-style list view—complete with column reordering, resizing, sticky headers, and more? Enter the Mantine ListViewTable extension: an innovative component that takes your tables to the next level, all while staying true to the elegance and flexibility of the Mantine UI Library.

What is Mantine ListViewTable?

Mantine ListViewTable is a powerful extension built on top of the Mantine Table component. This extension brings a feature-rich, Finder-inspired list view to your React projects. Imagine the intuitive, drag-and-drop experience of macOS’s file manager—now available in your web app, with the full power of TypeScript and Next.js.

Why Choose ListViewTable?

• Column Reordering & Resizing: Users can drag columns to reorder them and adjust widths, just like in native desktop apps.

• Sticky Headers: Keep headers visible as you scroll, ensuring context is never lost—even in long tables.

• Customizable Borders & Spacing: Fine-tune the appearance with table, row, and column borders, plus flexible spacing and alignment options.

• Advanced States: Built-in support for loading and empty states offers a polished, user-friendly experience.

• External Control: Easily integrate with your own state logic for sorting, column configuration, and more.

• Vertical Variant: Display key-value pairs for detailed views—perfect for user profiles or configuration panels.

Seamless Integration with Mantine UI

If you’re already leveraging Mantine UI for its robust components and theming, ListViewTable fits right in. Installation is a breeze:

yarn add @gfazioli/mantine-list-view-table

Don’t forget to import the styles at your app’s root:

import '@gfazioli/mantine-list-view-table/styles.css';

And just like that, you’re ready to supercharge your tables with a drop-in component that feels native, fast, and fully customizable.

Real-World Usage Example

Here’s how easy it is to implement a dynamic, interactive list view:

import { ListViewTable } from '@gfazioli/mantine-list-view-table';
import { Badge, Text } from '@mantine/core';
import [data, columns] from './data';

function Demo() {
  return (
    <ListViewTable
      columns={columns}
      data={data}
      rowKey="id"
      onRowClick={(row) => console.log('Clicked:', row.name)}

    />
  );
}

Want sticky headers? Just add the stickyHeader prop. Need to handle custom sorting or persist column state? The component exposes flexible callbacks so you can sync with Redux, Zustand, or any state management solution.

Advanced Features for Modern Apps

• Scroll Area Integration: Pair with Mantine’s ScrollArea for fixed-height, scrollable tables with sticky headers that always stay in view.

• Width Constraints: Set minimum, maximum, or fixed column widths to maintain perfect layouts.

• Loading & Empty States: Show spinners or custom messages when data is loading or absent.

• Vertical Variant: Switch to a key-value layout for detail-rich views—ideal for admin panels and dashboards.

Explore More on the Mantine Extensions HUB

ListViewTable is part of the growing ecosystem of Mantine Extensions. The HUB is your one-stop shop for discovering powerful, community-driven components that extend Mantine’s core capabilities—think calendars, onboarding tours, spinners, and more. Whether you’re building dashboards, SaaS tools, or data-heavy applications, the Extensions HUB offers a treasure trove of ready-to-use solutions.

Why Developers Love Mantine ListViewTable

• Familiar UX: Users instantly recognize the Finder-style interface, reducing friction and boosting productivity.

• TypeScript First: Get full type safety and autocompletion out of the box.

• Next.js Friendly: Works seamlessly with server-side rendering and static generation.

• Open Source & Community-Driven: Built and maintained by passionate developers—contributions welcome!

Get Started Today

Ready to give your tables a productivity boost? Head over to the Mantine ListViewTable documentation for detailed guides, live demos, and code examples. Don’t forget to explore the Mantine UI Library for even more UI inspiration, and check out the Mantine Extensions HUB for the latest community innovations.

Upgrade your data tables—your users (and your codebase) will thank you!