Mantine Extensions

Video that feels native to your design system.

A production‑ready video player for React, built on Mantine 9 and React 19. Compose the control bar from primitives, drive everything from a headless hook, or just drop it in as the background of your hero section — like the one you're looking at.

Get started GitHub

What you get

Six features, zero compromises

Each part of the player is its own component you can swap, restyle or replace — without losing the integration with the rest of Mantine.

Compound API

Nine sub-components composable in any layout. Theme-aware, accessible, typed.

Headless hook

useVideo gives full state + actions to build any UI you can imagine.

Styles API

classNames, styles, vars and unstyled on every part. Full theme integration.

Live scrubbing

Drag the timeline and see the frame update in real time, YouTube‑style.

PiP + Fullscreen

Built-in support with capability detection — buttons self-hide where unsupported.

Accessibility

ARIA labels, focus management, keyboard shortcuts on every interactive part.

Use it as background

One prop turns the player into a hero background.

Pass asBackground and the component positions itself absolutely inside its parent, applies object-fit: cover, disables all the interactive defaults, and renders a discreet mute toggle in the corner. Drop your content on top — text, CTAs, anything you like — and you're done.

Read the docs

~15 KB

gzipped, without HLS

compound sub‑components

built‑in variants

100%

Mantine theme aware

Ready to add video to your Mantine app?

yarn add @gfazioli/mantine-video

Footage — manta & aquarium — Internet Archive

This Mantine UI extension component has been created to extend the capabilities of Mantine UI. Feel free to use it and contribute to it. Don't forget to star it on GitHub. And if you wish, you can also follow me on Twitter. Obviously, you can also donate to support the development of this component.