Mantine Components Gallery

MantineのReactコンポーネント一覧

Blockquote

Blockquote with optional cite
Life is like an npm install – you never know what you are going to get.– Forrest Gump
Color

Code

Inline or block code without syntax highlight
React.createElement()

Highlight

Highlight given part of a string with mark tag
Highlight This, definitely THIS and also this!
HighlightColor

List

Display ordered or unordered list
  • Clone or download repository from GitHub
  • Install dependencies with yarn
  • To start development server run npm start command
  • Run tests to make sure your changes do not break the build
  • Submit a pull request once you are done
Type
Size
xs
sm
md
lg
xl

Mark

Highlight part of the text
Highlight this chunk of the text
Color

Table

Render table with theme styles
Element positionElement nameSymbolAtomic mass
6CarbonC12.011
7NitrogenN14.007
39YttriumY88.906
56BariumBa137.33
58CeriumCe140.12

Text

Display text and links with theme styles
Extra small text
Small text
Default text
Large text
Extra large text
Semibold
Bold
Italic
Underlined
Strikethrough
Dimmed text
Blue text
Teal 4 text
Uppercase
capitalized text
Aligned to center
Aligned to right

Title

h1-h6 headings

This is h1 title

This is h2 title

This is h3 title

This is h4 title

This is h5 title
This is h6 title

ActionIcon

Icon button
Color
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl

Button

Render button or link with button styles from mantine theme
Color
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl

CloseButton

ActionIcon with close icon

CopyButton

Copies given text to clipboard

FileButton

Open file picker with a button click

UnstyledButton

Unstyled polymorphic button

Autocomplete

Autocomplete user input with any list of options
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl

Checkbox

Capture boolean input from user
LabelPosition
Color
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl

Chip

Pick one or multiple values with inline controls
Color
Variant
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl

ColorInput

Capture color data from user

ColorPicker

Inline color picker
rgba(47, 119, 150, 0.7)

FileInput

Capture files from user
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl

Input

Base component to create custom inputs
Variant
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl

JsonInput

Capture json data from user
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl

MultiSelect

Custom searchable multi select
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl

NativeSelect

Capture user feedback limited to large set of options
This is anonymous
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl

NumberInput

Capture number input from user
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl

PasswordInput

Capture password from user with option to toggle visibility
Password must include at least one letter, number and special character
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl

Radio

Wrapper for input type radio
LabelPosition
Size
xs
sm
md
lg
xl
Color

Rating

Rating Component
Color
Size
xs
sm
md
lg
xl

SegmentedControl

Horizontal control with multiple segments
Color

Select

Custom searchable select
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl

Slider

Capture user feedback from a range of values
20%
50%
80%
Type
Color
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl

Switch

Capture boolean input from user
LabelPosition
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
Color

TextInput

Capture string input from user
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl

Textarea

Renders textarea with optional autosize variant
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl

Alert

Attract user attention with important static message
Color
Radius
xs
sm
md
lg
xl
Variant

Loader

Indicate loading state
Color
Size
xs
sm
md
lg
xl
Variant

Notification

Show dynamic notifications and alerts to user, part of notifications system
Color
Radius
xs
sm
md
lg
xl

Progress

Give user feedback for status of the task
Color
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl

RingProgress

Give user feedback for status of the task with circle diagram

Skeleton

Indicate content loading state

Accordion

Divide content into collapsible sections
Colors, fonts, shadows and many other parts are customizable to fit your design needs
Radius
xs
sm
md
lg
xl
ChevronPosition

Avatar

Display user profile image, initials or fallback icon
Variant
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
Color

BackgroundImage

Displays image as background
BackgroundImage component can be used to add any content on image. It is useful for hero headers and other similar sections
Radius
xs
sm
md
lg
xl

Badge

Display badge, pill or tag
Badge
Color
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl

Card

Card with context styles for Image and Divider components
Norway
Norway Fjord Adventures
On Sale
With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway

ColorSwatch

Display color swatch

Image

Image with optional placeholder for loading and error state
Random unsplash image

Indicator

Display element at the corner of another element
Color
Radius
xs
sm
md
lg
xl

Kbd

Display keyboard button or keys combination
+ shift + M

Spoiler

Hide long sections of content under spoiler
We Butter the Bread with Butter
We Butter the Bread with Butter was founded in 2007 by Marcel Neumann, who was originally guitarist for Martin Kesici's band, and Tobias Schultka. The band was originally meant as a joke, but progressed into being a more serious musical duo. The name for the band has no particular meaning, although its origins were suggested from when the two original members were driving in a car operated by Marcel Neumann and an accident almost occurred. Neumann found Schultka "so funny that he briefly lost control of the vehicle." Many of their songs from this point were covers of German folk tales and nursery rhymes.

ThemeIcon

Render icon inside element with theme colors
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
Color

Timeline

Display list of events in chronological order
New branch
You've created new branch fix-notifications from master
2 hours ago
Commits
You've pushed 23 commits to fix-notifications branch
52 minutes ago
Pull request
You've submitted a pull request Fix incorrect notification message (#187)
34 minutes ago
Code review
Robert Gluesticker left a code review on your pull request
12 minutes ago

AspectRatio

Maintain responsive consistent width/height ratio
Panda

Center

Centers content vertically and horizontally
All elements inside Center are centered

Container

Center content horizontally with predefined max-width
Default container
xs container with xs horizontal padding
200px container with 0px horizontal padding

Flex

Compose elements in a flex container
Gap
xs
sm
md
lg
xl

Grid

Flexbox grid system with variable amount of columns
1
2
3

Group

Compose elements and components in a horizontal flex container
Spacing
xs
sm
md
lg
xl

MediaQuery

Apply styles to children if media query matches
- larger than lg
- Smaller than lg
- Smaller than xl, larger than sm
- Smaller than 1500px, larger than 800px

SimpleGrid

Responsive grid where each item takes equal amount of space
1
2
3
4
5
Spacing
xs
sm
md
lg
xl
VerticalSpacing
xs
sm
md
lg
xl

Space

Add horizontal or vertical spacing from theme
First line
Second line
H
xs
sm
md
lg
xl

Stack

Compose elements and components in vertical flex container
Spacing
xs
sm
md
lg
xl

Anchor

Display links with theme styles

Breadcrumbs

Separate list of react nodes with given separator

Burger

Open/close navigation button

NavLink

Navigation link

Pagination

Display active page and navigate between multiple pages
Color
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl

Stepper

Display content divided into a steps sequence
Color
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl

Tabs

Switch between different views
Messages tab content
Settings tab content
Color
Variant
Radius
xs
sm
md
lg
xl
Orientation

Dialog

Display fixed overlay at any side of the screen

Drawer

Display overlay area at any side of the screen

HoverCard

Display popover section when target element is hovered

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 other event
Color

Box

Add inline styles to any element or component with sx
Box lets you add inline styles with sx prop

Collapse

Animate presence with slide down transition

Divider

Horizontal line with optional label or vertical divider

FocusTrap

Trap focus at child node

Paper

Renders white or dark background depending on color scheme
Paper is the most basic ui component
Use it to create cards, dropdowns, modals and other components that require background with shadow
Shadow
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
Padding
xs
sm
md
lg
xl

ScrollArea

Area with custom scrollbars
Charizard (Pokémon)
Charizard description from Bulbapedia
Charizard is a draconic, bipedal Pokémon. It is primarily orange with a cream underside from the chest to the tip of its tail. It has a long neck, small blue eyes, slightly raised nostrils, and two horn-like structures protruding from the back of its rectangular head. There are two fangs visible in the upper jaw when its mouth is closed. Two large wings with blue-green undersides sprout from its back, and a horn-like appendage juts out from the top of the third joint of each wing. A single wing-finger is visible through the center of each wing membrane. Charizard's arms are short and skinny compared to its robust belly, and each limb has three white claws. It has stocky legs with cream-colored soles on each of its plantigrade feet. The tip of its long, tapering tail burns with a sizable flame.
As Mega Charizard X, its body and legs are more physically fit, though its arms remain thin. Its skin turns black with a sky-blue underside and soles. Two spikes with blue tips curve upward from the front and back of each shoulder, while the tips of its horns sharpen, turn blue, and curve slightly upward. Its brow and claws are larger, and its eyes are now red. It has two small, fin-like spikes under each horn and two more down its lower neck. The finger disappears from the wing membrane, and the lower edges are divided into large, rounded points. The third joint of each wing-arm is adorned with a claw-like spike. Mega Charizard X breathes blue flames out the sides of its mouth, and the flame on its tail now burns blue. It is said that its new power turns it black and creates more intense flames.

Transition

Animate presence of component with premade animations
fade
scale
scale-y
scale-x
skew-up
skew-down
rotate-left
rotate-right
slide-down
slide-up
slide-left
slide-right
pop
pop-bottom-left
pop-bottom-right
pop-top-left
pop-top-right

Carousel

Embla based carousel component
Align
Orientation
SlideGap
xs
sm
md
lg
xl
ControlsOffset
xs
sm
md
lg
xl

Dropzone

Capture files from user with drag and drop

NProgress

Navigation progress bar

Spotlight

Command center for your application