Project Link: cleanUI
clean UI is a lightweight and customizable Component Library.
This library will make it simple for devs to use and style different CSS components!
It helps you build your projects sooner
To use the library just copy and paste the given code in the part of the HTML. So that you can style your components by just adding class names to your HTML elements.
<link rel="stylesheet" href="https://clean-ui.netlify.app/Components/global.css" />-
Open Source
-
Responsive
-
Clean code
-
Ready to use
Typography describes the creative design of the text on your web pages.
cleanUI has following types of typography styles:
- Heading
- Paragraph text
- Text align
- Extra Style
- gray text
- highlight
- strikethrough
- bold text
- regular text
- light text
- small text
- text with primary color
- text with secondary color
- text with tertiary color
Avatar can be used to show user's profile picture on profile information page, on navigation bar & in blogs.
cleanUI has following types of Avatars:
- Avatars w/ Different Sizes
- Square Avatars
- Text Avatar
Alerts are used to attract user's attention for important information without interrupting the user's flow.
cleanUI has following types of Alerts:
- Solid Alerts
- Hollow Alerts
- Alert w/ Button
- Alert w/ Icons
Each alert have 5 types of alerts, they are as follows:
- Primary Alert
- Secondary Alert
- Success Alert
- Warning Alert
- Danger Alert
Buttons can be used to make your web page interactive to your user. You can use them to take user action.
cleanUI has following types of Buttons:
- Solid Buttons
We have 4 types of Solid Buttons - Primary Button - Secondary Button - Success Button - Error Button
- Outline Buttons
We have 4 types of Outline Buttons - Primary Button - Secondary Button - Success Button - Error Button
- Button w/ Icon
- Floating Button
- Toggle Button
Badge can be used to show either status of the user (online, offline or DnD) or you can use it to show notification count.
cleanUI has following types of Badges:
- Badge on Icons
- Badge on Avatars
Cards can be proved very useful. You can use them to display content on an e-commerce app, or on a video library app. You can also use them to show user feedback in the form of text-only card on your site.
cleanUI has following types of Cards:
- Text Only Card
- Vertical Item Card
- Horizontal Card
- Text Overlay Card
- Card with Badge
- Card with dismiss
- Shadow Card
The input tag specifies an input field where the user can enter data. The input element can be displayed in several ways, depending on the type attribute like text, radio, checkbox etc. You can also disabled them by using appropriate classes.
cleanUI has following types of Inputs:
- Form Input
- Error Form Input
- Radio Button
- Checkbox
The Image component allows you to place an image on your page.
cleanUI has following types of Images:
- Responsive Images
- Circular Image
Lists are used in various places such as navigation bar, article page etc.
cleanUI has following types of Images:
- Ordered Lists
We have 6 types of Ordered lists and they are as follows:
- Numbered List I
- Numbered List II
- Lower Alphabet List
- Upper Alphabet List
- Lower Roman List
- Upper Roman List
- Unordered Lists
We have 4 types of Ordered lists and they are as follows:
- Default List
- Default List w/ Hollow Circle Bullets
- Default List w/ Square Bullets
- Default List w/ No Bullets
-
Inline Lists
-
Reversed List
Navigation bar is used to navigate through the web apps or websites.
Modals are pop-ups that are used to show important information to the user. They are positioned over everything else in the document and remove scroll from the page.
This component can be used for toast or snackbar component. Toast is mostly used to show feedback message.
cleanUI has following types of Images:
- Toast w/ buttons
- Success Toast
- Failure Toast
Rating components can be used as read-only badge or in reviews section to take review from user.