# Mantine UI - LLM Documentation This index lists Mantine documentation pages formatted for LLMs. Each link points to a standalone Markdown file under the /llms path. For a single consolidated file with all content, use: - https://mantine.dev/llms-full.txt ## FAQ - [Are Mantine components accessible?](https://mantine.dev/llms/q-are-mantine-components-accessible.md): Learn about Mantine components accessibility features - [Browser zooms in when input is focused. What should I do?](https://mantine.dev/llms/q-browser-zooms-on-focus.md): Use meta tag to disable browser scaling or increase input size - [Can I have color schemes other than light and dark?](https://mantine.dev/llms/q-light-dark-is-not-enough.md): Learn about the difference between color scheme and theme - [Can I have different primary color for light and dark color schemes?](https://mantine.dev/llms/q-primary-virtual-color.md): Learn how to use virtual color with primary color in theme object - [Can I remove MultiSelect placeholder when the component has selected values?](https://mantine.dev/llms/q-multiselect-value-placeholder.md): Learn why MultiSelect placeholder is not removed when values are selected and how to remove it with CSS - [Can I use an array of strings as a list in use-form?](https://mantine.dev/llms/q-list-of-strings-in-use-form.md): Learn about use-form lists limitations - [Can I use Mantine components as server components?](https://mantine.dev/llms/q-server-components.md): Learn about use client directive and server components usage - [Can I use Mantine with Astro?](https://mantine.dev/llms/q-can-i-use-mantine-with-astro.md): No, Astro does not support React context - [Can I use Mantine with Create React App (CRA)?](https://mantine.dev/llms/q-can-i-use-mantine-with-cra.md): Learn how to use Mantine without postcss-preset-mantine or how to eject CRA and customize webpack.config.js and use postcss-preset-mantine - [Can I use Mantine with Emotion/styled-components/tailwindcss?](https://mantine.dev/llms/q-third-party-styles.md): Learn about limitations of third-party styles - [Can I use Mantine with Vue/Svelte/Angular/etc.?](https://mantine.dev/llms/q-vue-svelte-angular.md): No, Mantine is a React library and does not support other frameworks/libraries - [Can I use nested inline styles with Mantine components?](https://mantine.dev/llms/q-nested-inline-styles.md): Nested styles are supported only in CSS files - [Can I use PostCSS function in inline styles?](https://mantine.dev/llms/q-postcss-fns-inline.md): Learn where PostCSS functions can be used in Mantine - [Can I use private CSS variables to style components?](https://mantine.dev/llms/q-private-css-variables.md): No, it is not safe and will not work with future versions of Mantine. - [Can I use SegmentedControl with empty value?](https://mantine.dev/llms/q-segmented-control-no-value.md): SegmentedControl cannot be used without a value - [How can I add dynamic CSS styles?](https://mantine.dev/llms/q-dynamic-css-styles.md): Use data attributes, CSS variables or inline styles - [How can I add fuzzy search to Select component?](https://mantine.dev/llms/q-select-fuzzy.md): Learn how to integrate third-party fuzzy search libraries with Mantine Select component - [How can I add hover styles to an element?](https://mantine.dev/llms/q-how-to-add-hover-styles.md): Learn how to add hover classes to an element with CSS modules, &:hover or @mixin hover - [How can I apply styles to all Mantine components?](https://mantine.dev/llms/q-apply-styles-to-all.md): Learn how to use attribute selector to apply styles to all Mantine components - [How can I change body background color?](https://mantine.dev/llms/q-body-background.md): Use CSS to change body background color - [How can I change component color prop value depending on the color scheme?](https://mantine.dev/llms/q-color-scheme-color.md): Learn how to use CSS variables resolver to change color value depending on the color scheme - [How can I change input focus styles?](https://mantine.dev/llms/q-input-focus-styles.md): Learn how to use Styles API with Mantine inputs - [How can I change Tabs border color?](https://mantine.dev/llms/q-tabs-border-color.md): Learn how to use Styles API with Tabs component - [How can I contribute to the library?](https://mantine.dev/llms/q-how-can-i-contribute.md): There are multiple ways to contribute even without writing code - [How can I disable all inputs/input groups inside a form?](https://mantine.dev/llms/q-disable-all-inputs-in-form.md): Learn how to disable all inputs/input groups inside a form with the unstyled Fieldset component - [How can I display different elements in light and dark color schemes?](https://mantine.dev/llms/q-light-dark-elements.md): Learn how to hide/show elements based on color scheme - [How can I focus the first input with error with use-form?](https://mantine.dev/llms/q-focus-first-input-with-error.md): Learn how to handle focus with use-form hook - [How can I get current color scheme value in JavaScript?](https://mantine.dev/llms/q-how-to-get-color-scheme-value-in-js.md): How to use useMantineColorScheme and useComputedColorScheme hooks to get current color scheme value in JavaScript - [How can I lint CSS files?](https://mantine.dev/llms/q-how-to-setup-stylelint.md): Learn how to set up Stylelint for Mantine postcss syntax - [How can I load fonts in Next.js?](https://mantine.dev/llms/q-next-load-fonts.md): A guide to load custom fonts in Next.js with CSS and next/font package - [How can I load fonts in React Router?](https://mantine.dev/llms/q-react-router-load-fonts.md): A guide to load custom fonts in React Router - [How can I load fonts in Vite?](https://mantine.dev/llms/q-vite-load-fonts.md): A guide to load custom fonts in Vite - [How can I lock scroll in my application?](https://mantine.dev/llms/q-how-to-lock-scroll.md): Use react-remove-scroll library to lock scroll in your application - [How can I submit a template to Mantine documentation?](https://mantine.dev/llms/q-submit-template.md): Learn how to create and submit a template to Mantine documentation - [How can I test Modal/Drawer/Popover components?](https://mantine.dev/llms/q-portals-testing.md): Learn how to use react-testing-library to test components that use portals and transitions. - [How can I test Select/MultiSelect components?](https://mantine.dev/llms/q-combobox-testing.md): Learn how to use react-testing-library to test Select and MultiSelect components. - [How can I upload files from Dropzone component?](https://mantine.dev/llms/q-dropzone-upload.md): Learn how to process files dropped into Dropzone component - [How is that thing done on the mantine.dev website?](https://mantine.dev/llms/q-how-that-thing-is-done.md): Learn how various elements are implemented on the mantine.dev website - [How to align input with a button in a flex container?](https://mantine.dev/llms/q-align-input-button.md): Learn how to align Mantine inputs with buttons using Group component - [How to call a function when Modal/Drawer closes and animation completes?](https://mantine.dev/llms/q-how-to-call-function-when-modal-closes.md): How to use transitionProps in Modal/Drawer components - [How to change background color for FiveM?](https://mantine.dev/llms/q-fivem-background-color.md): Unset body background color and color-scheme styles for FiveM - [How to change input placeholder color?](https://mantine.dev/llms/q-inputs-placeholder-color.md): Learn how to change placeholder color with Styles API - [How to integrate custom input with use-form hook?](https://mantine.dev/llms/q-custom-input-use-form.md): Learn how to add use-form support for custom inputs - [How to prevent Modal from closing?](https://mantine.dev/llms/q-how-to-prevent-modal-from-closing.md): Learn how to prevent Modal from closing when the user clicks outside of it or presses the Escape key - [How to scroll to the top of the form if the form is submitted with errors?](https://mantine.dev/llms/q-scroll-to-the-top-of-the-form.md): Learn how to call a function when the form is submitted with errors - [How to update Mantine dependencies?](https://mantine.dev/llms/q-how-to-update-dependencies.md): Learn how to update @mantine/*, @mantinex/* and postcss-preset-mantine dependencies manually or with ncu script - [How to use Dropzone with @mantine/form?](https://mantine.dev/llms/q-how-to-use-dropzone-with-form.md): Learn how to use Dropzone with @mantine/form to handle file selection state - [How to use Mantine template on GitHub?](https://mantine.dev/llms/q-templates-usage.md): Learn how to create a new repository based on Mantine template - [I get hydration warning about data-mantine-color-scheme attribute, what does it mean?](https://mantine.dev/llms/q-color-scheme-hydration-warning.md): Learn how hydration works and how to fix warnings - [Is there a comparison with other libraries?](https://mantine.dev/llms/q-other-libs.md): Comparison with other libraries is not provided, you are trusted to make your own decision based on documentation examples - [Is there a floating action button component?](https://mantine.dev/llms/q-floating-action-button.md): No, but you can build it with Affix and ActionIcon components - [Is there DataGrid component that I can use with Mantine?](https://mantine.dev/llms/q-data-grid-i-need.md): A list of community packages that provide DataGrid component that can be used with Mantine. - [It is not possible to pinch to zoom when a Modal is opened. What should I do?](https://mantine.dev/llms/q-pinch-to-zoom-modal.md): Use removeScrollProps to configure react-remove-scroll options - [MantineProvider was not found in component tree. What should I do?](https://mantine.dev/llms/q-mantine-provider-missing.md): Learn how to resolve MantineProvider issues - [My buttons are transparent and the background is visible only on hover, what is wrong?](https://mantine.dev/llms/q-transparent-buttons.md): You have installed a third-party library that overrides Mantine styles - [My Popover dropdown closes when I click on the dropdown of a nested Popover](https://mantine.dev/llms/q-nested-popover-closes.md): Popover dropdown is closed when it detects click-outside events - [My styles are broken with disabled JavaScript. What should I do?](https://mantine.dev/llms/q-disabled-js.md): Learn how to use Mantine without JavaScript enabled - [My styles are overridden by Mantine components styles, what should I do?](https://mantine.dev/llms/q-styles-order.md): Learn how to use CSS layers to control styles order and prevent Mantine components from overriding your styles - [Native browser validation does not work in some components, what should I do?](https://mantine.dev/llms/q-native-required.md): Learn why native browser validation does not work in some components - [The use-local-storage hook returns the real value only after mounting. Is it a bug?](https://mantine.dev/llms/q-local-storage-effect.md): Learn how Mantine retrieves local storage value - [What is the difference between searchable Select and Autocomplete?](https://mantine.dev/llms/q-select-autocomplete-difference.md): Searchable Select and Autocomplete are similar components, but they serve different purposes. - [Where can I find the roadmap?](https://mantine.dev/llms/q-roadmap.md): The roadmap is private and only available to the team. - [Why are my Carousel slides in vertical orientation?](https://mantine.dev/llms/q-carousel-missing-styles.md): You forgot to import carousel styles - [Why are my notifications displayed at the wrong position?](https://mantine.dev/llms/q-notifications-missing-styles.md): Because you did not import styles - [Why can I not use one polymorphic component in the component prop of another polymorphic component?](https://mantine.dev/llms/q-polymorphic-in-polymorphic.md): Learn how polymorphic components types work - [Why can I not use value/label data structure with Autocomplete/TagsInput?](https://mantine.dev/llms/q-autocomplete-value-label.md): Learn the difference between Autocomplete and Select components - [Why can VSCode not autoimport the Text component?](https://mantine.dev/llms/q-why-vscode-cannot-autoimport-text.md): It is confused by the native Text constructor - [Why do I see color scheme flickering on page load?](https://mantine.dev/llms/q-color-scheme-flickering.md): Color scheme flickering is caused by incorrect usage of ColorSchemeScript - [Why do my dates components look broken?](https://mantine.dev/llms/q-dates-missing-styles.md): Because you did not import styles - [Why does FileButton not work in Menu?](https://mantine.dev/llms/q-file-button-in-menu.md): Learn how to use FileButton in Menu component - [Why is it required to have 10 shades per color?](https://mantine.dev/llms/q-ten-shades-per-color.md): Learn how Mantine uses theme colors - [Why is my screen completely empty after I](https://mantine.dev/llms/q-notifications-empty-screen.md): You have used Notifications component incorrectly ## Core - [Accordion](https://mantine.dev/llms/core-accordion.md): Divide content into collapsible sections - [ActionIcon](https://mantine.dev/llms/core-action-icon.md): Icon button - [Affix](https://mantine.dev/llms/core-affix.md): Renders children inside portal at fixed position - [Alert](https://mantine.dev/llms/core-alert.md): Attract user attention with important static message - [AlphaSlider](https://mantine.dev/llms/core-alpha-slider.md): Slider component for selecting alpha channel in color pickers (0 – 1) - [Anchor](https://mantine.dev/llms/core-anchor.md): Display link with theme styles - [AngleSlider](https://mantine.dev/llms/core-angle-slider.md): Pick angle value between 0 and 360 - [AppShell](https://mantine.dev/llms/core-app-shell.md): Responsive shell for your application with header, navbar, aside and footer - [AspectRatio](https://mantine.dev/llms/core-aspect-ratio.md): Maintain responsive consistent width/height ratio - [Autocomplete](https://mantine.dev/llms/core-autocomplete.md): Autocomplete user input with any list of options - [Avatar](https://mantine.dev/llms/core-avatar.md): Display user profile image, initials or fallback icon - [BackgroundImage](https://mantine.dev/llms/core-background-image.md): Displays image as background - [Badge](https://mantine.dev/llms/core-badge.md): Display badge, pill or tag - [Blockquote](https://mantine.dev/llms/core-blockquote.md): Blockquote with optional cite - [Box](https://mantine.dev/llms/core-box.md): Base component for all Mantine components - [Breadcrumbs](https://mantine.dev/llms/core-breadcrumbs.md): Separates list of react nodes with given separator - [Burger](https://mantine.dev/llms/core-burger.md): Open/close navigation button - [Button](https://mantine.dev/llms/core-button.md): Button component to render button or link - [Card](https://mantine.dev/llms/core-card.md): Card with sections - [Center](https://mantine.dev/llms/core-center.md): Centers content vertically and horizontally - [Checkbox](https://mantine.dev/llms/core-checkbox.md): Capture boolean input from user - [Chip](https://mantine.dev/llms/core-chip.md): Pick one or multiple values with inline controls - [CloseButton](https://mantine.dev/llms/core-close-button.md): Button with close icon - [Code](https://mantine.dev/llms/core-code.md): Inline and block code - [Collapse](https://mantine.dev/llms/core-collapse.md): Animate presence with slide down/up transition - [ColorInput](https://mantine.dev/llms/core-color-input.md): Capture color from user - [ColorPicker](https://mantine.dev/llms/core-color-picker.md): Pick colors in hex(a), rgb(a), hsl(a) and hsv(a) formats - [ColorSwatch](https://mantine.dev/llms/core-color-swatch.md): Displays color - [Combobox](https://mantine.dev/llms/core-combobox.md): Create custom select, autocomplete or multiselect inputs - [ComboboxPopover](https://mantine.dev/llms/core-combobox-popover.md): Add combobox dropdown to any button element - [Container](https://mantine.dev/llms/core-container.md): Center content with padding and max-width - [CopyButton](https://mantine.dev/llms/core-copy-button.md): Copies given text to clipboard - [CorePackage](https://mantine.dev/llms/core-package.md) - [DataList](https://mantine.dev/llms/core-data-list.md): Display label-value pairs as a description list - [Dialog](https://mantine.dev/llms/core-dialog.md): Display a fixed overlay dialog at any side of the screen - [Divider](https://mantine.dev/llms/core-divider.md): Horizontal line with optional label or vertical divider - [Drawer](https://mantine.dev/llms/core-drawer.md): Display overlay area at any side of the screen - [EmptyState](https://mantine.dev/llms/core-empty-state.md): Display a placeholder for no data, empty results and first-run states - [Fieldset](https://mantine.dev/llms/core-fieldset.md): Group related elements in a form - [FileButton](https://mantine.dev/llms/core-file-button.md): Open file picker with a button click - [FileInput](https://mantine.dev/llms/core-file-input.md): Capture files from user - [Flex](https://mantine.dev/llms/core-flex.md): Compose elements in a flex container - [FloatingIndicator](https://mantine.dev/llms/core-floating-indicator.md): Display a floating indicator over a group of elements - [FloatingWindow](https://mantine.dev/llms/core-floating-window.md): Draggable floating area - [FocusTrap](https://mantine.dev/llms/core-focus-trap.md): Trap focus at child node - [Grid](https://mantine.dev/llms/core-grid.md): Responsive 12 columns grid system - [Group](https://mantine.dev/llms/core-group.md): Compose elements and components in a horizontal flex container - [Highlight](https://mantine.dev/llms/core-highlight.md): Highlight given part of a string with mark - [HoverCard](https://mantine.dev/llms/core-hover-card.md): Display popover section when target element is hovered - [HueSlider](https://mantine.dev/llms/core-hue-slider.md): Slider component for selecting hue channel in color pickers (0 – 360 degrees) - [Image](https://mantine.dev/llms/core-image.md): Image with optional fallback - [Indicator](https://mantine.dev/llms/core-indicator.md): Display element at the corner of another element - [Input](https://mantine.dev/llms/core-input.md): Base component to create custom inputs - [JsonInput](https://mantine.dev/llms/core-json-input.md): Capture json data from user - [Kbd](https://mantine.dev/llms/core-kbd.md): Display keyboard key - [List](https://mantine.dev/llms/core-list.md): Display ordered or unordered list - [Loader](https://mantine.dev/llms/core-loader.md): Indicate loading state - [LoadingOverlay](https://mantine.dev/llms/core-loading-overlay.md): An overlay with centered loader - [Mark](https://mantine.dev/llms/core-mark.md): Highlight part of the text - [Marquee](https://mantine.dev/llms/core-marquee.md): Create continuous scrolling animation for content - [MaskInput](https://mantine.dev/llms/core-mask-input.md): Input with mask pattern for formatted text entry - [Menu](https://mantine.dev/llms/core-menu.md): Combine a list of secondary actions into single interactive area - [Menubar](https://mantine.dev/llms/core-menubar.md): Desktop application style menubar with a row of menu triggers - [Modal](https://mantine.dev/llms/core-modal.md): An accessible overlay dialog - [MultiSelect](https://mantine.dev/llms/core-multi-select.md): Custom searchable multi select - [NativeSelect](https://mantine.dev/llms/core-native-select.md): Native select element based on Input - [NavLink](https://mantine.dev/llms/core-nav-link.md): Navigation link - [Notification](https://mantine.dev/llms/core-notification.md): Show dynamic notifications and alerts to user, part of notifications system - [NumberFormatter](https://mantine.dev/llms/core-number-formatter.md): Format number with thousands/decimal separators and suffix/prefix - [NumberInput](https://mantine.dev/llms/core-number-input.md): Capture number from user - [OverflowList](https://mantine.dev/llms/core-overflow-list.md): Hide items that do not fit in a container and display them as a single collapsed item - [Overlay](https://mantine.dev/llms/core-overlay.md): Overlays parent element with div element with any color and opacity - [Pagination](https://mantine.dev/llms/core-pagination.md): Display active page and navigate between multiple pages - [Paper](https://mantine.dev/llms/core-paper.md): Renders white or dark background depending on color scheme - [PasswordInput](https://mantine.dev/llms/core-password-input.md): Capture password data from user - [Pill](https://mantine.dev/llms/core-pill.md): Removable and non-removable tags - [PillsInput](https://mantine.dev/llms/core-pills-input.md): Base component for custom tags inputs and multi selects - [PinInput](https://mantine.dev/llms/core-pin-input.md): Capture pin code or one time password from the user - [Popover](https://mantine.dev/llms/core-popover.md): Display popover section relative to given target element - [Portal](https://mantine.dev/llms/core-portal.md): Renders component outside of parent element tree - [Progress](https://mantine.dev/llms/core-progress.md): Give user feedback for status of the task - [Radio](https://mantine.dev/llms/core-radio.md): Wrapper for input type radio - [RangeSlider](https://mantine.dev/llms/core-range-slider.md): RangeSlider component - [Rating](https://mantine.dev/llms/core-rating.md): Pick and display rating - [RingProgress](https://mantine.dev/llms/core-ring-progress.md): Give user feedback for status of the task with circle diagram - [RollingNumber](https://mantine.dev/llms/core-rolling-number.md): Animate value changes with rolling digits - [ScrollArea](https://mantine.dev/llms/core-scroll-area.md): Area with custom scrollbars - [Scroller](https://mantine.dev/llms/core-scroller.md): Horizontal scroll container with navigation controls - [SegmentedControl](https://mantine.dev/llms/core-segmented-control.md): A linear set of two or more segments - [Select](https://mantine.dev/llms/core-select.md): Custom searchable select - [SemiCircleProgress](https://mantine.dev/llms/core-semi-circle-progress.md): Represent progress with semi circle diagram - [SimpleGrid](https://mantine.dev/llms/core-simple-grid.md): Responsive grid in which each item takes equal amount of space - [Skeleton](https://mantine.dev/llms/core-skeleton.md): Indicate content loading state - [Slider](https://mantine.dev/llms/core-slider.md): Slider component - [Space](https://mantine.dev/llms/core-space.md): Add horizontal or vertical spacing from theme - [Splitter](https://mantine.dev/llms/core-splitter.md): Resizable split pane layout - [Spoiler](https://mantine.dev/llms/core-spoiler.md): Hide long sections of content under a spoiler - [Stack](https://mantine.dev/llms/core-stack.md): Compose elements and components in a vertical flex container - [Stepper](https://mantine.dev/llms/core-stepper.md): Display content divided into a steps sequence - [Switch](https://mantine.dev/llms/core-switch.md): Capture boolean input from user - [Table](https://mantine.dev/llms/core-table.md): Render table with theme styles - [TableOfContents](https://mantine.dev/llms/core-table-of-contents.md): Renders a list of headings on the page and tracks current heading visible in the viewport - [Tabs](https://mantine.dev/llms/core-tabs.md): Switch between different views - [TagsInput](https://mantine.dev/llms/core-tags-input.md): Capture a list of values from user with free input and suggestions - [Text](https://mantine.dev/llms/core-text.md): Display text - [Textarea](https://mantine.dev/llms/core-textarea.md): Autosize or regular textarea - [TextInput](https://mantine.dev/llms/core-text-input.md): Capture string input from user - [ThemeIcon](https://mantine.dev/llms/core-theme-icon.md): Render icon inside element with theme colors - [Timeline](https://mantine.dev/llms/core-timeline.md): Display list of events in chronological order - [Title](https://mantine.dev/llms/core-title.md): h1-h6 heading - [Tooltip](https://mantine.dev/llms/core-tooltip.md): Renders tooltip at given element on mouse over or other event - [Transition](https://mantine.dev/llms/core-transition.md): Animate presence of component with pre-made animations - [Tree](https://mantine.dev/llms/core-tree.md): Display a Tree structure - [TreeSelect](https://mantine.dev/llms/core-tree-select.md): Select with hierarchical tree data - [Typography](https://mantine.dev/llms/core-typography.md): Styles provider for html content - [UnstyledButton](https://mantine.dev/llms/core-unstyled-button.md): Unstyled polymorphic button - [VisuallyHidden](https://mantine.dev/llms/core-visually-hidden.md): Hide element visually but keep it accessible for screen readers ## Hooks - [HooksPackage](https://mantine.dev/llms/hooks-package.md) - [use-element-size](https://mantine.dev/llms/hooks-use-element-size.md): Returns element width and height and observes changes with ResizeObserver - [useClickOutside](https://mantine.dev/llms/hooks-use-click-outside.md) - [useClipboard](https://mantine.dev/llms/hooks-use-clipboard.md) - [useCollapse](https://mantine.dev/llms/hooks-use-collapse.md) - [useColorScheme](https://mantine.dev/llms/hooks-use-color-scheme.md) - [useCounter](https://mantine.dev/llms/hooks-use-counter.md) - [useDebouncedCallback](https://mantine.dev/llms/hooks-use-debounced-callback.md) - [useDebouncedState](https://mantine.dev/llms/hooks-use-debounced-state.md) - [useDebouncedValue](https://mantine.dev/llms/hooks-use-debounced-value.md) - [useDidUpdate](https://mantine.dev/llms/hooks-use-did-update.md) - [useDisclosure](https://mantine.dev/llms/hooks-use-disclosure.md) - [useDocumentTitle](https://mantine.dev/llms/hooks-use-document-title.md) - [useDocumentVisibility](https://mantine.dev/llms/hooks-use-document-visibility.md) - [useDrag](https://mantine.dev/llms/hooks-use-drag.md) - [useEventListener](https://mantine.dev/llms/hooks-use-event-listener.md) - [useEyeDropper](https://mantine.dev/llms/hooks-use-eye-dropper.md) - [useFavicon](https://mantine.dev/llms/hooks-use-favicon.md) - [useFetch](https://mantine.dev/llms/hooks-use-fetch.md) - [useFileDialog](https://mantine.dev/llms/hooks-use-file-dialog.md) - [useFloatingWindow](https://mantine.dev/llms/hooks-use-floating-window.md) - [useFocusReturn](https://mantine.dev/llms/hooks-use-focus-return.md) - [useFocusTrap](https://mantine.dev/llms/hooks-use-focus-trap.md) - [useFocusWithin](https://mantine.dev/llms/hooks-use-focus-within.md) - [useForceUpdate](https://mantine.dev/llms/hooks-use-force-update.md) - [useFullscreen](https://mantine.dev/llms/hooks-use-fullscreen.md) - [useHash](https://mantine.dev/llms/hooks-use-hash.md) - [useHeadroom](https://mantine.dev/llms/hooks-use-headroom.md) - [useHotkeys](https://mantine.dev/llms/hooks-use-hotkeys.md) - [useHover](https://mantine.dev/llms/hooks-use-hover.md) - [useId](https://mantine.dev/llms/hooks-use-id.md) - [useIdle](https://mantine.dev/llms/hooks-use-idle.md) - [useInputState](https://mantine.dev/llms/hooks-use-input-state.md) - [useIntersection](https://mantine.dev/llms/hooks-use-intersection.md) - [useInterval](https://mantine.dev/llms/hooks-use-interval.md) - [useInViewport](https://mantine.dev/llms/hooks-use-in-viewport.md) - [useIsFirstRender](https://mantine.dev/llms/hooks-use-is-first-render.md) - [useIsomorphicEffect](https://mantine.dev/llms/hooks-use-isomorphic-effect.md) - [useListState](https://mantine.dev/llms/hooks-use-list-state.md) - [useLocalStorage](https://mantine.dev/llms/hooks-use-local-storage.md) - [useLogger](https://mantine.dev/llms/hooks-use-logger.md) - [useLongPress](https://mantine.dev/llms/hooks-use-long-press.md) - [useMap](https://mantine.dev/llms/hooks-use-map.md) - [useMask](https://mantine.dev/llms/hooks-use-mask.md) - [useMediaQuery](https://mantine.dev/llms/hooks-use-media-query.md) - [useMergedRef](https://mantine.dev/llms/hooks-use-merged-ref.md) - [useMounted](https://mantine.dev/llms/hooks-use-mounted.md) - [useMouse](https://mantine.dev/llms/hooks-use-mouse.md) - [useMove](https://mantine.dev/llms/hooks-use-move.md) - [useMutationObserver](https://mantine.dev/llms/hooks-use-mutation-observer.md) - [useNetwork](https://mantine.dev/llms/hooks-use-network.md) - [useOrientation](https://mantine.dev/llms/hooks-use-orientation.md) - [useOs](https://mantine.dev/llms/hooks-use-os.md) - [usePageLeave](https://mantine.dev/llms/hooks-use-page-leave.md) - [usePagination](https://mantine.dev/llms/hooks-use-pagination.md) - [usePrevious](https://mantine.dev/llms/hooks-use-previous.md) - [useQueue](https://mantine.dev/llms/hooks-use-queue.md) - [useRadialMove](https://mantine.dev/llms/hooks-use-radial-move.md) - [useReducedMotion](https://mantine.dev/llms/hooks-use-reduced-motion.md) - [useResizeObserver](https://mantine.dev/llms/hooks-use-resize-observer.md) - [useRovingIndex](https://mantine.dev/llms/hooks-use-roving-index.md) - [useScrollDirection](https://mantine.dev/llms/hooks-use-scroll-direction.md) - [useScroller](https://mantine.dev/llms/hooks-use-scroller.md) - [useScrollIntoView](https://mantine.dev/llms/hooks-use-scroll-into-view.md) - [useScrollSpy](https://mantine.dev/llms/hooks-use-scroll-spy.md) - [useSelection](https://mantine.dev/llms/hooks-use-selection.md) - [useSet](https://mantine.dev/llms/hooks-use-set.md) - [useSetState](https://mantine.dev/llms/hooks-use-set-state.md) - [useShallowEffect](https://mantine.dev/llms/hooks-use-shallow-effect.md) - [useSplitter](https://mantine.dev/llms/hooks-use-splitter.md) - [useStateHistory](https://mantine.dev/llms/hooks-use-state-history.md) - [useTextSelection](https://mantine.dev/llms/hooks-use-text-selection.md) - [useThrottledCallback](https://mantine.dev/llms/hooks-use-throttled-callback.md) - [useThrottledState](https://mantine.dev/llms/hooks-use-throttled-state.md) - [useThrottledValue](https://mantine.dev/llms/hooks-use-throttled-value.md) - [useTimeout](https://mantine.dev/llms/hooks-use-timeout.md) - [useToggle](https://mantine.dev/llms/hooks-use-toggle.md) - [useUncontrolled](https://mantine.dev/llms/hooks-use-uncontrolled.md) - [useValidatedState](https://mantine.dev/llms/hooks-use-validated-state.md) - [useViewportSize](https://mantine.dev/llms/hooks-use-viewport-size.md) - [useWindowEvent](https://mantine.dev/llms/hooks-use-window-event.md) - [useWindowScroll](https://mantine.dev/llms/hooks-use-window-scroll.md) ## Form - [Form context](https://mantine.dev/llms/form-create-form-context.md): Add context support to use-form with createFormContext - [formActions](https://mantine.dev/llms/form-actions.md) - [formAllInputs](https://mantine.dev/llms/form-all-inputs.md) - [formErrors](https://mantine.dev/llms/form-errors.md) - [formGetInputProps](https://mantine.dev/llms/form-get-input-props.md) - [formNested](https://mantine.dev/llms/form-nested.md) - [FormPackage](https://mantine.dev/llms/form-package.md) - [formRecipes](https://mantine.dev/llms/form-recipes.md) - [formSchemaValidation](https://mantine.dev/llms/form-schema-validation.md) - [formStatus](https://mantine.dev/llms/form-status.md) - [formUncontrolled](https://mantine.dev/llms/form-uncontrolled.md) - [formValidation](https://mantine.dev/llms/form-validation.md) - [formValidators](https://mantine.dev/llms/form-validators.md) - [formValues](https://mantine.dev/llms/form-values.md) - [use-field](https://mantine.dev/llms/form-use-field.md): use-field hook – manage single field state - [use-form](https://mantine.dev/llms/form-use-form.md): Manage form state ## Dates - [Calendar](https://mantine.dev/llms/dates-calendar.md): Base component for custom date pickers - [DateInput](https://mantine.dev/llms/dates-date-input.md): Free form date input - [DatePicker](https://mantine.dev/llms/dates-date-picker.md): Inline date, multiple dates and dates range picker - [DatePickerInput](https://mantine.dev/llms/dates-date-picker-input.md): Date, multiple dates and dates range picker input - [DateTimePicker](https://mantine.dev/llms/dates-date-time-picker.md): Capture datetime from the user - [GettingStartedDates](https://mantine.dev/llms/dates-getting-started.md) - [InlineDateTimePicker](https://mantine.dev/llms/dates-inline-date-time-picker.md): Inline date and time picker with range support - [MiniCalendar](https://mantine.dev/llms/dates-mini-calendar.md): Compact calendar to display a small number of days in a row - [MonthPicker](https://mantine.dev/llms/dates-month-picker.md): Inline month, multiple months and months range picker - [MonthPickerInput](https://mantine.dev/llms/dates-month-picker-input.md): Month, multiple months and months range picker input - [TimeGrid](https://mantine.dev/llms/dates-time-grid.md): Captures time value from the user with a predefined set of options - [TimeInput](https://mantine.dev/llms/dates-time-input.md): Capture time from the user - [TimePicker](https://mantine.dev/llms/dates-time-picker.md): Captures time value from the user - [TimeValue](https://mantine.dev/llms/dates-time-value.md): Display a formatted time value - [YearPicker](https://mantine.dev/llms/dates-year-picker.md): Inline year, multiple years and years range picker - [YearPickerInput](https://mantine.dev/llms/dates-year-picker-input.md): Inline year, multiple years and years range picker ## Charts - [AreaChart](https://mantine.dev/llms/charts-area-chart.md): Area chart component with stacked, percent and split variants - [BarChart](https://mantine.dev/llms/charts-bar-chart.md): Bar chart component with stacked and percent variants - [BarsList](https://mantine.dev/llms/charts-bars-list.md): Display a list of bars with names and values - [BubbleChart](https://mantine.dev/llms/charts-bubble-chart.md): Bubble chart component - [CompositeChart](https://mantine.dev/llms/charts-composite-chart.md): Composed chart with support for Area, Bar and Line charts - [DonutChart](https://mantine.dev/llms/charts-donut-chart.md): Donut chart component - [FunnelChart](https://mantine.dev/llms/charts-funnel-chart.md): Funnel chart component - [GettingStartedCharts](https://mantine.dev/llms/charts-getting-started.md) - [Heatmap](https://mantine.dev/llms/charts-heatmap.md): Heatmap chart component - [LineChart](https://mantine.dev/llms/charts-line-chart.md): Line chart component - [PieChart](https://mantine.dev/llms/charts-pie-chart.md): Pie chart component - [RadarChart](https://mantine.dev/llms/charts-radar-chart.md): Radar chart component - [RadialBarChart](https://mantine.dev/llms/charts-radial-bar-chart.md): Radial bar chart component - [SankeyChart](https://mantine.dev/llms/charts-sankey-chart.md): Sankey diagram component - [ScatterChart](https://mantine.dev/llms/charts-scatter-chart.md): Scatter chart component - [Sparkline](https://mantine.dev/llms/charts-sparkline.md): Simplified area chart to show trends - [Treemap](https://mantine.dev/llms/charts-treemap.md): Treemap chart component ## Schedule - [AgendaView](https://mantine.dev/llms/schedule-agenda-view.md): Vertical list view of events grouped by date - [DayView](https://mantine.dev/llms/schedule-day-view.md): Standalone schedule day view component - [GettingStartedSchedule](https://mantine.dev/llms/schedule-getting-started.md) - [MobileMonthView](https://mantine.dev/llms/schedule-mobile-month-view.md): Mobile-optimized schedule month view component - [MonthView](https://mantine.dev/llms/schedule-month-view.md): Standalone schedule month view component - [RecurringEventsSchedule](https://mantine.dev/llms/schedule-recurring-events.md) - [ResourcesDayView](https://mantine.dev/llms/schedule-resources-day-view.md): Day view with resource columns for scheduling across resources - [ResourcesMonthView](https://mantine.dev/llms/schedule-resources-month-view.md): Month view with resource lanes for scheduling across resources - [ResourcesSchedule](https://mantine.dev/llms/schedule-resources-schedule.md): Schedule wrapper component that combines resource day, week and month views - [ResourcesWeekView](https://mantine.dev/llms/schedule-resources-week-view.md): Week view with resource rows for scheduling across resources - [Schedule](https://mantine.dev/llms/schedule-schedule.md): Schedule component with day, week, month and year views - [ScheduleEventsData](https://mantine.dev/llms/schedule-events-data.md) - [WeekView](https://mantine.dev/llms/schedule-week-view.md): Standalone schedule week view component - [YearView](https://mantine.dev/llms/schedule-year-view.md): Standalone schedule year view component ## Guides - [ControlledVsUncontrolled](https://mantine.dev/llms/guides-controlled-vs-uncontrolled.md) - [CustomComponents](https://mantine.dev/llms/guides-custom-components.md) - [EightToNine](https://mantine.dev/llms/guides-8x-to-9x.md) - [FunctionsReference](https://mantine.dev/llms/guides-functions-reference.md) - [Gatsby](https://mantine.dev/llms/guides-gatsby.md) - [Icons](https://mantine.dev/llms/guides-icons.md) - [JavaScript](https://mantine.dev/llms/guides-javascript.md) - [Jest](https://mantine.dev/llms/guides-jest.md) - [LLMDocumentation](https://mantine.dev/llms/guides-llms.md) - [NextJs](https://mantine.dev/llms/guides-next.md) - [Polymorphic](https://mantine.dev/llms/guides-polymorphic.md) - [ReactRouter](https://mantine.dev/llms/guides-react-router.md) - [Redwood](https://mantine.dev/llms/guides-redwood.md) - [SevenToEight](https://mantine.dev/llms/guides-7x-to-8x.md) - [SixToSeven](https://mantine.dev/llms/guides-6x-to-7x.md) - [Storybook](https://mantine.dev/llms/guides-storybook.md) - [Tiptap3Migration](https://mantine.dev/llms/guides-tiptap-3-migration.md) - [TypeScript](https://mantine.dev/llms/guides-typescript.md) - [Vite](https://mantine.dev/llms/guides-vite.md) - [Vitest](https://mantine.dev/llms/guides-vitest.md) ## Theming - [Colors](https://mantine.dev/llms/theming-colors.md) - [ColorSchemes](https://mantine.dev/llms/theming-color-schemes.md) - [DefaultProps](https://mantine.dev/llms/theming-default-props.md) - [MantineProvider](https://mantine.dev/llms/theming-mantine-provider.md) - [ThemeObject](https://mantine.dev/llms/theming-theme-object.md) - [Typography](https://mantine.dev/llms/theming-typography.md): Styles provider for html content ## Styles - [ColorFunctions](https://mantine.dev/llms/styles-color-functions.md) - [CSSFilesList](https://mantine.dev/llms/styles-css-files-list.md) - [CSSModules](https://mantine.dev/llms/styles-css-modules.md) - [CssVariables](https://mantine.dev/llms/styles-css-variables.md) - [CSSVariablesList](https://mantine.dev/llms/styles-css-variables-list.md) - [DataAttributes](https://mantine.dev/llms/styles-data-attributes.md) - [Emotion](https://mantine.dev/llms/styles-emotion.md) - [GlobalStyles](https://mantine.dev/llms/styles-global-styles.md) - [MantineStyles](https://mantine.dev/llms/styles-mantine-styles.md) - [PostCSSPreset](https://mantine.dev/llms/styles-postcss-preset.md) - [Rem](https://mantine.dev/llms/styles-rem.md) - [ResponsiveStyles](https://mantine.dev/llms/styles-responsive.md) - [Rtl](https://mantine.dev/llms/styles-rtl.md) - [StyleProp](https://mantine.dev/llms/styles-style.md) - [StyleProps](https://mantine.dev/llms/styles-style-props.md) - [StylesApi](https://mantine.dev/llms/styles-styles-api.md) - [StylesOverview](https://mantine.dev/llms/styles-styles-overview.md) - [StylesPerformance](https://mantine.dev/llms/styles-styles-performance.md) - [UnstyledComponents](https://mantine.dev/llms/styles-unstyled.md) - [UsageWithSass](https://mantine.dev/llms/styles-sass.md) - [VanillaExtract](https://mantine.dev/llms/styles-vanilla-extract.md) - [VariantsAndSizes](https://mantine.dev/llms/styles-variants-sizes.md) ## X - [Carousel](https://mantine.dev/llms/x-carousel.md): Embla based carousel component - [CodeHighlight](https://mantine.dev/llms/x-code-highlight.md): Highlight code with shiki or highlight.js - [Dropzone](https://mantine.dev/llms/x-dropzone.md): Capture files from user with drag and drop - [ExtensionsPackage](https://mantine.dev/llms/x-extensions.md) - [Modals manager](https://mantine.dev/llms/x-modals.md): Centralized modals manager with option to handle state of multi-step modals - [NavigationProgress](https://mantine.dev/llms/x-nprogress.md): Navigation progress bar - [Notifications system](https://mantine.dev/llms/x-notifications.md): Mantine notifications system - [Rich text editor](https://mantine.dev/llms/x-tiptap.md): Tiptap based rich text editor - [Spotlight](https://mantine.dev/llms/x-spotlight.md): Command center for your application ## Other - [About](https://mantine.dev/llms/about.md) - [AllReleases](https://mantine.dev/llms/changelog-all-releases.md) - [BrowserSupport](https://mantine.dev/llms/browser-support.md) - [Changelog700](https://mantine.dev/llms/changelog-7-0-0.md) - [Changelog710](https://mantine.dev/llms/changelog-7-1-0.md) - [Changelog7100](https://mantine.dev/llms/changelog-7-10-0.md) - [Changelog7110](https://mantine.dev/llms/changelog-7-11-0.md) - [Changelog7120](https://mantine.dev/llms/changelog-7-12-0.md) - [Changelog7130](https://mantine.dev/llms/changelog-7-13-0.md) - [Changelog7140](https://mantine.dev/llms/changelog-7-14-0.md) - [Changelog7150](https://mantine.dev/llms/changelog-7-15-0.md) - [Changelog7160](https://mantine.dev/llms/changelog-7-16-0.md) - [Changelog7170](https://mantine.dev/llms/changelog-7-17-0.md) - [Changelog720](https://mantine.dev/llms/changelog-7-2-0.md) - [Changelog730](https://mantine.dev/llms/changelog-7-3-0.md) - [Changelog740](https://mantine.dev/llms/changelog-7-4-0.md) - [Changelog750](https://mantine.dev/llms/changelog-7-5-0.md) - [Changelog760](https://mantine.dev/llms/changelog-7-6-0.md) - [Changelog770](https://mantine.dev/llms/changelog-7-7-0.md) - [Changelog780](https://mantine.dev/llms/changelog-7-8-0.md) - [Changelog790](https://mantine.dev/llms/changelog-7-9-0.md) - [Changelog800](https://mantine.dev/llms/changelog-8-0-0.md) - [Changelog810](https://mantine.dev/llms/changelog-8-1-0.md) - [Changelog820](https://mantine.dev/llms/changelog-8-2-0.md) - [Changelog830](https://mantine.dev/llms/changelog-8-3-0.md) - [Changelog900](https://mantine.dev/llms/changelog-9-0-0.md) - [Changelog910](https://mantine.dev/llms/changelog-9-1-0.md) - [Changelog920](https://mantine.dev/llms/changelog-9-2-0.md) - [Changelog930](https://mantine.dev/llms/changelog-9-3-0.md) - [Changelog940](https://mantine.dev/llms/changelog-9-4-0.md) - [Contribute](https://mantine.dev/llms/contribute.md) - [GettingStarted](https://mantine.dev/llms/getting-started.md) - [NotFound](https://mantine.dev/llms/404.md) - [OxcConfig](https://mantine.dev/llms/oxc-config-mantine.md) - [PreviousChangelogs](https://mantine.dev/llms/changelog-previous-versions.md) - [Support](https://mantine.dev/llms/support.md)