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');
MinUi has following components:
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.
- Badge on text
- Badge on icon
- Badge on avatar
- 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