Skip to Content

Data Display

Card

F

Card Title

A simple card with a section, title, and description text.

Q

With Badge

New

Cards can combine sections, badges, and actions.

Minimal Card

A card without a section — just text content and an action.

Badge

Variants

Filled
Light
Outline
Dot
Default
Transparent

Colors

Blue
Violet
Red
Green
Yellow
Orange
Cyan
Pink
Indigo
Gray

Sizes

XS
SM
MD
LG
XL

Gradient

Blue → Violet
Cyan → Blue
Orange → Red

Avatar

Variants

FK
SJ
AB
CD
EF

Sizes

XS
SM
MD
LG
XL

Avatar Group

A
B
C
D
+3

Indicator

FK
SJ
3
AB
CD

Table

ComponentCategoryStatus
ButtonActions
Stable
TextInputInputs
Stable
ModalOverlays
Updated
DatePickerDates
Beta
RichTextEditors
Experimental

Accordion

Default Variant

Content for first item

Timeline

Design

Create wireframes and mockups

2 days ago

Develop

Implement components with Mantine

1 day ago

Review

Code review and QA testing

In progress

Deploy

Ship to production

Upcoming

Spoiler

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

ThemeIcon

F

Q

!

Sizes

F

F

F

F

F

Gradient

F

Q

!

Last updated on