Balance Logo
Reckon Design System


Balance is a React implementation of Reckon's design system. It provides components that are adaptive to interactions and screen sizes across devices, and includes full screen reader and keyboard navigation support for accessibility.

Getting Started

The Balance design system, and the apps that consume it are built with React and TypeScript. They will likely use GraphQL for managing data. Below are some learning resources to get you up and running.


If you’re new to React, start with the official React getting started documentation. As you read through the topics, follow along using the React Hello World CodePen example.

Here are some additional resources:


Developed and maintained by Microsoft, TypeScript is an open-source JavaScript syntactical superset language. Poised to potentially replace JavaScript, TypeScript may become the default language for React, a user interface framework maintained by Facebook and it is already the default language for Google's Angular.

Here are some additional resources:


If you're new to GraphQL, start with the official Introduction to GraphQL docs. You can also browse video content on the How to GraphQL website

Here are some additional resources:

Installing packages

You can install a Balance package using a package manager like npm or yarn.

npm install @reckon-web/core

Once you’ve installed packages you can import components available in Balance:

import { Core } from '@reckon-web/core';

Wrap your app with Core

In order to propagate Balance’s theme to the components, you need to wrap your React app in Balance’s Core component:

import { Core } from '@reckon-web/core';
const WrappedApp = (props) => (
<App {...props} />
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.