Simple color scheme toggle

Card with actions grid

Resident Evil Village is a direct sequel to 2017’s Resident Evil 7, but takes a very different direction to its predecessor, namely the fact that this time round instead of fighting against various mutated zombies, you’re now dealing with more occult enemies like werewolves and vampires.

Resident Evil Village review

Article card with image

Top 50 underrated plants for house decoration

Article card with footer

Best forests to visit in North America

Card with background image

The best laptop for Frontend engineers in 2022

Vertical article card

Articles cards grid

Authentication form

Authentication page with image

Authentication form with title

Autocomplete async data

Completely renovated for the season 2020, Arena Verudela Bech Apartments are fully equipped and modernly furnished 4-star self-service apartments located on the Adriatic coastline by one of the most beautiful beaches in Pula.

Verudela Beach

Card with badges

Copy to clipboard button

Button with menu

Button with loading progress

Color scheme toggle button

Extend default theme with any amount of additional colors, replace shadows, radius, spacing, fonts and many other properties to match your design requirements. Mantine theme is just an object, you can subscribe to it in any part of application via context and use it to build your own components.

Theming documentation

Card with gradient border

56 km this month • 17% improvement compared to last month • 443 place in global scoreboard

Distance

Avg. speed

Score

Running challenge

Card with stats

Carousel with cards

Card with carousel

Core components library: inputs, buttons, overlays, etc.

@mantine/core

Card with checkbox

<p>I use <a href="https://heroku.com/" rel="noopener noreferrer" target="_blank">Heroku</a> to host my Node.js application, but MongoDB add-on appears to be too <strong>expensive</strong>. I consider switching to <a href="https://www.digitalocean.com/" rel="noopener noreferrer" target="_blank">Digital Ocean</a> VPS to save some cash.</p>

Comment with html content

This Pokémon likes to lick its palms that are sweetened by being soaked in honey. Teddiursa concocts its own honey by blending fruits and pollen collected by Beedrill. Blastoise has water spouts that protrude from its shell. The water spouts are very accurate.

Comment

Contact information with icons

Contact us form

Inputs with label inside input

Cookies banner

Number input with currency select

Custom switch

Carbon

Nitrogen

Yttrium

Barium

Cerium

Drag'n'drop list

Drag'n'drop list with handle

Drag'n'drop table

Header with multiple layers

Navbar with 2 sections

Dropzone with button

Email banner

FAQ simple

Faq with background

Faq page header

Faq with image

Features with icons

Card with icon features

Features with cards

Every once in a while, you’ll see a Golbat that’s missing some fangs. This happens when hunger drives it to try biting a Steel-type Pokémon.

Integrate effortlessly with any technology stack

Features with monotone icons

Azurill can be seen bouncing and playing on its big, rubbery tail

Pharmacists

Fans obsess over the particular length and angle of its arms

Lawyers

They divvy up their prey evenly among the members of their pack

Bank owners

Phanpy uses its long nose to shower itself

Others

Its lungs contain an organ that creates electricity. The crackling sound of electricity can be heard when it exhales. Azurill’s tail is large and bouncy. It is packed full of the nutrients this Pokémon needs to grow.

Use cases

Features with image icons

Features with title

Input with floating label

Footer with centered links

About

Project

Community

Footer with links

Simple footer

Footer with social icons

Forgot password

Forgot password on input label

Get in touch form

Gradient segmented control

Grid with asymmetrical columns

Header with primary action

Header with mega menu

Header with menus

Header with logo in the middle

Responsive header

Header with search

Simple header

Jane Spoonfighter

Header with tabs

Hero with bullets

Hero with content on left

Hero with background image

Hero with image on the right

Hero section with text

Hero section with gradient text

Save up to 25% at Fifth Season Hotels in Europe, the Middle East, Africa and Asia Pacific

Plan & save

Banner with image and action

Journey to Swiss Alps

Card with image as background

Checkbox with image

Inputs with tooltip

Input with custom validation styles

Input with contained button

Language picker

Grid with leading item

Collapsible links group

Navbar with tooltips

Navbar with nested links

Navbar with search

Navbar with SegmentedControl

Simple navbar

404 page with image

404 page

404 as background image

Password with strength meter

Progress card

Progress card with color

Number input with custom controls

Segmented color scheme toggle

500 page

503 page

Project tasks

Stats card with progress

Direct messages you have received from other users

Messages

Code review requests from your team members

Review requests

Comments

Digest with best community posts from previous week

Recommendations

Choose what notifications you want to receive

Configure notifications

Card with switches

Tasks card

Application cards