design system: different approaches to create a component library for our design system

Three pillars of design systems :

• Design Language
• Component Library - Core Components
• Style Guide

When creating a design system, different development tasks can be challenging and time-consuming. However, some development tasks are commonly considered more tedious like creating a component library, lot of questions arise like :

what are the different approaches to create a component library?

1st option — build everything from scratch — Manual Creation

• This is the most time-consuming option, it offers complete control and customization but can be time-consuming and may require more development effort.

2nd option — use an existing UI library —

• This is the fastest option, but it gives you the least control over the final product.

3rd option — Hyrid Approach — combine the 1st and 2nd options

Let's explore the 2nd option:
When it comes to use an existing UI library it's not always easy to customize to fit our design system's needs.

So what are the different approaches to customize/extend an existing UI library to fit my requirements ?

• find a themeable library (that supports theming) and adapt it to your needs -
• find a library that you can use as a foundation and build on top -

• Headless components / Unstyled components -

• Find other approaches...

the objective is to POC the different approaches and find the best approach that fits our needs considering the following criteria :

• Customization - how easy is it to customize the components ?
• Time to market - how fast can we deliver the components ?
• Extensibility - how easy is it to extend the components ?
• Accessibility - how accessible are the components ?
• Maintenance - how easy is it to maintain the components ?

Thanks...