We Developed A Styled Component Library

AJ Webb
I’ve Heard It Both Ways
2 min readOct 1, 2018

--

Photo by Alex Hiller on Unsplash

My team at work has spent the past year developing a styled component library for our React web applications. We decided to use styled-components to aid us in keeping each component encapsulated, we ran into a few snags here and there but found it mostly worked for us. We started off writing a few basic components, buttons, a few form fields and then progressed to drag and drop upload sections, headers and footers, a date picker and an icon component accompanied by a suite of SVG icons.

As time has progressed and as the library has grown, more hands have been needed to keep it updated, to add the necessary components and continue to scale it to our needs. The many hands have been appreciated but they have also come with a price. The library has grown to more than 70 components, some of which are hairy monsters, others are petite and may not even be completely necessary. All in all it’s been great to see it grow from the initial idea into what it is today. It’s rough around the edges and although we’ve spent a great amount of time in polishing it, it seems that it perpetually needs more fine tuning.

Today I flew to Helena, bringing the Core Frontend team together and we are going to kick off on a new adventure along these same lines. When we began the last effort we didn’t have designs, we didn’t know how to build what we were building, we only knew that it was something that we wanted and something that would allow us to be nimble in our development process.

Taking what we’ve learned over the past year from this project we are going to start fresh. We have what we need to build out our components and I think that we have found a rhythm that will allow us to iterate on the next version faster than we did in the past and with clean results. We are planning to build the next iteration with accessibility as a first class citizen, and find ways to lower our footprint inside of our applications.

I’m looking forward to building this out, I plan to write about it a bit as we find answers to problems that we face, or clever solutions, or even just have some fun in what we are building. I’m looking forward to sharing this with you.

If you have built something similar, I’d love to hear about how it went or is going, I’d love to know what you built it in and what drove your decisions.

--

--

#InstagramHusband of @niseywebb. Frontend Manager for @sofi. Co-creator of my daughters Presley & Marley and son Cache