neatUI

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.


Gify

neatUI GIF


Features

  • 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.

How to run app

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";

Components


Alerts

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

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

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

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

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

Images

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

Images

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

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

Typography

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

Lists are used in various places such as navigation bar, article page etc.

You can have 2 types of lists

  • Unordered Lists
  • Ordered Lists

Modal

Modals are used to show some important information to the user and they are closed only when the user selects some option.

Modal image


Toast

Toasts are used to show pop up messages to the user.

You can have 3 types of toasts

  • Success Toast
  • Error Toast
  • Warning Toast

Grids

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

RatingBar

It is used to take the user feedback on the product. You can use our ratingbar without needing to write any js for it.

RatingBar image


Navigation

It is used to navigate to different pages in web sites and apps.

Navigation image


Slider

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

Forms are used to take the information from the user.

Form image