A bit over a year ago I attended the NgVikings Conference, among great talks, there was one about components library ([here's](https://www.youtube.com/watch?v=QtZMTRq9Ly4) the talk if you're interested). Not even 5' into the talk, I was already convinced -and thinking how- this will help us. 

I always had the mindset of **reusability**, trying to come up with code that is sustainable and reusable across time and different implementations, having a component's library was taking it to the next level.

Honestly, at the beginning I was afraid of how feasible were for us to do it, mainly because the team was small and we had too many things in our plate if we decided to do it, we knew that had to be done in our spare time -usually between tickets-. Despite this, we decided to do it, and a year later, I need to say that was a great decision! 💪

![](https://media.giphy.com/media/BlVnrxJgTGsUw/source.gif)

What I'm trying to say here, is that even if you're a small team or the project is on an early stage, **just do it**, you will see the benefits almost instantaneously, the ability to **prototype faster**, **develop in isolation**, **speed up the development/design process** are just a few of the benefits of it.

Here's a list with some of our learnings:

- **Start with something simple.** This will help you to work on the set-up and preparing the groundwork for more complex things.
- **Came up with processes, conventions.** Once you have the conventions ready (how to choose component names, what CSS preprocessor use, how to test it, etc) everything will be much easier.
- Naming convention (components). Use HTML tags as reference, try to keep it semantic.
- Aim for higher test coverage, remember that **these components are the foundation of your product**.
- **Iterate**, if a component is rarely complex, create a first version of it, supporting the basic functionality and then iterate over it.
- Documentation, similar to the testing part, is the foundation of what you're building, invest time in it.
- **Don't reinvent the wheel**, use existing components, and perhaps extend it to meet your needs.

Also resources/tools that we founded useful:

- [Storybook](https://storybook.js.org/)
- [@storybook/addon-docs](https://www.npmjs.com/package/@storybook/addon-docs)
- [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)
- [Jest Snapshot Testing](https://jestjs.io/docs/en/snapshot-testing)
- [Cypress for E2E testing (using Storybook)](https://www.cypress.io/)

I sincerely hope that these learnings can help you somehow, having a **Design System / Components Library**, is a one-way path.

Hi!, I'm Maxi 🇦🇷

Lead Frontend Developer at ChecklyHQ

Blog

Every startup needs a components library Jul 6, 2020

Side Projects

📰 7Reads

🧡 Skuap.com

💎 SheetAPI.co

📊 Updatefy.co Exit

🤑 CurrencyMenu.com