DESIGN SYSTEM / COMPONENTS

Yfi-Components

A typed React component library extracted from the YieldFi V3 rebuild, now shared across products.

Role

Author & Maintainer

Team

Solo, adopted by 3 product teams

Timeline

Ongoing since V3 rebuild

Live

Internal package

Overview

Yfi-Components is the component library extracted while rebuilding the curator dashboard — tables, forms, and chart primitives built once and reused across YieldFi’s products instead of re-solved per screen.

Problem

Every new YieldFi surface was rebuilding the same tables, modals, and form patterns, each with slightly different behavior and bugs.

Architecture & Approach

Components are headless-first with a thin styling layer on top, strict prop contracts enforced via TypeScript, and documentation driven through Storybook. Visual regression checks run before any release, since these components sit under production surfaces other teams don’t control.

Metrics

40+

Components shipped

Product surfaces adopted it

~50%

Cut in new feature scaffolding time

Learnings

A component library only earns adoption if it’s easier to use than copy-pasting the last screen. Documentation is a feature, not an afterthought — it’s what got other teams to actually switch.

Next Project

Decoder Labs →