# Bootstrapping a UI component library

DevFeed: [Bootstrapping a UI component library](<https://devfeed.tech/articles/bootstrapping-a-ui-component-library-21872.md>)

Original publisher: [Read original article](<https://ponyfoo.com/articles/bootstrapping-a-ui-component-library>)

Author: nico@ponyfoo.com (Nicolás Bevacqua)

Published: 2021-12-16T14:38:04Z

Content type: article

Language: en

Sources: [Pony Foo](<https://devfeed.tech/sources/pony-foo.md>)

Topics: [Design system](<https://devfeed.tech/topics/design-system.md>), [Library](<https://devfeed.tech/topics/library.md>), [ui](<https://devfeed.tech/topics/ui.md>), [Development](<https://devfeed.tech/topics/development.md>), [Figma](<https://devfeed.tech/topics/figma.md>)

Tags: [architecture](<https://devfeed.tech/tags/architecture.md>), [article](<https://devfeed.tech/tags/article.md>), [component](<https://devfeed.tech/tags/component.md>), [design-system](<https://devfeed.tech/tags/design-system.md>), [developers](<https://devfeed.tech/tags/developers.md>), [development](<https://devfeed.tech/tags/development.md>), [figma](<https://devfeed.tech/tags/figma.md>), [ui](<https://devfeed.tech/tags/ui.md>)

## AI overview

The article explains how a startup built and adopted a UI component library called Ryu. It discusses the library's design tokens and core components, its close alignment with Figma, and how standardization separates design concerns from feature development and business logic.

## Source excerpt

Building -- and adopting -- a component library in the context of a vibrant business is no easy feat. Here are a few things we've learned. At a small startup, the timing is never quite right to start a component library. Extremely quick iteration is not usually associated with putting together a standardized set of components and conventions to use across your app, as your components and conventions change all the time in the frenzy of finding product-market fit! Nevertheless, component libraries can be tremendously valuable in separating design concerns from feature development and business logic, eventually leading to faster-than-ever iteration. In this article we'll explore what went into our component library -- we called it Ryu -- and what we left out, the tradeoffs we made along the way, and the vision for its future. Let's go! What does a component library consist of? In essence, our component library consists of colors, sizes, fonts, line heights, and even media breakpoints and z-indices. When building a component library you don't generally come up with these values, but rather you take them from what Design has already fleshed out -- probably in Figma. The role of our component library is to mirror Figma as closely as possible, so that developers need not worry about getting the design aspect of their feature work, and can instead focus on getting business logic and its edge cases right. In this sense, the component library can and should be the bridge that melds together Design, Product, and Engineering, effectively acting as the source of truth for our design system is. To that end, we need an understanding across the organization that, while Design has the last word on how the experience we offer looks and feels, Engineering requires it be standardized into a core set of functionality like inputs, buttons, tooltips, menus, tables, drawers, and anything else the designs require. This distinction essentially buckets design work into two categories: new core co