Get Started

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

Get Started