Which React Components to Build? An Atomic Design Guide

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

This lesson preview is part of the The newline Guide to Building a Company Component Library course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to The newline Guide to Building a Company Component Library, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course The newline Guide to Building a Company Component Library

  • [00:00 - 00:10] The first step in creating a new component library is identifying which components to build. With each team and code base being unique, there isn't a hard rule on which should or shouldn't be shared.

    [00:11 - 00:26] But there are techniques that can help you identify components that maximize developer productivity, while still being a flexible enough for a variety of scenarios. In this lesson, we will take a look at the concept of atomic design and learn how it can be used by library authors to identify shareable components.

    [00:27 - 00:39] Atomic design is a design methodology created by Brad Frost. Originally created to promote consistency and scalability within design systems is a useful tool for identifying share components in existing code bases.

    [00:40 - 01:00] In atomic design, user experiences can be broken into five distinct levels, atoms, molecules, organisms, templates, and pages. Atoms are the building blocks of matter, and the context of a component library , atoms can include standalone HTML elements, as well as more abstract concepts like colors, typography, and spacing.

    [01:01 - 01:12] Atoms are flexible, but they're often too abstract to provide a consistent user experience. Utility-first CSS frameworks, like Tylen CSS, can be a useful implementation for this concept.

    [01:13 - 01:25] Above atoms, we have molecules which are composed of smaller atoms. They can combine atomic styles like color and spacing with more complex concepts like accessibility, layout, and internal state.

    [01:26 - 01:38] Some examples of molecules include buttons, inputs, radios, tabs, drop-downs, tooltips, and most other self-contained UI widgets. Molecules are the most common type of share component.

    [01:39 - 01:50] They're able to provide a consistent user experience, while still being flexible enough for most implementations. Organisms, templates, and pages continue to build on each other to provide more complex experiences.

    [01:51 - 02:02] These concepts work well for design systems, but often include business logic and other complexity that limits the flexibility of our component library. We will not be focusing on these component types in this course.