Skip to content
This repository has been archived by the owner on Jan 25, 2023. It is now read-only.
/ indigo-react Public archive

React components that implement Tlon's design language

License

Notifications You must be signed in to change notification settings

tloncorp/indigo-react

Repository files navigation

[ARCHIVED] indigo-react

npm (scoped)

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.

Quick Start

  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

Basic Usage

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.

Development

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

Related

Library Github NPM
indigo-light https://www.github.com/urbit/indigo-light https://www.npmjs.com/package/@tlon/indigo-light
indigo-dark https://www.github.com/urbit/indigo-dark https://www.npmjs.com/package/@tlon/indigo-dark
indigo-react https://www.github.com/urbit/indigo-react https://www.npmjs.com/package/@tlon/indigo-react

License

MIT License © Tlon

About

React components that implement Tlon's design language

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published