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.
- Install the library
npm install --save @tlon/indigo-react- 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 formikIf 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- Install a theme
npm install --save @tlon/indigo-light @tlon/indigo-darkimport * 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