Teamshares Design System
Design system and component library for suite of apps
At Teamshares, I was a Staff Software Engineer and the SME for all things frontend, as well as the tech lead for the design system. The team wanted to avoid using a frontend framework such as React or Vue, preferring to stick with Ruby on Rails. But we still needed a component library in order to avoid having to build all our low-level UX components from scratch.
Since web components (AKA “HTML Custom Elements”) are framework-agnostic, I thought they could be a good fit. After an exhaustive search, we selected the open-source library Shoelace as our base, then forked and extended it to suit our use cases. We released our fork as a package on NPM for the app teams to consume. The library's docsite also served as our central source-of-truth for design system documentation.
The excellent UX of these web components allowed us to compose more complex organisms using the View Component library with Hotwire (Stimulus and Turbo), which in turn let us create rich interactions that felt modern and reactive.