logo
Mitra UI
×

My Components

GETTING STARTED

Mitra UI allows you to build webapps faster using the components designed. These can be reused.

Copy the below code to get started and start using for your apps.

AVATARS

With hover effect

avatar image with hover effect avatar image with hover effect avatar image with hover effect avatar image with hover effect avatar image with hover effect

Without hover effect

avatar image with hover effect avatar image with hover effect avatar image with hover effect avatar image with hover effect avatar image with hover effect

ALERTS

Task done successfully

Some error occurred

This is a warning!

I am some info!

BADGES

23
9% off
NEW
TRENDING

Badge on Icons

23
23
23

Badge on Avatars

avatar image with hover effect
avatar image with hover effect

BUTTONS

Normal Buttons

Link Buttons

Buttons with icons

Floating Action Buttons

+
+
+

IMAGES

Responsive Image

Round Image

NOTIFY

Message sent

SNACKBAR

Message sent

UNDO

CARDS

Cards with Badges

product-image

Product Name

Product Description

₹599

₹1299 Save: ₹700
NEW
product-image

Product Name

Product Description

₹599

₹1299 Save: ₹700
TRENDING
product-image

Product Name

Product Description

₹599

₹1299 Save: ₹700
9% off

CARDS

Card with a Dismiss Button

product-image

Product Name

Product Description

₹599

₹1299 Save: ₹700

Text Only Cards

Product Name

Additional Detail

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi repudiandae, rerum, necessitatibus odio aperiam delectus officiis tenetur expedita laboriosam pariatur dicta reiciendis atque! Tempore magni eaque sequi repudiandae iure numquam!

TYPOGRAPHY

Headings

This is Heading-1

This is Heading-2

This is Heading-3

This is Heading-4

This is Heading-5
This is Heading-6

Small Text

I am a small text.

Gray Text

I am a gray text.

Center Text

This text is in center.

Vertical Navigation Bar

SIMPLIFIED GRID

2x2 Grid

1
2
3
4

3x3 Grid

1
2
3
4
5
6
7
8
9

LIST

Normal List

  • Avatar
  • Alerts
  • Badges

Stacked List

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum quidem explicabo in magni enim dolor animi sint quos quia, laudantium ad corrupti porro vero nobis culpa. Libero perspiciatis aliquam officia?
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quis quod perspiciatis dolorum adipisci dignissimos ut odio molestias minus sapiente dolore laudantium mollitia, aperiam incidunt maxime necessitatibus possimus exercitationem impedit!
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt sequi autem modi porro perspiciatis magni deserunt facere maxime dolore minima? Sapiente ex fugiat placeat modi odio provident hic eos quos.

RATING

Type-1

Type-2

4.5