alexmj212.dev/blog

Building A Component Library

Creating a component library from scratch

January 07, 2022

In my experience, I’ve worked with other internal front-end component and design libraries. Those libraries often had the goal of providing a consistent framework and tooling for those particular application stacks. These libraries were based on the primary JavaScript library that they are used in. They provided reusable components that could be dropped in as needed. These libraries had some kind of versioning system that would automatically publish as changes were made. In some cases, the library used semantic versioning that gated breaking changes.

I want to build my own component library from the ground up so I can take these approaches I’m familiar with and create my own. I will be following other popular libraries and emulate features I want to have in my library. I don’t intend for this library to be used by others but I want to familiarize myself with the process of creating and publishing a package. I want to start small and establish some priorities for this project as well as some short-term goals.

Some of the priorities I’ll be researching include:

  • Maintaining a small package size
  • Including accessibility options
  • Theme support (dark mode, color themes)
  • Responsive designs
  • Stay as close to semantic elements as possible

Goals include:

  • Creating a published package with semantic versioning
  • A documentation site with examples
  • An automated build system

Ultimately, the goal is to learn and to be more proficient. In addition, I want to document the learning process. I will make mistakes and there are things I do not know or have not seen. Hopefully this process expands my knowledge and I learn some things in the process.

Profile picture
Alex Johnson alexmj212@gmail.com

I'm a front-end software engineer based in Lexington, KY and I specialize in building (and sometimes designing) experiences for the web. You can find out more about me here.