Building a Reusable Component System with React.js and styled-components

Lukas Gisder-Dubé
Level Up Coding
Published in
10 min readFeb 12, 2019

--

Photo by Alex on Unsplash

Coding and Design. A love / hate relationship. Some developers dread the tedious task of implementing design guidelines provided by UX / UI Designers, others love to make things beautiful. I identify with the latter, but at the same time, why not build a smart system that will reduce the time and confusion in adopting design guidelines. We will have a look at how to create a Component System that makes your development process stupidly fast and still follows and enforces design guidelines.

I will first introduce the styled-components library and then show you how to build a design system with it.

Prerequisite: Design System

To enable this workflow, we will need some design guidelines that we can follow. In the last years, many big companies rebuilt their design systems, such as Microsoft, Airbnb, IBM and many more. These design systems can range from color palettes, defining border-radii, margins, paddings and so on to fully fledged UI components, such as cards and containers and even UX-focused components that include workflows, animations, and some logic.

If you do not have an explicit design system, don’t worry. We will start very simple and you can extend it over time. I started out with a couple of components and for many…

--

--

Passionate about technology, design, startups and personal development. Bringing ideas to life at https://dube.io