React components for the Rimble Design System.

Clean, customisable building blocks for putting your interface together, including UI for Ethereum concepts.

Installation

Install rimble-ui and styled-components in your project with npm:

npm install --save rimble-ui styled-components

or with yarn:

yarn add rimble-ui styled-components

Usage

Play with an example on CodeSandbox

The code below will render a button with default Rimble styles.

import React from "react";
import ReactDOM from "react-dom";
import { Box, Button, Heading, Text } from "rimble-ui";
function App() {
  return (
    <div>
      <Box>
        <Heading>Your Heading</Heading>
        <Text>Some of text of yours here</Text>
        <Button> click me! </Button>
      </Box>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Theming

Components are styled using Rimble's theme by default, but you can provide your own theme by using styled-component's <ThemeProvider>. If you'd like to fully replace the Rimble theme with your custom theme, pass your theme to the <ThemeProvider> in the root of your application like so:

import {ThemeProvider} from 'styled-components'
const theme = { ... }
const App = (props) => {
  return (
    <div>
      <ThemeProvider theme={theme}>
        <div>your app here</div>
      </ThemeProvider>
    </div>
  )
}

If you'd like to merge the Rimble theme with your theme, you can do so importing the Rimble theme and merging using Object.assign:

import {ThemeProvider} from 'styled-components'
import {theme} from 'rimble-ui'
const customTheme = { ... }
const App = (props) => {
  return (
    <div>
      <ThemeProvider theme={Object.assign({}, theme, customTheme)}> // matching keys in customTheme will override keys in the Rimble theme
        <div>your app here</div>
      </ThemeProvider>
    </div>
  )
}

*Note that using Object.assign will only create a shallow merge. This means that if both themes have a color object, the entire color object will be replaced with the new color object, instead of only replacing duplicate values from the original theme's color object.