DEV Community

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

Posted on • Edited on

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...

Top comments (0)