Rimble UI

React components for the Rimble Design System.
Clean, customisable building blocks for putting your interface together, including UI for Ethereum concepts.
View on GitHub

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.
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute

Rimble UI