# mantinedev/mantine

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/mantinedev-mantine).**

30,577 stars · 2,245 forks · TypeScript · mit

## Links

- GitHub: https://github.com/mantinedev/mantine
- Homepage: https://mantine.dev
- awesome-repositories: https://awesome-repositories.com/repository/mantinedev-mantine.md

## Topics

`dark-mode` `dark-theme` `hooks` `react` `typescript` `uikit`

## Description

Mantine is a comprehensive component library for building accessible and responsive web applications. It provides a foundational set of UI elements and layout primitives, anchored by a base component that supports consistent styling, spacing, and layout properties across the entire interface. The library is built on a design-driven theme engine that uses a provider-based system to propagate global design tokens and color schemes throughout an application.

The library distinguishes itself through a robust architecture that emphasizes component composition and reusable interaction logic. It utilizes hierarchical context providers for state distribution and a specialized hook-based system to manage complex form workflows, validation, and submission processes. Developers can leverage a wide array of hooks for browser API interaction, performance optimization, and UI state management, allowing for the decoupling of complex behaviors from the rendering layer.

Mantine covers a broad capability surface, including a responsive layout toolkit for constructing application shells, an accessible overlay framework for managing modals and drawers, and high-performance data rendering utilities like virtualized lists. The library also includes a diverse collection of atomic and composite interface elements, ranging from standard form inputs and buttons to advanced navigation components and interactive data displays.

The library is distributed as a TypeScript-based package, with core functionality available through the primary library import.

## Tags

### User Interface & Experience

- [Component Libraries](https://awesome-repositories.com/f/user-interface-experience/component-libraries.md) — Provides a comprehensive collection of accessible, customizable, and themeable UI components for modern web applications.
- [Application Shells](https://awesome-repositories.com/f/user-interface-experience/application-shells.md) — Constructs responsive application layouts with fixed headers, navbars, and footers. ([source](https://mantine.dev/llms/core-app-shell.md))
- [Base Components](https://awesome-repositories.com/f/user-interface-experience/base-components.md) — Provides a base component that serves as the foundation for all other UI elements. ([source](https://mantine.dev/llms/core-box.md))
- [Focus Management](https://awesome-repositories.com/f/user-interface-experience/focus-management.md) — * 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 ([source](https://mantine.dev/llms/core-focus-trap.md))
- [Grid Systems](https://awesome-repositories.com/f/user-interface-experience/grid-systems.md) — Provides a responsive 12-column grid system for structured layout design. ([source](https://mantine.dev/llms/core-grid.md))
- [Theming Engines](https://awesome-repositories.com/f/user-interface-experience/theming-engines.md) — Propagates global design tokens and component styles throughout the application.
- [Animation Components](https://awesome-repositories.com/f/user-interface-experience/animation-components.md) — Ships a component for animating content visibility with slide transitions. ([source](https://mantine.dev/llms/core-collapse.md))
- [Breadcrumbs](https://awesome-repositories.com/f/user-interface-experience/breadcrumbs.md) — Provides a navigation component to display the current page hierarchy. ([source](https://mantine.dev/llms/core-breadcrumbs.md))
- [Buttons](https://awesome-repositories.com/f/user-interface-experience/buttons.md) — Ships a dedicated button component for closing UI elements. ([source](https://mantine.dev/llms/core-close-button.md))
- [Cards](https://awesome-repositories.com/f/user-interface-experience/cards.md) — Provides structured container components for organizing content into distinct, visually separated blocks. ([source](https://mantine.dev/llms/core-card.md))
- [Comboboxes](https://awesome-repositories.com/f/user-interface-experience/comboboxes.md) — Provides hooks and components to manage combobox state, visibility, and selection logic. ([source](https://mantine.dev/llms/core-combobox.md))
- [Component Composition Patterns](https://awesome-repositories.com/f/user-interface-experience/component-composition-patterns.md) — Enables the construction of complex UI widgets through the assembly of modular, single-purpose sub-components.
- [Flexbox Layouts](https://awesome-repositories.com/f/user-interface-experience/flexbox-layouts.md) — Provides a flexible container component for composing UI elements. ([source](https://mantine.dev/llms/core-flex.md))
- [Floating Window Components](https://awesome-repositories.com/f/user-interface-experience/floating-window-components.md) — 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 ([source](https://mantine.dev/llms/core-floating-window.md))
- [Focus Traps](https://awesome-repositories.com/f/user-interface-experience/focus-traps.md) — Constrains keyboard focus within a specific component subtree to improve accessibility. ([source](https://mantine.dev/llms/core-focus-trap.md))
- [Input Components](https://awesome-repositories.com/f/user-interface-experience/input-components.md) — Mantine provides flexible components for building custom select or autocomplete inputs, offering full control over rendering and interaction logic. ([source](https://mantine.dev/llms/core-combobox.md))
- [Input Controls](https://awesome-repositories.com/f/user-interface-experience/input-controls.md) — Implements a controlled input component for selecting numerical values within a specific range. ([source](https://mantine.dev/llms/core-angle-slider.md))
- [Interaction Hooks](https://awesome-repositories.com/f/user-interface-experience/interaction-hooks.md) — Encapsulates complex interaction logic like form validation and focus management into reusable hooks.
- [Layout Components](https://awesome-repositories.com/f/user-interface-experience/layout-components.md) — Provides structural components for creating adaptive application shells and navigation interfaces.
- [Layout Containers](https://awesome-repositories.com/f/user-interface-experience/layout-containers.md) — Centers content with configurable padding and maximum width constraints. ([source](https://mantine.dev/llms/core-container.md))
- [Layout Frameworks](https://awesome-repositories.com/f/user-interface-experience/layout-frameworks.md) — Constructs robust, adaptive layouts with integrated navigation and headers that adjust to screen sizes.
- [Modals](https://awesome-repositories.com/f/user-interface-experience/modals.md) — Offers an overlay window component supporting custom sizing, vertical centering, and scrollable content areas. ([source](https://mantine.dev/llms/core-modal.md))
- [Navigation Buttons](https://awesome-repositories.com/f/user-interface-experience/navigation-buttons.md) — Ships a toggleable navigation button component for mobile menus. ([source](https://mantine.dev/llms/core-burger.md))
- [Overlay Systems](https://awesome-repositories.com/f/user-interface-experience/overlay-systems.md) — Provides accessible modal and drawer management with built-in focus trapping and keyboard navigation.
- [Typography Components](https://awesome-repositories.com/f/user-interface-experience/typography-components.md) — Ships a component for rendering inline and block code snippets. ([source](https://mantine.dev/llms/core-code.md))
- [Button Components](https://awesome-repositories.com/f/user-interface-experience/button-components.md) — Provides a versatile button component with support for variants, sizes, and icons. ([source](https://mantine.dev/llms/core-button.md))
- [Data Tables](https://awesome-repositories.com/f/user-interface-experience/data-tables.md) — Provides a component to display structured information in table format with custom headers, footers, and row layouts. ([source](https://mantine.dev/llms/core-table.md))
- [Drawers](https://awesome-repositories.com/f/user-interface-experience/drawers.md) — Provides an overlay panel component that can be positioned at any edge of the screen with configurable sizes. ([source](https://mantine.dev/llms/core-drawer.md))
- [Dropdown Menus](https://awesome-repositories.com/f/user-interface-experience/dropdown-menus.md) — Provides interactive dropdown menus for grouping secondary actions into single trigger areas. ([source](https://mantine.dev/llms/core-menu.md))
- [File Inputs](https://awesome-repositories.com/f/user-interface-experience/file-inputs.md) — Provides a dedicated form input component for capturing user files. ([source](https://mantine.dev/llms/core-file-input.md))
- [Form Management](https://awesome-repositories.com/f/user-interface-experience/form-management.md) — Simplifies complex data collection and validation through specialized form hooks.
- [Sidebar Layouts](https://awesome-repositories.com/f/user-interface-experience/sidebar-layouts.md) — Mantine provides components to arrange content within sidebars using flexible sections that grow to fill available space and support internal scrolling. ([source](https://mantine.dev/llms/core-app-shell.md))
- [State Management Providers](https://awesome-repositories.com/f/user-interface-experience/state-management-providers.md) — Distributes configuration, theme settings, and component state across deeply nested component trees using hierarchical providers.
- [Tabs](https://awesome-repositories.com/f/user-interface-experience/tabs.md) — Organizes content into switchable views using flexible tabbed interfaces. ([source](https://mantine.dev/llms/core-tabs.md))
- [Virtualization Utilities](https://awesome-repositories.com/f/user-interface-experience/virtualization-utilities.md) — Mantine includes a specialized hook to render large lists of options in comboboxes efficiently, handling thousands of items without performance degradation. ([source](https://mantine.dev/llms/core-combobox.md))
- [Accessibility Utilities](https://awesome-repositories.com/f/user-interface-experience/accessibility-utilities.md) — `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 ([source](https://mantine.dev/llms/core-focus-trap.md))
- [Clipboard Utilities](https://awesome-repositories.com/f/user-interface-experience/clipboard-utilities.md) — Provides components for copying text to the system clipboard. ([source](https://mantine.dev/llms/core-copy-button.md))
- [Color Pickers](https://awesome-repositories.com/f/user-interface-experience/color-pickers.md) — Includes a color picker component to capture values in formats like hex or rgba, with support for predefined swatches. ([source](https://mantine.dev/llms/core-color-picker.md))
- [Color Selection Components](https://awesome-repositories.com/f/user-interface-experience/color-selection-components.md) — 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 ([source](https://mantine.dev/llms/core-alpha-slider.md))
- [Data Visualization Components](https://awesome-repositories.com/f/user-interface-experience/data-visualization-components.md) — Optimizes the display of large datasets using virtualized lists and hierarchical structures.
- [Disclosure Components](https://awesome-repositories.com/f/user-interface-experience/disclosure-components.md) — Manages boolean state for UI components with built-in handlers for toggling visibility. ([source](https://mantine.dev/llms/hooks-use-disclosure.md))
- [File Uploaders](https://awesome-repositories.com/f/user-interface-experience/file-uploaders.md) — Provides a button-based interface for triggering file selection dialogs. ([source](https://mantine.dev/llms/core-file-button.md))
- [Floating Windows](https://awesome-repositories.com/f/user-interface-experience/floating-windows.md) — Creates draggable, fixed-position overlay windows for interactive interfaces. ([source](https://mantine.dev/llms/core-floating-window.md))
- [Gesture Recognition Hooks](https://awesome-repositories.com/f/user-interface-experience/gesture-recognition-hooks.md) — Mantine includes a hook to track pointer drag gestures, including movement, velocity, and direction, using the Pointer Events API for mouse and touch input. ([source](https://mantine.dev/llms/hooks-use-drag.md))
- [Multi-Select Inputs](https://awesome-repositories.com/f/user-interface-experience/multi-select-inputs.md) — Mantine provides a component to select multiple predefined values from searchable dropdown lists, with support for custom rendering and filtering configuration. ([source](https://mantine.dev/llms/core-multi-select.md))
- [Numeric Inputs](https://awesome-repositories.com/f/user-interface-experience/numeric-inputs.md) — Provides numeric input controls with decimal formatting, boundary constraints, and increment/decrement functionality. ([source](https://mantine.dev/llms/core-number-input.md))
- [Pagination](https://awesome-repositories.com/f/user-interface-experience/pagination.md) — Provides page navigation controls for switching between different content segments or data pages. ([source](https://mantine.dev/llms/core-pagination.md))
- [Popovers](https://awesome-repositories.com/f/user-interface-experience/popovers.md) — Provides a floating content area that displays relative to a target element, supporting focus management. ([source](https://mantine.dev/llms/core-popover.md))
- [Radio Groups](https://awesome-repositories.com/f/user-interface-experience/radio-groups.md) — Manages single selection values from radio input sets with shared labels and validation states. ([source](https://mantine.dev/llms/core-radio.md))
- [Resizable Panes](https://awesome-repositories.com/f/user-interface-experience/resizable-panes.md) — Supports resizable split pane layouts with horizontal or vertical orientations. ([source](https://mantine.dev/llms/core-splitter.md))
- [Scroll Areas](https://awesome-repositories.com/f/user-interface-experience/scroll-areas.md) — Provides containers that automatically become scrollable when content exceeds size limits. ([source](https://mantine.dev/llms/core-scroll-area.md))
- [Selection Inputs](https://awesome-repositories.com/f/user-interface-experience/selection-inputs.md) — Mantine provides a component to capture user input from predefined lists, preventing custom values while supporting search, filtering, and dropdown customization. ([source](https://mantine.dev/llms/core-select.md))
- [Sliders](https://awesome-repositories.com/f/user-interface-experience/sliders.md) — Allows value selection from a range via dragging or keyboard interaction. ([source](https://mantine.dev/llms/core-slider.md))
- [Theming Systems](https://awesome-repositories.com/f/user-interface-experience/theming-systems.md) — Propagates design tokens globally via CSS variables to enable dynamic theme switching and consistent styling.
- [Tree Views](https://awesome-repositories.com/f/user-interface-experience/tree-views.md) — Supports selection from hierarchical tree data with cascading and indeterminate state management. ([source](https://mantine.dev/llms/core-tree-select.md))
- [Virtual Rendering](https://awesome-repositories.com/f/user-interface-experience/virtual-rendering.md) — Optimizes performance by rendering only the visible subset of large datasets to minimize DOM node count.
- [Accessible Menus](https://awesome-repositories.com/f/user-interface-experience/accessible-menus.md) — Implements menu components with built-in focus trapping and keyboard navigation support. ([source](https://mantine.dev/llms/core-menu.md))
- [Alerts](https://awesome-repositories.com/f/user-interface-experience/alerts.md) — Includes a component to show static alert messages, supporting custom titles, icons, and close buttons. ([source](https://mantine.dev/llms/core-alert.md))
- [Autocomplete Components](https://awesome-repositories.com/f/user-interface-experience/autocomplete-components.md) — Displays a text input with a suggestion list while supporting custom user values. ([source](https://mantine.dev/llms/core-autocomplete.md))
- [Badges](https://awesome-repositories.com/f/user-interface-experience/badges.md) — Provides a small label component to highlight status information with support for custom colors and icons. ([source](https://mantine.dev/llms/core-badge.md))
- [Checkbox Groups](https://awesome-repositories.com/f/user-interface-experience/checkbox-groups.md) — Provides a component to manage the state of multiple related checkboxes as a single group. ([source](https://mantine.dev/llms/core-checkbox.md))
- [Collapse Components](https://awesome-repositories.com/f/user-interface-experience/collapse-components.md) — Provides configurable transition effects for expanding and collapsing UI elements. ([source](https://mantine.dev/llms/core-collapse.md))
- [Dividers](https://awesome-repositories.com/f/user-interface-experience/dividers.md) — Provides visual separation between content sections using customizable divider components. ([source](https://mantine.dev/llms/core-divider.md))
- [Floating Element Positioning](https://awesome-repositories.com/f/user-interface-experience/floating-element-positioning.md) — Calculates coordinate offsets for overlays and menus to ensure visibility within viewport boundaries.
- [Floating Indicators](https://awesome-repositories.com/f/user-interface-experience/floating-indicators.md) — Provides a visual indicator that tracks and highlights the active element within a group of components. ([source](https://mantine.dev/llms/core-floating-indicator.md))
- [Focus Management Systems](https://awesome-repositories.com/f/user-interface-experience/focus-management-systems.md) — Coordinates active layers like modals by programmatically constraining keyboard navigation to the topmost element.
- [Focus Management Utilities](https://awesome-repositories.com/f/user-interface-experience/focus-management-utilities.md) — To define the element that will receive initial focus, set the `data-autofocus` attribute: ```tsx import { useDisclosure } from '@mantine/hooks'; import { FocusTrap, TextInput, Button, Box } from '@mantine/core'; functio ([source](https://mantine.dev/llms/core-focus-trap.md))
- [Hooks](https://awesome-repositories.com/f/user-interface-experience/hooks.md) — 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 ([source](https://mantine.dev/llms/core-floating-window.md))
- [Navigation Components](https://awesome-repositories.com/f/user-interface-experience/navigation-components.md) — Provides a breadcrumb component to display navigation paths. ([source](https://mantine.dev/llms/core-breadcrumbs.md))
- [Navigation Links](https://awesome-repositories.com/f/user-interface-experience/navigation-links.md) — Displays links that automatically inherit and apply theme-based styles. ([source](https://mantine.dev/llms/core-anchor.md))
- [Overlay Components](https://awesome-repositories.com/f/user-interface-experience/overlay-components.md) — 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 ([source](https://mantine.dev/llms/core-dialog.md))
- [Overlay Dialogs](https://awesome-repositories.com/f/user-interface-experience/overlay-dialogs.md) — Displays fixed-position overlay dialogs at various screen locations. ([source](https://mantine.dev/llms/core-dialog.md))
- [Radio Inputs](https://awesome-repositories.com/f/user-interface-experience/radio-inputs.md) — Mantine provides a radio input component supporting custom icons and various visual states like disabled or error for use in forms. ([source](https://mantine.dev/llms/core-radio.md))
- [Segmented Controls](https://awesome-repositories.com/f/user-interface-experience/segmented-controls.md) — Displays linear sets of segments for selecting a single value from predefined options. ([source](https://mantine.dev/llms/core-segmented-control.md))
- [Steppers](https://awesome-repositories.com/f/user-interface-experience/steppers.md) — Includes components to guide users through multi-part processes with visual progress indicators. ([source](https://mantine.dev/llms/core-stepper.md))
- [Tag Inputs](https://awesome-repositories.com/f/user-interface-experience/tag-inputs.md) — Captures lists of string values through free-form text input with suggestion support. ([source](https://mantine.dev/llms/core-tags-input.md))
- [Text Highlighting](https://awesome-repositories.com/f/user-interface-experience/text-highlighting.md) — Highlights specific substrings within text using custom styling. ([source](https://mantine.dev/llms/core-highlight.md))
- [Text Highlighting Components](https://awesome-repositories.com/f/user-interface-experience/text-highlighting-components.md) — 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 ([source](https://mantine.dev/llms/core-highlight.md))
- [Text Highlighting Utilities](https://awesome-repositories.com/f/user-interface-experience/text-highlighting-utilities.md) — * **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 ([source](https://mantine.dev/llms/core-highlight.md))
- [Text Styling Components](https://awesome-repositories.com/f/user-interface-experience/text-styling-components.md) — Provides configurable text-decoration properties for links and text elements within the user interface. ([source](https://mantine.dev/llms/core-anchor.md))
- [Theme Utilities](https://awesome-repositories.com/f/user-interface-experience/theme-utilities.md) — Detects and subscribes to system color scheme changes using media query APIs. ([source](https://mantine.dev/llms/hooks-use-color-scheme.md))
- [Toggle Groups](https://awesome-repositories.com/f/user-interface-experience/toggle-groups.md) — Manages collections of related boolean values using groups of toggle switches. ([source](https://mantine.dev/llms/core-switch.md))
- [Toggle Switches](https://awesome-repositories.com/f/user-interface-experience/toggle-switches.md) — Includes a toggle switch component to capture true or false values, supporting custom labels and icons. ([source](https://mantine.dev/llms/core-checkbox.md))
- [Tooltip Components](https://awesome-repositories.com/f/user-interface-experience/tooltip-components.md) — Provides a small text box component that appears over an element during hover to provide additional context. ([source](https://mantine.dev/llms/core-tooltip.md))

### Web Development

- [Form Management](https://awesome-repositories.com/f/web-development/form-management.md) — Manages complex form data, validation, error tracking, and submission workflows for controlled and uncontrolled inputs. ([source](https://mantine.dev/llms/form-use-form.md))
- [Performance Utilities](https://awesome-repositories.com/f/web-development/performance-utilities.md) — Manages state with built-in debounce delays to limit update frequency. ([source](https://mantine.dev/llms/hooks-use-debounced-state.md))
- [State Management Hooks](https://awesome-repositories.com/f/web-development/state-management-hooks.md) — Mantine provides a hook to debounce state changes, delaying expensive operations like API requests by returning values that update only after periods of inactivity. ([source](https://mantine.dev/llms/hooks-use-debounced-value.md))
- [DOM Interaction Hooks](https://awesome-repositories.com/f/web-development/dom-interaction-hooks.md) — Detects clicks outside specific DOM elements to support custom event handling. ([source](https://mantine.dev/llms/hooks-use-click-outside.md))
- [Event Handling Utilities](https://awesome-repositories.com/f/web-development/event-handling-utilities.md) — Mantine includes a hook to bind event listeners to elements, ensuring memory safety by automatically removing listeners when the associated component is unmounted. ([source](https://mantine.dev/llms/hooks-use-event-listener.md))

### Development Tools & Productivity

- [Execution Utilities](https://awesome-repositories.com/f/development-tools-productivity/execution-utilities.md) — 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. ([source](https://mantine.dev/llms/hooks-use-debounced-callback.md))