MantineHub

Mantine Components Playground ⛹️‍♂️

Preview all Mantine components with your theme. Explore variants, sizes, and states in real time.

Inputs

Checkbox

Label position
Color
Variant
Radius
Size

Checkbox Group

Select your favorite frameworks/libraries

This is anonymous

Chip

Color
Variant
Size
Radius

ColorInput

Input description

Variant
Size
Radius

Fieldset

Personal information
Variant
Radius

FileInput

Input description

Variant
Size
Radius

Native Select

Input description

Variant
Size
Radius

PinInput

Size
Length

Radio

Label position
Size
Color
Variant

Radio Group

Select your favorite framework/library

This is anonymous

Rating

Color
Size
Count

Segmented Control

Orientation
Color
Size
Radius

Slider

20%
50%
80%
Color
Size
Radius

Switch

Color
Label position
Size
Radius

Switch Group

Select your favorite framework/library

This is anonymous

Textarea

Input description

Variant
Size
Radius

Text Input

Input description

Variant
Size
Radius

Combobox

Autocomplete

Input description

Variant
Size
Radius

Multiselect

Input description

Variant
Size
Radius

Pills Input

Input description

ReactVueSvelte
Variant
Size
Radius

Select

Input description

Variant
Size
Radius

Tag Input

Input description

FirstSecond
Variant
Size
Radius

Buttons

ActionIcon

Color
Size
Radius

Button

Color
Size
Radius

CloseButton

Size
Variant

Navigation

Anchor

Anchor component
Underline

Stepper

Color
Radius
Size

Tabs

Color
Variant
Radius
Orientation

Feedback

Alert

Color
Radius

Loader

Color
Size
Type

Notification

Color
Radius

Progress

Color
Radius
Size
Value

RingProgress

Hover sections to see tooltips

Size
Thickness

SemiCircleProgress

Label

Fill direction
Orientation
Filled segment color
Size
Thickness
Value

Skeleton

Overlays

Dialog

Drawer

HoverCard

Loading Overlay

Overlay

Demo

Popover

Tooltip

Data Display

Accordion

Crisp and refreshing fruit. Apples are known for their versatility and nutritional benefits. They come in a variety of flavors and are great for snacking, baking, or adding to salads.
Radius
Chevron position

Avatar

Radius
Size
Color

BackgroundImage

BackgroundImage component can be used to add any content on image. It is useful for hero headers and other similar sections

Radius

Badge

Badge
Color
Size
Radius

Card

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

Image

Indicator

Color
Offset
Radius
Size

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

Radius
Size
Color

Timeline

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

Color
Radius
Active
Line width
Bullet size
Align

Typography

Blockquote

Life is like an npm install – you never know what you are going to get.– Forrest Gump
Color
Radius
Icon size

Code


import { Code } from '@mantine/core';

function Demo() {
  return <Code>React.createElement()</Code>;
}

Highlight

Highlight This, definitely THIS and also this!

Color

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

Mark

Highlight this chunk of the text

Color

Table

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

Text

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

This is h1 title

This is h2 title

This is h3 title

This is h4 title

This is h5 title
This is h6 title

Miscellaneous

Divider

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit minus ea, perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit? Maiores sed pariatur aliquid commodi atque sunt officiis natus?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit minus ea, perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit? Maiores sed pariatur aliquid commodi atque sunt officiis natus?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit minus ea, perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit? Maiores sed pariatur aliquid commodi atque sunt officiis natus?

Size
Variant
Color
Label position

Paper

Paper is the most basic ui component

Use it to create cards, dropdowns, modals and other components that require background with shadow

Shadow
Radius

ScrollArea

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.

Scrollbar size
Scroll hide delay

DateInput

Input description

Variant
Size
Radius

Charts

AreaChart

Tick line
Grid axis

BarChart

Tick line
Grid axis

LineChart

Tick line
Grid axis

CompositeChart

Tick line
Grid axis

DonutChart

Size
Thickness
Padding angle
Stroke width

PieChart

Labels position
Labels type
Stroke width
Size

RadarChart

ScatterChart

BubbleChart

Color

Sparkline

Color
Fill opacity
Stroke width

This project is inspired by Shadcn Themes. The source code is available on GitHub.

Buy Me A Coffee