# 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 ## 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 - [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 - [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) - [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 - [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 - [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 - [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 - [Menu](https://mantine.dev/llms/core-menu.md): Combine a list of secondary actions into single interactive area - [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 - [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 - [ScrollArea](https://mantine.dev/llms/core-scroll-area.md): Area with custom scrollbars - [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 - [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 - [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) - [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) - [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) - [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) - [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) - [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) - [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) ## 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) - [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 - [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 - [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 ## Guides - [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) - [BrowserSupport](https://mantine.dev/llms/browser-support.md) - [Contribute](https://mantine.dev/llms/contribute.md) - [EslintConfig](https://mantine.dev/llms/eslint-config-mantine.md) - [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) - [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) - [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) - [GettingStarted](https://mantine.dev/llms/getting-started.md) - [HooksPackage](https://mantine.dev/llms/form-package.md) - [NotFound](https://mantine.dev/llms/404.md) - [Support](https://mantine.dev/llms/support.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