Photo by Dollar Gill on Unsplash

How to Build a Component Library with Angular and Storybook

By visualizing your UI component library both developers and designers become more productive.

In this article, I first describe how to build a component library with Angular CLI. After the library is done, I write some stories in Storybook to test and document the UI components.

Storybook is a UI component explorer that visualizes components in different states. Storybook enables structured UI development, testing, and documentation for the major JavaScript frameworks.

Before we start

I have a habit of using short hands of script commands and flags so here are a some that I might use in this article:

npm install -> npm i
ng test -> ng t
ng generate ->  ng g
ng generate library -> ng g lib

Component Library

The goal is to have a component library that we can explore with Storybook. For this, I’m creating a library with a button component.

Workspace