Building a Component Library from Scratch

How Oscar used React and CSS Modules to build a flexible component library for its many front-ends

Oscar’s technology suite is comprised of multiple applications. We build unique web-based interfaces for Oscar members that want to find and receive care, physicians that need to review their patients’ health history, and Care Guides that assist members with any health needs that arise. And while most of our users only ever log into one of these applications, there is enormous value in developing and using a single, powerful set of components that embody the Oscar brand.

To create a uniform experience, Oscar decided to develop a shared component library that unifies interactions and visuals across systems. By building a library accessible to Oscar front-end and mobile engineers across the organization, we also hoped to create a more consistent development environment for our tech team.

In Oscar’s earlier component libraries, we used a building-block approach by nesting well-defined and relatively simple components many times over. This approach allowed for a high degree of flexibility, and was easy to implement with React. Over time, however, this approach became verbose and lacked modularity. Larger components’ functionality depended on the correct usage and ordering of many components, as well as strict configuration for data being passed on properly. While this design didn’t directly affect users, it made development more tedious and slowed engineers unnecessarily.

Out of these frustrations, ideas for a new component library took form. The API for this shared component library is called Anatomy.