Avatar

Avatar with Badges

Alert

Warning! You are following some bad practice
Error! Something really wrong has occured
Success! You have successfully completed the task

Badge

DEFAULT
SUCCESS
REMOVED
NEW
WARNING
7
8
9
10

Badge on Icons

6
2
2
2

Buttons

Primary Button

Secondary Button

Cards

Card Heading

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora numquam itaque quisquam harum dicta ea, eveniet aperiam eum repudiandae, sapiente nobis. Natus dignissimos nobis quisquam itaque impedit eos quos doloribus.

Card Heading

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora numquam itaque quisquam harum dicta ea, eveniet aperiam eum repudiandae, sapiente nobis. Natus dignissimos nobis quisquam itaque impedit eos quos doloribus.

Card with Badges

NEW

Card Heading

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora numquam itaque quisquam harum dicta ea, eveniet aperiam eum repudiandae, sapiente nobis. Natus dignissimos nobis quisquam itaque impedit eos quos doloribus.

Image

Rounded Image

Input

Full Name should be written*

Please enter a valid email*

Password should be 6 chars long*

List

  • Call Of Duty Warzone
  • Minecraft
  • Animal Crossing: New Horizon
  • Grand Theft Auto 5
  • League Of Legends
  • The Last Of Us Part 2

Stacked List

Navigation

Left nav

Right nav

Modal

Modal Heading

Hello, modals can be used as interactive elements to create informative dialogs with the user.

Grid

Grid with 3 columns

Grid with 2 columns

Typography

Heading Variants

"Get curious, Life’s going to get hard."
"Get curious, Life’s going to get hard."
"Get curious, Life’s going to get hard."
"Get curious, Life’s going to get hard."
"Get curious, Life’s going to get hard."
"Get curious, Life’s going to get hard."

Text Variant

subtitle1. "Love to Code? Join my course with an instant discount of $99."
body1. "Love to Code? Join my course with an instant discount of $99."
subtitle2. "Love to Code? Join my course with an instant discount of $99."
body2. "Love to Code? Join my course with an instant discount of $99."

Centered and Gray Text

"Love to Code? Join my course with an instant discount of $99."
"Love to Code? Join my course with an instant discount of $99."

Toast

Mind UI is open source and free to use!

Loader