Nice UI Components

Live Deployment

What is this?

When I started making UIs I experienced what Ira Glass calls The Gap.

I had the same experience when I first started desiging clothes. Back then I followed Yohji Yamomoto's thoughts on copying, and made replicas of his clothes. It was an arduous process of disassembling, measuring, rebuilding, and slowly understanding the systems of tailoring and construction that he uses. In examining how great clothes were made and creating replicas of them, I became a better designer.

Therefore I wanted to do the same for UI, by replicating some Nice UI Components that I come across.

So here is a series of UI components, handwritten in CSS. No UI libraries, except for Tabler Icons for icons. All of the components are responsive from desktop to 320px (iPhone 5/5S/SE).

Some of the components are from the book Refactoring UI by Adam Wathan and Steve Schoger. Some were found in other places. Some are combinations of two or more components that I liked.

Setup

Install dependencies

yarn

Run the test server

yarn start

View the site (by default it will be at http://localhost:3000)

Credits

Amsterdam photo by Nastya Dulhiier on Unsplash

Apartment photo by Augusto Lopes on Unsplash

Avatars: [1] [2] [3] [4] [5] [6] [7] [8]