mantinedev/mantine

Features

• Component Libraries - Provides a comprehensive collection of accessible, customizable, and themeable UI components for modern web applications.
• Application Shells - Constructs responsive application layouts with fixed headers, navbars, and footers.
• Base Components - Provides a base component that serves as the foundation for all other UI elements.
• Focus Management - Focus is trapped within the child node if the active prop is true When the FocusTrap component is mounted or when the active prop changes from false to true, the first element with the data-autofocus attr
• Grid Systems - Provides a responsive 12-column grid system for structured layout design.
• Theming Engines - Propagates global design tokens and component styles throughout the application.
• Form Management - Manages complex form data, validation, error tracking, and submission workflows for controlled and uncontrolled inputs.
• Animation Components - Ships a component for animating content visibility with slide transitions.
• Breadcrumbs - Provides a navigation component to display the current page hierarchy.
• Buttons - Ships a dedicated button component for closing UI elements.
• Cards - Provides structured container components for organizing content into distinct, visually separated blocks.
• Comboboxes - Provides hooks and components to manage combobox state, visibility, and selection logic.
• Component Composition Patterns - Enables the construction of complex UI widgets through the assembly of modular, single-purpose sub-components.
• Flexbox Layouts - Provides a flexible container component for composing UI elements.
• Floating Window Components - Use the constrainToViewport prop to restrict element movement to the viewport boundaries. If you do not set the constrainToViewport prop, the element can be dragged outside the viewport: ```tsx import { Button, Close
• Focus Traps - Constrains keyboard focus within a specific component subtree to improve accessibility.
• Input Components - Mantine provides flexible components for building custom select or autocomplete inputs, offering full control over rendering and interaction logic.
• Input Controls - Implements a controlled input component for selecting numerical values within a specific range.
• Interaction Hooks - Encapsulates complex interaction logic like form validation and focus management into reusable hooks.
• Layout Components - Provides structural components for creating adaptive application shells and navigation interfaces.
• Layout Containers - Centers content with configurable padding and maximum width constraints.
• Layout Frameworks - Constructs robust, adaptive layouts with integrated navigation and headers that adjust to screen sizes.
• Modals - Offers an overlay window component supporting custom sizing, vertical centering, and scrollable content areas.
• Navigation Buttons - Ships a toggleable navigation button component for mobile menus.
• Overlay Systems - Provides accessible modal and drawer management with built-in focus trapping and keyboard navigation.
• Typography Components - Ships a component for rendering inline and block code snippets.
• Component Libraries - Fully featured component library with extensive hooks.
• UI Component Libraries - Fully featured React component library with native dark mode support.
• UI Frameworks - Feature-rich library with hooks and dark mode support.
• Miscellaneous Tools - React component library.
• Button Components - Provides a versatile button component with support for variants, sizes, and icons.
• Data Tables - Provides a component to display structured information in table format with custom headers, footers, and row layouts.
• Drawers - Provides an overlay panel component that can be positioned at any edge of the screen with configurable sizes.
• Dropdown Menus - Provides interactive dropdown menus for grouping secondary actions into single trigger areas.
• File Inputs - Provides a dedicated form input component for capturing user files.
• Form Management - Simplifies complex data collection and validation through specialized form hooks.
• Sidebar Layouts - Mantine provides components to arrange content within sidebars using flexible sections that grow to fill available space and support internal scrolling.
• State Management Providers - Distributes configuration, theme settings, and component state across deeply nested component trees using hierarchical providers.
• Tabs - Organizes content into switchable views using flexible tabbed interfaces.
• Virtualization Utilities - Mantine includes a specialized hook to render large lists of options in comboboxes efficiently, handling thousands of items without performance degradation.
• Accessibility Utilities - FocusTrap.InitialFocus is a special component that adds a visually hidden element which will receive the focus when the focus trap is activated. Once FocusTrap.InitialFocus loses focus, it is removed from the tab ord
• Clipboard Utilities - Provides components for copying text to the system clipboard.
• Color Pickers - Includes a color picker component to capture values in formats like hex or rgba, with support for predefined swatches.
• Color Selection Components - Package: @mantine/core Import: import { AlphaSlider } from '@mantine/core'; Description: Slider component for selecting alpha channel in color pickers (0 – 1) ## Usage Use AlphaSlider component to allow users to select
• Data Visualization Components - Optimizes the display of large datasets using virtualized lists and hierarchical structures.
• Disclosure Components - Manages boolean state for UI components with built-in handlers for toggling visibility.
• File Uploaders - Provides a button-based interface for triggering file selection dialogs.
• Gesture Recognition Hooks - Mantine includes a hook to track pointer drag gestures, including movement, velocity, and direction, using the Pointer Events API for mouse and touch input.
• Multi-Select Inputs - Mantine provides a component to select multiple predefined values from searchable dropdown lists, with support for custom rendering and filtering configuration.
• Numeric Inputs - Provides numeric input controls with decimal formatting, boundary constraints, and increment/decrement functionality.
• Pagination - Provides page navigation controls for switching between different content segments or data pages.
• Popovers - Provides a floating content area that displays relative to a target element, supporting focus management.
• Radio Groups - Manages single selection values from radio input sets with shared labels and validation states.
• Resizable Panes - Supports resizable split pane layouts with horizontal or vertical orientations.
• Scroll Areas - Provides containers that automatically become scrollable when content exceeds size limits.
• Selection Inputs - Mantine provides a component to capture user input from predefined lists, preventing custom values while supporting search, filtering, and dropdown customization.
• Sliders - Allows value selection from a range via dragging or keyboard interaction.
• Theming Systems - Propagates design tokens globally via CSS variables to enable dynamic theme switching and consistent styling.
• Tree Views - Supports selection from hierarchical tree data with cascading and indeterminate state management.
• Virtual Rendering - Optimizes performance by rendering only the visible subset of large datasets to minimize DOM node count.
• Performance Utilities - Manages state with built-in debounce delays to limit update frequency.
• State Management Hooks - Mantine provides a hook to debounce state changes, delaying expensive operations like API requests by returning values that update only after periods of inactivity.
• Execution Utilities - Mantine includes a hook to create debounced versions of functions, delaying execution until a specified time passes with options for leading execution and unmount flushing.
• Accessible Menus - Implements menu components with built-in focus trapping and keyboard navigation support.
• Alerts - Includes a component to show static alert messages, supporting custom titles, icons, and close buttons.
• Autocomplete Components - Displays a text input with a suggestion list while supporting custom user values.
• Badges - Provides a small label component to highlight status information with support for custom colors and icons.
• Checkbox Groups - Provides a component to manage the state of multiple related checkboxes as a single group.
• Dividers - Provides visual separation between content sections using customizable divider components.
• Floating Element Positioning - Calculates coordinate offsets for overlays and menus to ensure visibility within viewport boundaries.
• Floating Indicators - Provides a visual indicator that tracks and highlights the active element within a group of components.
• Focus Management Systems - Coordinates active layers like modals by programmatically constraining keyboard navigation to the topmost element.
• Hooks - If you prefer the hook API, you can use the useFloatingWindow hook. It supports most of the FloatingWindow features: ```tsx import { Button, CloseButton, Group, Paper, Portal, Text } from '@mantine/core'; import { useD
• Navigation Components - Provides a breadcrumb component to display navigation paths.
• Navigation Links - Displays links that automatically inherit and apply theme-based styles.
• Overlay Components - Package: @mantine/core Import: import { Dialog } from '@mantine/core'; Description: Display a fixed overlay dialog at any side of the screen ## Usage Dialog is a simplified version of the Modal component. It does not i
• Overlay Dialogs - Displays fixed-position overlay dialogs at various screen locations.
• Radio Inputs - Mantine provides a radio input component supporting custom icons and various visual states like disabled or error for use in forms.
• Segmented Controls - Displays linear sets of segments for selecting a single value from predefined options.
• Steppers - Includes components to guide users through multi-part processes with visual progress indicators.
• Tag Inputs - Captures lists of string values through free-form text input with suggestion support.
• Text Highlighting - Highlights specific substrings within text using custom styling.
• Text Highlighting Components - You can assign different colors to different highlighted terms by providing an array of objects with text and color properties: ```tsx import { Highlight } from '@mantine/core'; function Demo() { return ( Error: Inva
• Text Highlighting Utilities - Case-insensitive: 'hello' matches 'Hello', 'HELLO', 'hElLo', etc. (controlled by caseInsensitive, defaults to true) Accent-insensitive: 'cafe' matches 'café', 'cafè', 'CAFÉ', etc. (controlled by `accentIn
• Text Styling Components - Provides configurable text-decoration properties for links and text elements within the user interface.
• Theme Utilities - Detects and subscribes to system color scheme changes using media query APIs.
• Toggle Groups - Manages collections of related boolean values using groups of toggle switches.
• Toggle Switches - Includes a toggle switch component to capture true or false values, supporting custom labels and icons.
• Tooltip Components - Provides a small text box component that appears over an element during hover to provide additional context.
• DOM Interaction Hooks - Detects clicks outside specific DOM elements to support custom event handling.
• Event Handling Utilities - Mantine includes a hook to bind event listeners to elements, ensuring memory safety by automatically removing listeners when the associated component is unmounted.

Star history