<h2>Overview</h2>
The Mantine Clock Component is a versatile and stylish addition to any React application, built atop the robust Mantine library. It offers both an analog clock and powerful time-management hooks, enhancing user experience with real-time time integration and customizable aesthetics. Whether you're looking to implement a live clock or a static time display, this component provides flexible options that cater to various needs.
Beyond standard clock features, Mantine Clock allows for sophisticated styling and configuration to match your application's theme. With options for visual sector arcs and precise control over clock aesthetics, it brings a unique, vibrant touch to timekeeping in digital environments.
<h2>Features</h2>
<ul>
<li>
Real-time Updates: Synchronizes time automatically, ensuring the clock displays accurate time with configurable update frequency.
</li>
<li>
Timezone Support: Compatible with global timezones, utilizing the IANA timezone database to cater to a worldwide audience.
</li>
<li>
Customizable Styling: Offers extensive options for styling, allowing for a personalized appearance that fits seamlessly into existing designs.
</li>
<li>
TypeScript Support: Comes with complete type definitions, enhancing the developer experience and ensuring type safety in applications.
</li>
<li>
Accessibility: Designed with WCAG compliance in mind, ensuring that it is usable by individuals relying on screen readers and other assistive technologies.
</li>
<li>
Performance Optimized: Efficiently manages updates with minimal re-renders, contributing to a smoother user experience.
</li>
<li>
Responsive Design: Automatically adjusts to different screen sizes, ensuring functionality across various devices.
</li>
</ul>

<h2>Overview</h2>
The Mantine Flip component provides an engaging way to create UI elements that can efficiently toggle between two states. Perfect for applications that prioritize progressive disclosure, such as editing panels or profile detail toggles, this component delivers both functionality and aesthetics. With its easy-to-use interface based on the Mantine library, developers can quickly implement intuitive interactions within their apps.
What sets the Mantine Flip component apart is its flexibility in usage. It supports both uncontrolled and controlled implementations, making it suitable for a variety of use cases. Whether you want to keep it simple or fully integrate the component with your app's state management, Mantine Flip has got you covered.
<h2>Features</h2>
<ul>
<li>
Two-Face Animation: The component seamlessly animates between front and back views, enhancing user interaction while conserving space in your UI.
</li>
<li>
Uncontrolled and Controlled Modes: Use <code>Flip.Target</code> to trigger animations with any element in uncontrolled mode, or manage the flips directly through your React state for controlled functionality.
</li>
<li>
Custom Transition Options: Personalize the flipping experience with customizable transitions, including vertical flips and specific rotation directions for smooth animations.
</li>
<li>
Refined Styling Hooks: Utilize classNames and the Styles API to target inner component parts for tailored styling, ensuring your design aligns perfectly with your application's aesthetics.
</li>
<li>
Practical Examples: The component comes with demonstrative patterns, showcasing its utility in various scenarios like credit-card editing or modal settings panes.
</li>
<li>
Size Constraints: Enforce size restrictions for the component, providing the necessary adaptability for different layout needs within your app.
</li>
<li>
Sponsorship Support: Backing this open-source project not only helps maintain its active development but also encourages contributions that enhance its capabilities over time.
</li>
</ul>

<h2>Overview</h2>
The Mantine Marquee component is an innovative addition to the Mantine library, designed specifically for React applications. It offers a seamless scrolling experience, allowing users to showcase dynamic content such as text, images, and cards in a visually appealing manner. Its versatility enables developers to create engaging user interfaces with minimal effort, making it a valuable tool in the modern web development landscape.
This component stands out with its range of ergonomic properties that facilitate customization, ensuring that the marquee won’t just function but will enhance the overall aesthetic of any webpage. Whether it's for a product showcase, testimonials, or simple decorative effects, the Mantine Marquee is engineered to meet various needs while maintaining simplicity in usage.
<h2>Features</h2>
<ul>
<li>Continuous Scrolling: Creates a smooth, uninterrupted flow of content, ideal for displaying multiple items in a compact space.</li>
<li>Direction Control: The reverse option allows users to change the scrolling direction effortlessly, providing flexibility in design.</li>
<li>Vertical and Horizontal Options: Easily switch between scrolling vertically or horizontally to suit different layout requirements and aesthetics.</li>
<li>Fade Edges Effect: Adds a gradient mask around the edges for a polished look, customizable in size and color.</li>
<li>Pause on Hover: Stops the marquee's motion when users interact with it, allowing for better readability of the content.</li>
<li>Customizable Speed and Spacing: Fine-tune the scrolling duration, gap between items, and repeat settings for a tailored user experience.</li>
<li>Dedicated Stylesheets: Comes with built-in styles and an optional import for clean and scoped CSS integration, simplifying the styling process.</li>
<li>Example Demos: Includes various demos showcasing different use cases, from basic colored boxes to complex testimonial displays, demonstrating the component's versatility.</li>
</ul>

<h2>Overview</h2>
The Mantine Onboarding Tour Component offers a powerful and flexible way to introduce users to a React application built on the Mantine library. It allows developers to craft detailed onboarding experiences with ease, utilizing customizable steps that can cater to various user journeys. This tool is especially beneficial for enhancing user engagement and ensuring that new users can navigate your application effectively.
With the ability to define each onboarding step using strings, React nodes, or functions that interact dynamically with the tour controller, the possibilities are vast. The component is designed for simplicity and effectiveness, making it an essential asset for any developer looking to create modular and engaging onboarding experiences.
<h2>Features</h2>
<ul>
<li>Customizable Steps: Define each step with a title, content, and footer that can be completely tailored to fit your application’s needs.</li>
<li>Dynamic Rendering: Leverage React nodes and functions to render content dynamically, enhancing the responsiveness of the user experience.</li>
<li>Focus and Reveal Behavior: Control the visual aspects of each step using FocusReveal props for overlays, transitions, and scrolling behavior.</li>
<li>Flexible Targeting: Match targets using data attributes or the built-in OnboardingTour.Target component, allowing integration with elements outside the tour's immediate children.</li>
<li>Controller Interface: Expose a controller for managing the current step state and navigation actions like start, next, and previous.</li>
<li>Advanced Hooks: Utilize hooks for advanced customization of popover content, steppers, and overlays, making it suitable for complex layouts.</li>
<li>Accessibility: Designed with accessibility in mind, ensuring that onboarding experiences are inclusive for all users.</li>
</ul>

<h2>Overview</h2>
The Mantine Parallax Component is an innovative addition to the Mantine library, designed to bring captivating motion effects to user interfaces. This component is perfect for developers looking to enhance interactivity within their applications. With its ability to create immersive experiences through 3D transformations and hover effects, Mantine Parallax transforms the way designers and developers can engage users. The component has a variety of props that allow for significant customization, making it versatile for various use cases.
One standout feature is its integration with scroll-driven interactions, enabling animations to respond dynamically to user scrolling. This capability ensures that each element feels alive and synchronized with the user's actions, enhancing the overall user experience. Whether you're interested in creating striking cards, banners, or panels, Mantine Parallax provides the tools necessary to design responsive and visually stunning UI components effortlessly.
<h2>Features</h2>
<ul>
<li>
Flexible Motion Effects: Create a range of interactive motion effects, from classic tilts to sophisticated 3D transformations.
</li>
<li>
Customizable Props: Fine-tune depth and response with props for perspective, rotation, skew, and light effects, giving developers precise control over animations.
</li>
<li>
Scroll-Driven Interactions: Utilize the <code>useWindowScroll</code> hook to tie transformations to scroll position, making UI elements reactive to user movement.
</li>
<li>
Independent Background Parallax: Achieve layered scenes with independent parallax effects for backgrounds, enhancing depth and immersion.
</li>
<li>
Guardrails for Control: Set disabled states or use large initial perspective values to prevent extreme configurations, ensuring a stable user experience.
</li>
<li>
CSS Layer Integration: Simplify styling and integration via provided CSS layers, allowing for quick implementation without compromising design.
</li>
<li>
Active Maintenance: The project is regularly updated, providing a reliable and evolving toolset for developers, supported by community sponsorship.
</li>
</ul>

<h2>Overview</h2>
The Mantine Rings Progress component brings a new dimension to data visualization by enhancing the existing RingProgress component from the Mantine UI library. This creative widget allows users to present multiple concurrent metrics in a compact and visually appealing format, utilizing concentric rings. Each ring can be customized with distinct values and colors, providing a clear representation of various data points while offering flexibility in display options, such as incorporating text or emojis.
What makes this component stand out is its ability to accommodate dynamic uses, like countdown timers, while maintaining an aesthetically pleasing design. With customizable size and thickness options, the Rings Progress component is perfect for dashboards, monitors, or compact cards, making it a versatile tool for developers looking to add engaging visual elements to their applications.
<h2>Features</h2>
<ul>
<li>Customizable Rings: Each ring can be individually defined by a value and color, allowing for personalized data visualization.</li>
<li>Rich Label Options: Supports plain text, emojis, or any React element as labels, providing flexibility in how you present your metrics.</li>
<li>Compact Design: The concentric layout allows for multiple metrics to be displayed in a single compact widget, ideal for space-constrained dashboards.</li>
<li>Dynamic Functionality: Perfect for scenarios like countdowns, with the ability to represent different time units using separate rings.</li>
<li>Style Integration: Includes style imports that align with Mantine's design principles, ensuring a cohesive look throughout your application.</li>
<li>User Friendly: Designed to prioritize readability, discouraging inline tooltips that can interfere with viewing the rings.</li>
<li>Open Source Development: The component is maintained and updated based on community feedback, fostering a collaborative approach to enhancements.</li>
</ul>

<h2>Overview</h2>
The Mantine Split Pane Component is a game-changer for developers wanting to create flexible and resizable layouts. Built on the Mantine library, this component enhances user interfaces by allowing users to interact with multiple panes that can be effortlessly resized. With the ability to manage layout orientations and responsive breakpoints, it revolutionizes the way layouts can be structured in web applications.
This updated architecture separates the pane content from the resizing control, which improves the customizability of the resizer. The new version offers a way to enforce constraints on pane sizes while ensuring a smooth user experience with real-time updates and easy accessibility features.
<h2>Features</h2>
<ul>
<li>Customizable Resizer: The resizer element can be personalized per instance, allowing for unique styles like gradients and hover effects.</li>
<li>Flexible Layouts: Supports both horizontal and vertical orientations, making it adaptable to various UI requirements.</li>
<li>Size Constraints: Developers can set initial sizes in pixels or percentages and enforce minimum/maximum limits for responsive design.</li>
<li>Responsive Breakpoints: Automatically adjusts the layout according to screen size, ensuring optimal usability across devices.</li>
<li>Lifecycle Events: Exposes resize events that provide current dimensions of adjacent panes, enabling persistent layouts through localStorage.</li>
<li>Keyboard Accessibility: The resizer is focusable, supporting keyboard navigation and resizing to enhance accessibility for all users.</li>
<li>Clear JSX Structure: Offers a simple and intuitive API that fits seamlessly into Mantine applications, streamlining development processes.</li>
</ul>

<h2>Overview</h2>
The Mantine Text Animate component offers a robust animation toolkit tailored for text in React applications, seamlessly integrating with the Mantine UI library. This powerful tool empowers developers to craft engaging text animations, making it an excellent choice for enhancing user interfaces. With features that allow for fine-tuned control over motion dynamics, users can create stunning effects that elevate both aesthetics and functionality.
This component supports a range of animations and provides various options for customization. From entry and exit transitions to static states, developers can easily apply different effects such as slide, scale, and blur. Additionally, advanced features like Typewriter and NumberTicker make it suitable for interactive data presentations, offering an array of controls to engage users more effectively.
<h2>Features</h2>
<ul>
<li>Customizable Animations: Choose from entry, exit, and static states along with animations like slide, scale, and blur to create captivating text transitions.</li>
<li>Granular Control: Adjust the animation intricacies using the <code>by</code> prop, which allows for character, word, or line-based animation effects.</li>
<li>Fine-tuning Options: Modify properties such as translate distance, scale amount, and blur amount for each animation to achieve the desired effect intensity.</li>
<li>Event Handlers: Utilize <code>onAnimationStart</code> and <code>onAnimationEnd</code> callbacks to manage the animation lifecycle, enhancing interactivity and responsiveness.</li>
<li>Typewriter Effect: Implement the TextAnimate.Typewriter feature to simulate typing with customizable cursor and blinking options, speed control, and loop functionality.</li>
<li>Dynamic Number Animation: The <code>useNumberTicker</code> feature effortlessly animates numeric values, providing options for speed and easing to enrich visual data representation.</li>
<li>CSS Integration: Fully compatible with Mantine props for styling, making it easy to incorporate animations into existing themes and layouts.</li>
<li>Community Support: Actively maintained with ongoing improvements and features, ensuring long-term reliability and user engagement.</li>
</ul>

<h2>Overview</h2>
The Mantine Next.js + Nextra template is an impressive solution designed for developers looking to create a documentation site utilizing Next.js app router combined with Mantine and Nextra. This template streamlines the process of setting up a documentation site, providing a robust framework right out of the box. With modern features and a focus on developer experience, it aims to enhance productivity and maintainability for both individual developers and teams.
This template caters to both aesthetics and functionality, supporting features like dark mode synchronization and customizable components. By simplifying the folder structure and including essential scripts, it lays a solid foundation for users to build upon, ensuring that they can focus on content rather than setup intricacies.
<h2>Features</h2>
<ul>
<li>
PostCSS with mantine-postcss-preset: Enhance your styling capabilities with an efficient PostCSS setup tailored for Mantine.
</li>
<li>
TypeScript Support: Embrace type safety in your development process, making your codebase more robust and easier to maintain.
</li>
<li>
Storybook Integration: Test and develop UI components in isolation with Storybook, a powerful tool for component-driven development.
</li>
<li>
Jest Setup with React Testing Library: Ensure quality and reliability with a seamless testing infrastructure for your React components.
</li>
<li>
Customizable Components: Utilize a dedicated components folder with pre-built components that you can easily adapt to meet your specific needs.
</li>
<li>
Nextra Documentation Site: Leverage the functionality of Nextra to create a smooth and efficient documentation experience, complete with a Mantine theme.
</li>
<li>
Dark Mode Synchronization: Provide a cohesive user experience by syncing dark mode settings between your documentation and application.
</li>
<li>
Comprehensive npm Scripts: Benefit from a suite of development scripts to streamline the build, testing, and development processes, including type checks and linting.
</li>
</ul>

Gfazioli

Boilerplate Laravel Facade

Mantine Clock

Mantine Flip

Mantine Marquee

Mantine Onboarding Tour

Mantine Parallax

Mantine Rings Progress

Mantine Split Pane

Mantine Text Animate

Next App Nextra Template

React Component Boilerplate