MinUi is a simple, minimal component library built using vanilla html and css.

To start using component library, import the following:

<link rel="stylesheet" href="https://minui.netlify.app/index.css" />

This link can be used in html file.

Import the following in the css file:

@import url('https://minui.netlify.app/index.css');

Go to homepage

MinUi has following components:

1. Alert
2. Avatar
3. Badge
4. Button
5. Card
6. grid
7. Image
8. Input
9. list
10. Modal
11. Navigation
12. Rating
13. Snackbar
14. Typography

Alert dialog is used to alert the user with some different information. Alert can be of different types viz. success, warning, failure etc.

To know how to implement it, go through the following link Alert

Avatar represent the picture of user, it can contain illustration, the initials or the actual image of the user. Its size can vary depending on the use case.

To know how to implement it, go through the following link Avatar

Badge are used to indicated a state of component. It can be used to communicate whether a user is active or inactive, or an item is trending, best seller etc.

Badges can be of different types viz.

1. Badge on text
2. Badge on icon
3. Badge on avatar
4. Text badges

To know how to implement it, go through the following link Badge

Buttons are one of the main component of any application. Different style of button signifies the level of importance. Button can be primary, secondary, outlined, floating etc.

To know how to implement it , go through the following link Button

Cards are the most used items in todays ui design. From ecommerce sites to social media sites, cards can be seen everywhere, they can be vertical or horizontal.

To know how to implement it , go through the following link Card

Grid can be used for basic alignment of content. Grid can be used to align your content into two layer layout or three layer layout or a much more complex layout.

To know how to implement it , go through the following link Grid

Images are used almost everywhere, a good responsive image can enhace the look of a site much more than a stretched pixelated image.

To know how to implement it , go through the following link Image

Input box are used alot from searching to signing up forms. Input has different states, this states are great way to give feedback to the user. The states can be,

• Default
• Success
• Failure
• Disabled

To know how to implement it , go through the following link Input

List can be of different type. They can vary from simple bulleted list to a roman numbered list.

To know how to implement it , go through the following link List

Modal have a wide variety of use case, it can be used to display a offer or as a prompt to user for signing up to a newsletter etc. Modal can containe plain text or images.

To know how to implement it , go through the following link Modal

The navigation component is found everywhere, it can be simple with just a logo and few buttons or it can be complex with a logo, a search container ,buttons dropdown menus etc.

To know how to implement it , go through the following link Navigation

Ratings are use for providing feedback, to know how to implement it, go through the following link Rating

Snackbar are used to provide feedback to the user or just as notification. To know how to implement it, go through the following link Snackbar

Text have different sizes, decoration, alignment etc to know how to implement them go through following link Typography