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 position
Element name
Symbol
Atomic mass
6
Carbon
C
12.011
7
Nitrogen
N
14.007
39
Yttrium
Y
88.906
56
Barium
Ba
137.33
58
Cerium
Ce
140.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
Bummer!
Something terrible happened! You made a mistake and there is no going back, your data was lost forever!
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
We notify you that
You are now obligated to give a star to Mantine project on GitHub
We notify you that
You are now obligated to give a star to Mantine project on GitHub
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
Configure components appearance and behavior with vast amount of settings or overwrite any part of component styles
With new :focus-visible pseudo-class focus ring appears only when user navigates with keyboard
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 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
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 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
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
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
Gallery tab content
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
From Bulbapedia: Bulbasaur is a small, quadrupedal Pokémon that has blue-green skin with darker patches. It has red eyes with white pupils, pointed, ear-like structures on top of its head, and a short, blunt snout with a wide mouth. A pair of small, pointed teeth are visible in the upper jaw when its mouth is open. Each of its thick legs ends with three sharp claws. On Bulbasaur's back is a green plant bulb, which is grown from a seed planted there at birth. The bulb also conceals two slender, tentacle-like vines and provides it with energy through photosynthesis as well as from the nutrient-rich seeds contained within.
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
1
2
3
4
5
Align
Orientation
SlideGap
xs
sm
md
lg
xl
ControlsOffset
xs
sm
md
lg
xl
Dropzone
Capture files from user with drag and drop
Drag images here or click to select files
Attach as many files as you like, each file should not exceed 5mb