{"repo":"gfazioli/mantine-flip","free":true,"listed":false,"github":"https://github.com/gfazioli/mantine-flip","clone":"git clone https://github.com/gfazioli/mantine-flip.git","description":"A Mantine UI Library Extension Flip component","language":"TypeScript","stars":31,"topics":["component","flip","mantine","mantine-ui","mantine-v7","nextjs","reactjs","typescipt","mantine-v8"],"license":"MIT","category":"ui-components","readme_excerpt":"Mantine Flip Component --- ❤️ If this component has been useful to you or your team, please consider becoming a sponsor Overview This component is created on top of the Mantine library. It requires Mantine 9.x and React 19 . Mantine Flip is a two-face container that animates between a front and a back view, ideal for compact UIs that need progressive disclosure (e.g., editing panels, settings, sign-in/sign-up toggles, or profile details). It supports both uncontrolled usage with Flip.Target to wire any element as a click trigger, and controlled usage via flipped/defaultFlipped using React state for full synchronization with your app logic. The component enforces exactly two children, accepts size constraints (w/h), and offers transition customization such as vertical flipping and distinct rotation directions for flip-in and flip-out. Styling hooks (classNames/Styles API) let you target inner parts for design refinement, while examples demonstrate practical patterns like credit-card editing, modal-like settings panes, and multi-target triggers within a single face. [!note] → Demo and Documentation → Youtube Video → More Mantine Components Installation or After installation import package styles at the root of your application: Usage As you can see, the Flip component wraps two children, which are the two views that you want to flip between. The Flip.Target component is used to define the trigger for the flip animation. It can be any component, such as a button, or a link, or e","default_branch":null,"files":null,"tree":[],"storefront":"/r/gfazioli","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/gfazioli/mantine-flip/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}