Noodle UI screenshot

Noodle UI

A Figma design system and React component library for building beautiful scalable UI. We used Noodle UI to build products and custom apps for five years. It was incrementally improved and added to over the years. We didn't build the kitchen sink, but instead added features and components we were already using. Noodle UI was also a five year long learning experience in what works and what doesn't when building reusable UI components.

Some features and principles:

  • Design and Engineering speak the same language. Components are named the same in Figma and in React, and no hidden engineering abstractions that aren't meaningful to design.
  • AA Text contrast accessibility built in
  • A flexbox-based panel layout system
  • A simple, rational separation of concerns between content and layout (the key to truly modular code)
Noodle.ai
  • Figma
  • React
  • D3
  • Styled Components