Flip

A Mantine Flip component is a wrapper for any component that can be flipped. It is used to create cards, flip boxes and more.

Installation

yarn add @gfazioli/mantine-flip

Overview

Flip provides a 3D card-flip effect for any content:

• Front and back faces — render different content on each side
• Click or hover trigger — flip on interaction
• Horizontal and vertical flip directions
• Controlled mode — programmatic flip via ref or state
• Customizable duration and easing
• Styles API — full style customization

Demos

Clock Widget (Flip + Clock)

A macOS-style clock widget that flips to reveal settings on the back. Click the gear icon to flip and configure timezone and seconds hand, then press Done to apply.

This demo combines Flip (controlled mode with spring easing) and Clock (analog clock with timezone and second hand opacity control).