---
title: "Bootstrapping a UI component library"
description: "Ryu is a component library created at a small startup to separate design concerns from feature development and business logic while product and conventions continue changing. It mirrors Figma's design system through shared colors, sizes, fonts, line heights, media breakpoints, z-indices, and components such as inputs, buttons, tooltips, menus, tables, and drawers. The article argues for a hard boundary between the library and main codebase, using a separate repository and an npm package with documented interfaces, hand-crafted changelogs, versioned releases, and extensive TypeScript. It emphasizes resisting narrowly tailored settings, postponing unresolved use cases, and prioritizing adoption over completeness, including preventing new code from using legacy components without good reason. Building on mature existing components while simplifying their interfaces, the library aims to improve maintainability, consistency, accessibility, theming, contribution, and coordination across applications."
---

# Bootstrapping a UI component library

[Ramp](https://yomu.fyi/company/ramp) · Nicolás Bevacqua · Nov 15, 2021

**Type:** Explainer

## Summary

Ryu is a component library created at a small startup to separate design concerns from feature development and business logic while product and conventions continue changing. It mirrors Figma's design system through shared colors, sizes, fonts, line heights, media breakpoints, z-indices, and components such as inputs, buttons, tooltips, menus, tables, and drawers. The article argues for a hard boundary between the library and main codebase, using a separate repository and an npm package with documented interfaces, hand-crafted changelogs, versioned releases, and extensive TypeScript. It emphasizes resisting narrowly tailored settings, postponing unresolved use cases, and prioritizing adoption over completeness, including preventing new code from using legacy components without good reason. Building on mature existing components while simplifying their interfaces, the library aims to improve maintainability, consistency, accessibility, theming, contribution, and coordination across applications.

## Context

A small startup needs to balance rapid product iteration with the value of standardized UI components and conventions. Existing components had been heavily iterated through feature work, but their interfaces had become less ideal, creating motivation for a separate library that could align Design, Product, and Engineering and prevent business logic from intermingling with design concerns.

## Approach / What changed

Create Ryu as an isolated component library that mirrors Figma, packages reusable design primitives and UI components for consumption, and protects its interfaces from narrowly tailored use cases. Treat the internal package like an open-source project with documentation, a hand-crafted changelog, versioned releases, and extensive TypeScript; introduce components incrementally and drive adoption across applications.

## Takeaways

- A separate repository prevents feature work from making incidental component changes, lets designers work without business logic, supports satellite applications, and forces clearer component interfaces.
- Bootstrapping should address existing components with clearly superior solutions while postponing use cases without good answers; a smaller, adopted component set is preferable to a larger unused one.
- New code should default to the library rather than legacy components, with adoption supported by documentation and team-wide goals to avoid a split between competing approaches.

**Tags:** [Architecture](https://yomu.fyi/topic/architecture), [TypeScript](https://yomu.fyi/topic/typescript)

- Source: [Ramp](https://builders.ramp.com/post/bootstrapping-a-ui-component-library)
- Source URL: https://builders.ramp.com/post/bootstrapping-a-ui-component-library
- Ingested by Yomu: 2026-09-01T01:33:30.599Z

[Read original post](https://builders.ramp.com/post/bootstrapping-a-ui-component-library)