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);

BaseStyles

In order to set basic color, font-sizes, font-family, line-heights, style resets via normalize across your project, you will need to establish Rimble's base styles for your app by wrapping all of your components in <BaseStyles>:

import {BaseStyles, Box, Heading} from 'rimble-ui'
const App = (props) => {
  return (
    <BaseStyles>
      <Box m={4}>
        <Heading mb={2}>Hello, world!</Heading>
        <p>These elements will have Rimble's base styles applied to them.</p>
      </Box>
    </BaseStyles>
  )
}

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.