Mantine Video v1.0 — a Mantine-native video player with compound API + headless hook

Hey everyone 👋 Just shipped Mantine Video v1.0 — a complete video element replacement built specifically for the Mantine ecosystem.

It's part of the Mantine Extensions Hub family of components.

The idea was simple: every Mantine app I built ended up wrapping the native HTML video element with the same boilerplate — custom controls, theme-aware styling, fullscreen, Picture-in-Picture, captions, keyboard shortcuts.

So I packaged the whole stack into one component that ships in three layers, layered from "drop-in" to "fully custom":

🎬 The default Video component — a polished player with four built-in variants (overlay, minimal, floating, bordered).

🧩 A composable Compound API — nine sub-components you can reorder, replace or restyle: Video.Controls, Video.PlayButton, Video.SkipButton, Video.Timeline, Video.TimeDisplay, Video.MuteButton, Video.CaptionsButton, Video.PiPButton, Video.FullscreenButton.

🪝 A fully headless useVideo hook — 16 state values plus 16 actions, for when you want to drive a 100% custom UI on top of a plain video ref.

Highlights

• Picture-in-Picture with lifecycle callbacks (onEnterPictureInPicture / onLeavePictureInPicture)

• Fullscreen, captions via native track element, keyboard shortcuts (Space/K, J/L, arrow keys, M, F, P)

• Live timeline scrubbing — drag the thumb and the frame updates in real time, YouTube-style

• asBackground prop — turn the same player into a hero / section background in one line, complete with a discreet floating mute toggle

• Full Mantine Styles API (classNames, styles, vars, unstyled) on every part — theme-aware out of the box

• TypeScript-first, MIT, zero hidden runtime dependencies

Targets Mantine 9 and React 19.

🎥 Live demos & docs → https://gfazioli.github.io/mantine-video

📦 npm → https://www.npmjs.com/package/@gfazioli/mantine-video

🔗 GitHub → https://github.com/gfazioli/mantine-video

🌐 All Mantine Extensions → https://mantine-extensions.vercel.app/

Happy to hear feedback — especially around the compound API surface and the headless hook ergonomics.

What use cases would you like to see covered next? Live streaming? HLS adaptive bitrate? Multiple source children for codec fallbacks (already cooking — see GitHub issue #1 on the repo).