This React component library provides lightweight, high-performance primitive building blocks for constructing themeable design system components. The source code can be found on github and published to the @intouchg NPM scope.

This library uses styled-components and styled-system under the hood. You should be familiar with the styled-components API to use this library to the fullest extent. Conceptually, the components in this library can be split into two categories:

  • Layout components
  • Stateful components
  • Layout components render basic HTML content like a div, span, or button. These components are responsible for styling the UI. Most of the components in this library are layout components, and all layout components share common and advanced APIs for styling.

    Live Demo

    Stateful components pass down state changes to their child layout components. It's up to the layout component to rerender based on that new state.

    Here's an example using the Activatables stateful component. Notice how the Button layout component uses the active value passed down by the Activatable child component to render dynamic styles.

    Live Demo

    Next you'll see how to get started with the component library and build a basic UI.