9 UI Components for Every Project

The ultimate component starter-kit for every application

For the past 2 years, I have been playing with a lot of side projects and one pain point that I always encounter when the projects get larger and more complicated is when I had to rewrite a lot of basic components because of bad management at the beginning, or otherwise I could not scale up the project.

In this story, I decided to collect mistakes I found in those projects and gather a list of components that I think if I had before starting new project, they would have helped me reduce development time and increase project efficiency. I hope you enjoy.

Tip: Use Bit (open source) to create a collection of reusable components you can easily organize, share and use in all your projects and apps! Give it a try:

1. Button

A very simple and most common use one. These are general variants that are common and widely use in most modern website.

semantic-ui

material-ui

don’t forget to define sizes at the beginning of your project.

Mostly, I have no more than 3 sizes in my projects (small, regular, large) but it depends. Just remember that sizes are another necessary one.

2. Typography (Text)

This one is very very important if you want to have your project well organised. These are variants that I use mostly. (Keep it simple)

variants (similar to sizes)

Heading | Title (Large, medium)

Subheading | Subtitle (stay with heading)

body (display mostly in your web)

link (cursor pointer)

colors

default (almost black RGBA(0,0,0,0.87))

primary (your primary colour)

light (grey)

disabled

white

display

block

inline

icon (have icon on the left or right)

alignment (left, center, right)

3. Icon

colours (same as Typography)

sizes

small, regular and large

4. Image

alway create reusable component like Image , don’t use <img /> because you will do lazy load or placeholder later and you will only have to change at one place.

variants

circular (for avatar)

object Fit (cover)

sizes

small, regular and large

5. Grid

Don’t need to create by yourself, most frameworks already have Grid . However, you should ask yourself when you should use Grid , otherwise your DOMs structure will look like a mess and very hard to scale. One way to know that is to ask this question “Does it need to be responsive ?”. Mostly, responsive design will require to use Grid , because that’s what Grid is designed for.

6. List

I found this component appear a lot in many projects, some may differ but the foundation is the same. Usually, it is a list of some data such as friends, products, or even panel.

structure

Left (Avatar, Icon, or Image)

Center (combination of Typography which are Primary Text (most obvious) Secondary Text (description or extra info) . Sometimes there are tag icon or tertiary text below the Secondary Text .

. Sometimes there are or below the . Right (mostly actionable icon or button that will related to the item. For example, “delete” action when clicked.

7. Modal | Alert

A must have component that must be flexible and reusable across the project.

An example of different modal variants

variants

Successful

Failure

Yes/No | Submit/Cancel

Alert | OK

8. Tabs

Example tabs from twitter ui

9. Form Controls

Input (include helperText below and Icon inside input)

Select | Dropdown

Checkbox

Switch

Radio Group

This story explain thoroughly about deciding between Checkbox and Switch. I recommend you take a look at it if you haven’t.