neatUI is a library that would enable you to create your UI faster without any hustle for thinking about the components. Our components are robust and can be used with any website. They are also flexible so you are free to optimize them as per your needs.
- All the components of neatUI are responsive so you don't have to hustle for responsiveness.
- Reusable and Atomic design patterns are followed while developing the library.
- You can also combine the classes and use them for different purposes.
For using the components you just have to link the CDN that is provided on the home page and than just copy and paste the html provided to you.
To start using the components you just need to link the following code to the html file or the css file and you would be able to use the library right away.
For linking in HTML use
<link
rel="stylesheet"
href="https://suspicious-sammet-33f1b3.netlify.app/Components/components.css"
/>For linking in CSS use
@import "https://suspicious-sammet-33f1b3.netlify.app/Components/components.css";- Alerts
- Badges
- Avatar
- Button
- Card
- Image
- Input
- Lists
- Navigation
- Modal
- RatingBar
- Toast
- Grid
- Typography
- Slider
- Forms
Alerts are used to attract user's attention for important information without interrupting the user's flow.
We have 5 types of alerts
- Primary Alert
- Secondary Alert
- Success Alert
- Warning Alert
- Danger Alert
Avatar can be used to show user's profile picture on profile information page, on navigation bar, in blogs grid items.
We have 2 types of avatar
- Avatar with images
- Avatar with text
Badges are being used to display a notification count or status information
We have 3 types of badges
- Badges on images
- Badges on icons
- Badges on text
Buttons are also called as call to action. We have range of buttons and their states. You may use a tag or button element, you need to add respective classes, and you are good to go.
We have 5 types of buttons
- Primary Button
- Secondary Button
- Success Button
- Warning Button
- Danger Button
Cards are used to show the data which is related. They are very userfull for attracting the user attention. They usually contain the information related to single object.
We have 3 types of cards
- Horizontal Card - Text+Image
- Vertical Card - Text+Image
- Cards with text overlay
Using our library you can easily make your images responsive. Here all the images will be fitted to it's parent width.
You can have 2 types of images
- Image which fits to the parent container
- Round Image
Using our library you can easily make your images responsive. Here all the images will be fitted to it's parent width.
You can have 2 types of images
- Image which fits to the parent container
- Round Image
Inputs are used for taking some important information from the user so that we can use that information for user benefit.
You can have 3 types of inputs
- Floating Inputs
- Simple Inputs
- Inputs with Validation
We have gathered multiple font sizes and font weights which would help you a lot while writing your css.
- Very large text
- Large text
- Medium large text
- Medium text
- Small text
- Very small text
- Small text
- Text with bold weight
- Text with bold weight
Lists are used in various places such as navigation bar, article page etc.
You can have 2 types of lists
- Unordered Lists
- Ordered Lists
Modals are used to show some important information to the user and they are closed only when the user selects some option.
Toasts are used to show pop up messages to the user.
You can have 3 types of toasts
- Success Toast
- Error Toast
- Warning Toast
If you want to divide the page into parts grid comes very handy.
You can have 4 types of toasts
- 50-50 Grid
- 70-30 Grid
- 30-70 Grid
- 3 items in a Grid
It is used to take the user feedback on the product. You can use our ratingbar without needing to write any js for it.
It is used to navigate to different pages in web sites and apps.
Slider or Range are used for selecting the range. Like range of sound in video apps, range of price in e-commerce apps etc. For using slider just copy our html and replace the icon by your required one.
Forms are used to take the information from the user.
