Mantine Core
Core components library
Source
Package
Bundle size
License
Installation
Package depends on react, react-dom, @mantine/hooks and react-jss.
Install with npm:
npm install @mantine/core @mantine/hooks
Install with yarn:
yarn add @mantine/core @mantine/hooks
Browser support
All components are tested to work in all major modern browsers. Some components depend on wep APIs that may not be supported by old browsers (e.g. window.matchMedia and ResizeObserver), if you encounter any issues with browsers compatibility open an issue.
Components by category
Layout
Inputs & buttons
ActionIcon
Icon button to indicate secondary action
Autocomplete
Autocomplete user input with any list of options
Button
Render button or link with button styles from mantine theme
Checkbox
Capture boolean input from user
Chips
Alternative to Select and RadioGroup
ColorInput
Capture color data from user
ColorPicker
Inline color picker
Input
Base component to create custom inputs
InputWrapper
Enhance custom inputs with label, error and description
JsonInput
Capture json data from user
MultiSelect
Custom searchable multi select
NativeSelect
Capture user feedback limited to large set of options
NumberInput
Capture number input from user
PasswordInput
Capture password from user with option to toggle visibility
RadioGroup
Capture user feedback limited to small set of options
SegmentedControl
Horizontal control made of multiple segments, alternative to RadioGroup
Select
Custom searchable select
Slider
Capture user feedback from a range of values
Switch
Capture boolean input from user
Textarea
Renders textarea with optional autosize variant
TextInput
Capture string input from user
Navigation
Data display
Accordion
Divide content into collapsible sections
Avatar
Display user profile image, initials or fallback icon
Badge
Display badge, pill or tag
Card
Card with context styles for Image and Divider components
ColorSwatch
Display color swatch
Image
Image with optional placeholder for loading and error state
Kbd
Display keyboard button or keys combination
Spoiler
Hide long sections of content under spoiler
Tabs
Switch between different views
ThemeIcon
Render icon inside element with theme colors
Timeline
Display list of events in chronological order
Overlay
Affix
Render react node inside portal at fixed position
Dialog
Display fixed overlay at any side of the screen
Drawer
Display overlay area at any side of the screen
LoadingOverlay
Overlay over given container with centered Loader
Menu
Combine a list of secondary actions into single interactive area
Modal
Modal with optional header
Overlay
Overlays given element with div element with any color and opacity
Popover
Display popover section relative to given target element
Tooltip
Renders tooltip at given element on mouse over or any other event
Typography
Blockquote
Blockquote with optional cite
Code
Inline or block code without syntax highlight
Highlight
Highlight given part of a string with mark tag
List
Display ordered or unordered list
Mark
Highlight part of the text
Table
Render table with theme styles
Text
Render text and links with theme styles
Title
h1-h6 headings
TypographyStylesProvider
Add Mantine typography styles to your html content
Feedback
Miscellaneous
Collapse
Animate presence with slide down transition
Divider
Horizontal line with optional label or vertical divider
Paper
Renders white or dark background depending on color scheme
Popper
Render dropdown in portal with popper.js
Portal
Render component outside of current context
Transition
Animate presence of component with premade animations
Built by Vitaly Rtishchev and these awesome people