Chakra UI

We use Chakra UI as the UI library.

Some useful pointers:

The theme.ts holds the shared fonts, colors, and sizes used across the apps. Chakra props will be theme-aware, so you should generally not refer directly to fonts, colors, and spacing sizes, but instead pull them from the theme.

It's often useful to create a delegating component that renders a chakra component and takes all of its props, plus some extra props for specific logic:

export interface MyComponentProps extends ChakraComponentProps {
  myProp: boolean;
}

export const MyComponent: FunctionComponent<MyComponentProps> => ({myProp, ...props}) => {
  return <ChakraComponent {...props}>
    <OtherComponent myProp={myProp} />
  </ChakraComponent>
}