42 KiB
42 KiB
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:
FAQ
- Are Mantine components accessible?: Learn about Mantine components accessibility features
- Browser zooms in when input is focused. What should I do?: Use meta tag to disable browser scaling or increase input size
- Can I have color schemes other than light and dark?: Learn about the difference between color scheme and theme
- Can I have different primary color for light and dark color schemes?: Learn how to use virtual color with primary color in theme object
- Can I remove MultiSelect placeholder when the component has selected values?: 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?: Learn about use-form lists limitations
- Can I use Mantine components as server components?: Learn about use client directive and server components usage
- Can I use Mantine with Astro?: No, Astro does not support React context
- Can I use Mantine with Create React App (CRA)?: 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?: Learn about limitations of third-party styles
- Can I use Mantine with Vue/Svelte/Angular/etc.?: No, Mantine is a React library and does not support other frameworks/libraries
- Can I use nested inline styles with Mantine components?: Nested styles are supported only in CSS files
- Can I use PostCSS function in inline styles?: Learn where PostCSS functions can be used in Mantine
- Can I use private CSS variables to style components?: No, it is not safe and will not work with future versions of Mantine.
- Can I use SegmentedControl with empty value?: SegmentedControl cannot be used without a value
- How can I add dynamic CSS styles?: Use data attributes, CSS variables or inline styles
- How can I add fuzzy search to Select component?: Learn how to integrate third-party fuzzy search libraries with Mantine Select component
- How can I add hover styles to an element?: 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?: Learn how to use attribute selector to apply styles to all Mantine components
- How can I change body background color?: Use CSS to change body background color
- How can I change component color prop value depending on the color scheme?: Learn how to use CSS variables resolver to change color value depending on the color scheme
- How can I change input focus styles?: Learn how to use Styles API with Mantine inputs
- How can I change Tabs border color?: Learn how to use Styles API with Tabs component
- How can I contribute to the library?: There are multiple ways to contribute even without writing code
- How can I disable all inputs/input groups inside a form?: 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?: Learn how to hide/show elements based on color scheme
- How can I focus the first input with error with use-form?: Learn how to handle focus with use-form hook
- How can I get current color scheme value in JavaScript?: How to use useMantineColorScheme and useComputedColorScheme hooks to get current color scheme value in JavaScript
- How can I lint CSS files?: Learn how to set up Stylelint for Mantine postcss syntax
- How can I load fonts in Next.js?: A guide to load custom fonts in Next.js with CSS and next/font package
- How can I load fonts in React Router?: A guide to load custom fonts in React Router
- How can I load fonts in Vite?: A guide to load custom fonts in Vite
- How can I lock scroll in my application?: Use react-remove-scroll library to lock scroll in your application
- How can I submit a template to Mantine documentation?: Learn how to create and submit a template to Mantine documentation
- How can I test Modal/Drawer/Popover components?: Learn how to use react-testing-library to test components that use portals and transitions.
- How can I test Select/MultiSelect components?: Learn how to use react-testing-library to test Select and MultiSelect components.
- How can I upload files from Dropzone component?: Learn how to process files dropped into Dropzone component
- How is that thing done on the mantine.dev website?: Learn how various elements are implemented on the mantine.dev website
- How to align input with a button in a flex container?: Learn how to align Mantine inputs with buttons using Group component
- How to call a function when Modal/Drawer closes and animation completes?: How to use transitionProps in Modal/Drawer components
- How to change background color for FiveM?: Unset body background color and color-scheme styles for FiveM
- How to change input placeholder color?: Learn how to change placeholder color with Styles API
- How to integrate custom input with use-form hook?: Learn how to add use-form support for custom inputs
- How to prevent Modal from closing?: 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?: Learn how to call a function when the form is submitted with errors
- How to update Mantine dependencies?: Learn how to update
@mantine/*,@mantinex/*andpostcss-preset-mantinedependencies manually or with ncu script - How to use Dropzone with @mantine/form?: Learn how to use Dropzone with @mantine/form to handle file selection state
- How to use Mantine template on GitHub?: 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?: Learn how hydration works and how to fix warnings
- Is there a comparison with other libraries?: 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?: No, but you can build it with Affix and ActionIcon components
- Is there DataGrid component that I can use with Mantine?: 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?: Use removeScrollProps to configure react-remove-scroll options
- MantineProvider was not found in component tree. What should I do?: Learn how to resolve MantineProvider issues
- My buttons are transparent and the background is visible only on hover, what is wrong?: 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: Popover dropdown is closed when it detects click-outside events
- My styles are broken with disabled JavaScript. What should I do?: Learn how to use Mantine without JavaScript enabled
- My styles are overridden by Mantine components styles, what should I do?: 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?: 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?: Learn how Mantine retrieves local storage value
- What is the difference between searchable Select and Autocomplete?: Searchable Select and Autocomplete are similar components, but they serve different purposes.
- Where can I find the roadmap?: The roadmap is private and only available to the team.
- Why are my Carousel slides in vertical orientation?: You forgot to import carousel styles
- Why are my notifications displayed at the wrong position?: Because you did not import styles
- Why can I not use one polymorphic component in the component prop of another polymorphic component?: Learn how polymorphic components types work
- Why can I not use value/label data structure with Autocomplete/TagsInput?: Learn the difference between Autocomplete and Select components
- Why can VSCode not autoimport the Text component?: It is confused by the native Text constructor
- Why do I see color scheme flickering on page load?: Color scheme flickering is caused by incorrect usage of ColorSchemeScript
- Why do my dates components look broken?: Because you did not import styles
- Why does FileButton not work in Menu?: Learn how to use FileButton in Menu component
- Why is it required to have 10 shades per color?: Learn how Mantine uses theme colors
- Why is my screen completely empty after I: You have used Notifications component incorrectly
Core
- Accordion: Divide content into collapsible sections
- ActionIcon: Icon button
- Affix: Renders children inside portal at fixed position
- Alert: Attract user attention with important static message
- AlphaSlider: Slider component for selecting alpha channel in color pickers (0 – 1)
- Anchor: Display link with theme styles
- AngleSlider: Pick angle value between 0 and 360
- AppShell: Responsive shell for your application with header, navbar, aside and footer
- AspectRatio: Maintain responsive consistent width/height ratio
- Autocomplete: Autocomplete user input with any list of options
- Avatar: Display user profile image, initials or fallback icon
- BackgroundImage: Displays image as background
- Badge: Display badge, pill or tag
- Blockquote: Blockquote with optional cite
- Box: Base component for all Mantine components
- Breadcrumbs: Separates list of react nodes with given separator
- Burger: Open/close navigation button
- Button: Button component to render button or link
- Card: Card with sections
- Cascader: Select a path from hierarchical data with cascading columns
- Center: Centers content vertically and horizontally
- Checkbox: Capture boolean input from user
- Chip: Pick one or multiple values with inline controls
- CloseButton: Button with close icon
- Code: Inline and block code
- Collapse: Animate presence with slide down/up transition
- ColorInput: Capture color from user
- ColorPicker: Pick colors in hex(a), rgb(a), hsl(a) and hsv(a) formats
- ColorSwatch: Displays color
- Combobox: Create custom select, autocomplete or multiselect inputs
- ComboboxPopover: Add combobox dropdown to any button element
- Container: Center content with padding and max-width
- CopyButton: Copies given text to clipboard
- CorePackage
- DataList: Display label-value pairs as a description list
- Dialog: Display a fixed overlay dialog at any side of the screen
- Divider: Horizontal line with optional label or vertical divider
- Drawer: Display overlay area at any side of the screen
- EmptyState: Display a placeholder for no data, empty results and first-run states
- Fieldset: Group related elements in a form
- FileButton: Open file picker with a button click
- FileInput: Capture files from user
- Flex: Compose elements in a flex container
- FloatingIndicator: Display a floating indicator over a group of elements
- FloatingWindow: Draggable floating area
- FocusTrap: Trap focus at child node
- Grid: Responsive 12 columns grid system
- Group: Compose elements and components in a horizontal flex container
- Highlight: Highlight given part of a string with mark
- HoverCard: Display popover section when target element is hovered
- HueSlider: Slider component for selecting hue channel in color pickers (0 – 360 degrees)
- Image: Image with optional fallback
- Indicator: Display element at the corner of another element
- Input: Base component to create custom inputs
- JsonInput: Capture json data from user
- Kbd: Display keyboard key
- List: Display ordered or unordered list
- Loader: Indicate loading state
- LoadingOverlay: An overlay with centered loader
- Mark: Highlight part of the text
- Marquee: Create continuous scrolling animation for content
- MaskInput: Input with mask pattern for formatted text entry
- Menu: Combine a list of secondary actions into single interactive area
- Menubar: Desktop application style menubar with a row of menu triggers
- Modal: An accessible overlay dialog
- MultiSelect: Custom searchable multi select
- NativeSelect: Native select element based on Input
- NavLink: Navigation link
- Notification: Show dynamic notifications and alerts to user, part of notifications system
- NumberFormatter: Format number with thousands/decimal separators and suffix/prefix
- NumberInput: Capture number from user
- OverflowList: Hide items that do not fit in a container and display them as a single collapsed item
- Overlay: Overlays parent element with div element with any color and opacity
- Pagination: Display active page and navigate between multiple pages
- Paper: Renders white or dark background depending on color scheme
- PasswordInput: Capture password data from user
- Pill: Removable and non-removable tags
- PillsInput: Base component for custom tags inputs and multi selects
- PinInput: Capture pin code or one time password from the user
- Popover: Display popover section relative to given target element
- Portal: Renders component outside of parent element tree
- Progress: Give user feedback for status of the task
- Radio: Wrapper for input type radio
- RangeSlider: RangeSlider component
- Rating: Pick and display rating
- RingProgress: Give user feedback for status of the task with circle diagram
- RollingNumber: Animate value changes with rolling digits
- ScrollArea: Area with custom scrollbars
- Scroller: Horizontal scroll container with navigation controls
- SegmentedControl: A linear set of two or more segments
- Select: Custom searchable select
- SemiCircleProgress: Represent progress with semi circle diagram
- SimpleGrid: Responsive grid in which each item takes equal amount of space
- Skeleton: Indicate content loading state
- Slider: Slider component
- Space: Add horizontal or vertical spacing from theme
- Splitter: Resizable split pane layout
- Spoiler: Hide long sections of content under a spoiler
- Stack: Compose elements and components in a vertical flex container
- Stepper: Display content divided into a steps sequence
- Switch: Capture boolean input from user
- Table: Render table with theme styles
- TableOfContents: Renders a list of headings on the page and tracks current heading visible in the viewport
- Tabs: Switch between different views
- TagsInput: Capture a list of values from user with free input and suggestions
- Text: Display text
- Textarea: Autosize or regular textarea
- TextInput: Capture string input from user
- ThemeIcon: Render icon inside element with theme colors
- Timeline: Display list of events in chronological order
- Title: h1-h6 heading
- Tooltip: Renders tooltip at given element on mouse over or other event
- Transition: Animate presence of component with pre-made animations
- Tree: Display a Tree structure
- TreeSelect: Select with hierarchical tree data
- Typography: Styles provider for html content
- UnstyledButton: Unstyled polymorphic button
- VisuallyHidden: Hide element visually but keep it accessible for screen readers
Hooks
- HooksPackage
- use-element-size: Returns element width and height and observes changes with ResizeObserver
- useClickOutside
- useClipboard
- useCollapse
- useColorScheme
- useCounter
- useDebouncedCallback
- useDebouncedState
- useDebouncedValue
- useDidUpdate
- useDisclosure
- useDocumentTitle
- useDocumentVisibility
- useDrag
- useEventListener
- useEyeDropper
- useFavicon
- useFetch
- useFileDialog
- useFloatingWindow
- useFocusReturn
- useFocusTrap
- useFocusWithin
- useForceUpdate
- useFullscreen
- useHash
- useHeadroom
- useHotkeys
- useHover
- useId
- useIdle
- useInputState
- useIntersection
- useInterval
- useInViewport
- useIsFirstRender
- useIsomorphicEffect
- useListState
- useLocalStorage
- useLogger
- useLongPress
- useMap
- useMask
- useMediaQuery
- useMergedRef
- useMounted
- useMouse
- useMove
- useMutationObserver
- useNetwork
- useOrientation
- useOs
- usePageLeave
- usePagination
- usePrevious
- useQueue
- useRadialMove
- useReducedMotion
- useResizeObserver
- useRovingIndex
- useScrollDirection
- useScroller
- useScrollIntoView
- useScrollSpy
- useSelection
- useSet
- useSetState
- useShallowEffect
- useSplitter
- useStateHistory
- useTextSelection
- useThrottledCallback
- useThrottledState
- useThrottledValue
- useTimeout
- useToggle
- useUncontrolled
- useValidatedState
- useViewportSize
- useWindowEvent
- useWindowScroll
Form
- Form context: Add context support to use-form with createFormContext
- formActions
- formAllInputs
- formErrors
- formGetInputProps
- formNested
- FormPackage
- formRecipes
- formSchemaValidation
- formStatus
- formUncontrolled
- formValidation
- formValidators
- formValues
- use-field: use-field hook – manage single field state
- use-form: Manage form state
Dates
- Calendar: Base component for custom date pickers
- DateInput: Free form date input
- DatePicker: Inline date, multiple dates and dates range picker
- DatePickerInput: Date, multiple dates and dates range picker input
- DateTimePicker: Capture datetime from the user
- GettingStartedDates
- InlineDateTimePicker: Inline date and time picker with range support
- MiniCalendar: Compact calendar to display a small number of days in a row
- MonthPicker: Inline month, multiple months and months range picker
- MonthPickerInput: Month, multiple months and months range picker input
- TimeGrid: Captures time value from the user with a predefined set of options
- TimeInput: Capture time from the user
- TimePicker: Captures time value from the user
- TimeValue: Display a formatted time value
- YearPicker: Inline year, multiple years and years range picker
- YearPickerInput: Inline year, multiple years and years range picker
Charts
- AreaChart: Area chart component with stacked, percent and split variants
- BarChart: Bar chart component with stacked and percent variants
- BarsList: Display a list of bars with names and values
- BubbleChart: Bubble chart component
- BulletChart: Compact KPI chart with value, target, and qualitative ranges
- CompositeChart: Composed chart with support for Area, Bar and Line charts
- DonutChart: Donut chart component
- FunnelChart: Funnel chart component
- GettingStartedCharts
- Heatmap: Heatmap chart component
- LineChart: Line chart component
- PieChart: Pie chart component
- RadarChart: Radar chart component
- RadialBarChart: Radial bar chart component
- SankeyChart: Sankey diagram component
- ScatterChart: Scatter chart component
- Sparkline: Simplified area chart to show trends
- SunburstChart: Sunburst chart component for hierarchical data
- Treemap: Treemap chart component
Schedule
- AgendaView: Vertical list view of events grouped by date
- DayView: Standalone schedule day view component
- GettingStartedSchedule
- MobileMonthView: Mobile-optimized schedule month view component
- MonthView: Standalone schedule month view component
- RecurringEventsSchedule
- ResourcesDayView: Day view with resource columns for scheduling across resources
- ResourcesMonthView: Month view with resource lanes for scheduling across resources
- ResourcesSchedule: Schedule wrapper component that combines resource day, week and month views
- ResourcesWeekView: Week view with resource rows for scheduling across resources
- Schedule: Schedule component with day, week, month and year views
- ScheduleEventsData
- WeekView: Standalone schedule week view component
- YearView: Standalone schedule year view component
Guides
- ControlledVsUncontrolled
- CustomComponents
- EightToNine
- FunctionsReference
- Gatsby
- Icons
- JavaScript
- Jest
- LLMDocumentation
- NextJs
- Polymorphic
- ReactRouter
- Redwood
- SevenToEight
- SixToSeven
- Storybook
- Tiptap3Migration
- TypeScript
- Vite
- Vitest
Theming
- Colors
- ColorSchemes
- DefaultProps
- MantineProvider
- ThemeObject
- Typography: Styles provider for html content
Styles
- ColorFunctions
- CSSFilesList
- CSSModules
- CssVariables
- CSSVariablesList
- DataAttributes
- Emotion
- GlobalStyles
- MantineStyles
- PostCSSPreset
- Rem
- ResponsiveStyles
- Rtl
- StyleProp
- StyleProps
- StylesApi
- StylesOverview
- StylesPerformance
- UnstyledComponents
- UsageWithSass
- VanillaExtract
- VariantsAndSizes
X
- Carousel: Embla based carousel component
- CodeHighlight: Highlight code with shiki or highlight.js
- Dropzone: Capture files from user with drag and drop
- ExtensionsPackage
- Modals manager: Centralized modals manager with option to handle state of multi-step modals
- NavigationProgress: Navigation progress bar
- Notifications system: Mantine notifications system
- Rich text editor: Tiptap based rich text editor
- Spotlight: Command center for your application
Other
- About
- AllReleases
- BrowserSupport
- Changelog700
- Changelog710
- Changelog7100
- Changelog7110
- Changelog7120
- Changelog7130
- Changelog7140
- Changelog7150
- Changelog7160
- Changelog7170
- Changelog720
- Changelog730
- Changelog740
- Changelog750
- Changelog760
- Changelog770
- Changelog780
- Changelog790
- Changelog800
- Changelog810
- Changelog820
- Changelog830
- Changelog900
- Changelog910
- Changelog920
- Changelog930
- Changelog940
- Changelog950
- Contribute
- GettingStarted
- NotFound
- OxcConfig
- PreviousChangelogs
- Support