The latest articles on DEV Community by MidoAhmed (@midoahmed). https://dev.to/midoahmed https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F209830%2F44a8fd5a-bd53-4f92-823a-b263e4350fd2.jpeg https://dev.to/midoahmed en MidoAhmed Tue, 01 Aug 2023 00:15:38 +0000 https://dev.to/midoahmed/design-system-different-approaches-to-create-a-component-library-for-our-design-system-19bg https://dev.to/midoahmed/design-system-different-approaches-to-create-a-component-library-for-our-design-system-19bg <p>Three pillars of design systems :</p> <ul> <li><strong>Design Language</strong></li> <li><strong>Component Library - Core Components</strong></li> <li><strong>Style Guide</strong></li> </ul> <p>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 :</p> <blockquote> <p>what are the different approaches to create a component library?</p> </blockquote> <p><em>1st option</em> — build everything from scratch — Manual Creation</p> <ul> <li>This is the most time-consuming option, it offers complete control and customization but can be time-consuming and may require more development effort.</li> </ul> <p><em>2nd option</em> — use an existing UI library —</p> <ul> <li>This is the fastest option, but it gives you the least control over the final product.</li> </ul> <p><em>3rd option</em> — Hyrid Approach — combine the 1st and 2nd options</p> <p>Let's explore the 2nd option:<br> When it comes to use an existing UI library it's not always easy to customize to fit our design system's needs.</p> <blockquote> <p>So what are the different approaches to customize/extend an existing UI library to fit my requirements ?</p> </blockquote> <ul> <li> <strong>find a themeable library (that supports theming) and adapt it to your needs</strong> -</li> <li> <strong>find a library that you can use as a foundation and build on top</strong> -</li> <li><p><strong>Headless components / Unstyled components</strong> -</p></li> <li><p>Find other approaches...</p></li> </ul> <p>the objective is to POC the different approaches and find the best approach that fits our needs considering the following criteria :</p> <ul> <li> <strong>Customization</strong> - how easy is it to customize the components ?</li> <li> <strong>Time to market</strong> - how fast can we deliver the components ?</li> <li> <strong>Extensibility</strong> - how easy is it to extend the components ?</li> <li> <strong>Accessibility</strong> - how accessible are the components ?</li> <li> <strong>Maintenance</strong> - how easy is it to maintain the components ?</li> </ul> <p>Thanks...</p>