⌘K

Source code Discuss Report issue

Mantine Core

Core components library

Installation

Source

View source code

Package

Bundle size

44.37 kB (umd gzipped)

License

Components by category

Typography

Display quote with optional cite

Display inline or block code without syntax highlight

Highlight given part of the string with mark tag

Render table with theme styles

Render text and links with theme styles

Display h1-h6 headings

TypographyStylesProvider

Add Mantine typography styles to your html content

Inputs

Display icon button to indicate secondary action

Render button or link with button styles from mantine theme

Capture boolean input from user

Base component to create custom inputs

Enhance custom inputs with label, error and description

Capture number input from user

Capture user feedback limited to small set of options

Capture password from user with option to toggle visibility

SegmentedControl

Horizontal control made of multiple segments

Capture user feedback limited to large set of options

Capture boolean input from user

Render textarea with optional autosize variant

Capture string input from user

Layout

Center content vertically and horizontally

Center content horizontally with predefined max-width

Compose elements and components in flex container

Flexbox grid system with variable amount of columns

Data display

Display badge, pill or tag

Display user profile image, initials or fallback icon

Display card with context styles for Image and Divider components

Display color value

Display image with optional placeholder for loading and error state

Display keyboard button

Tabs are used to navigate between related pages or views while keeping current context

Render icon with theme colors

Hide long sections of content under spoiler

Overlay

Display overlay area at any side of the screen

Combine a list of secondary actions into single interactive area

Display overlay with any color and opacity over element

Display popover section relative to given target element

Display loader with overlay over current container

Render tooltip on mouse over or any other event

Feedback

Attract user attention with important static message

Indicate loading state

Show dynamic notifications and alerts to user, part of notifications system

Give user feedback for status of the task

Give user feedback for status of the task with circle diagram

Navigation

Separate list of react nodes with given separator

Display open/close navigation button

Miscellaneous

Display horizontal line with optional label or vertical divider

Render component outside of current context

Render white or dark background depending on color scheme with shadow, padding and border-radius from theme

Animate presence of component with predefined animations

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, if you encounter any issues with browsers compatibility open an issue.