Indigo React is a component library for implementing the Indigo Design System. It's built with React, styled-components and styled-system. It also uses Formik and Reach-UI.

1. Install the library

npm install --save @tlon/indigo-react

1. Install peer dependencies

npm install --save @tlon/indigo-light styled-components styled-system react react-dom @reach/disclosure @reach/menu-button @reach/tabs markdown-to-jsx formik

If you are using Typescript, install the type definitions for several of these libraries.

npm install --save @types/styled-components @types/styled-system @types/styled-system__css

1. Install a theme

npm install --save @tlon/indigo-light @tlon/indigo-dark

import * as React from "react";
import { ThemeProvider } from "styled-system";
import { Text, Reset } from "@tlon/indigo-react";
import light from "@tlon/indigo-light";

class App extends React.Component {
  render() {
    return (
      <ThemeProvider theme={light}>
        <Reset />
        <Text fontSize="2">Indigo!</Text>
      </ThemeProvider>
    );
  }
}

In the above, we are wrapping our application in styled-component's ThemeProvider and passing in our theme from @tlon/indigo-light. In practice, you should rarely need to import the theme.

The <Text /> component accepts a fontSize prop, which is one of many style props provided by styled-system. Using VSCode is the best way to see the list of props each component can accept.

You can also check out the styled-system docs for a breakdown of props.

Many of these props have corrosponding styling shortcuts, drawn from the provided theme, like @tlon/indigo-light. These shortcuts are also provided by styled-system. To see how props map to values in our theme, check out styled-system's mapping.

Take a look at the theme to get a sense for which style values can be accessed from styled props.

See DEVELOPMENT.md for example cases of component patterns used to create Indigo.

MIT License © Tlon