Getting Started

Rendition is a library of React UI components that extends Grommet v2 and styled-system for our living design system at Balena.io.

Installation

yarn add rendition

Usage

Demo

React JSX

import React from 'react'
import ReactDOM from 'react-dom'
import { Button, Box, Provider } from 'rendition';

ReactDOM.render(
  <Provider>
    <Box my={3} mx={['auto', 15]}>
      <Button primary emphasized>Click me</Button>
    </Box>
  </Provider>,
  document.getElementById('root')
);

If <Box /> and its props look familiar, it should. It, as well as <Flex /> and some other techniques, are inspired by styled-system.