Getting Started

What is not a design system?#

A set of brand guidelines or a brand manual in isolation
A style guide
A component or pattern library in isolation

Actually, it’s all of this together and so much more!

The component-based model was a massive step in the right direction, but usually, there was no governance model of how to iterate. Which again lead to inconsistent UI or a need for constant design oversight.

What is a design system?#

A design system is a collection of reusable components and foundations, guided by clear standards, that can be assembled together to build any number of applications. It is not a one-time project, it's a product serving other products. It has its own process, roadmap, version control and team.

It includes things like:

Design Principles
Brand guidelines
Foundations
Components
Patterns
Resources
Best practices

Installation#

Inside your React project directory, install Rock UI by running the following:

npm i -S@rockr/rock-ui
# or
yarn add @rockr/rock-ui

npm i -S@rockr/rock-ui
# or
yarn add @rockr/rock-ui

For create-react-app installation instructions, check this CRA templates guide

Setup Provider#

For Rock UI to work correctly, you need to setup the ThemeProvider at the root of your application. You also add browser css reset styles by passing the resetCSS prop.

Go to the root of your application, and do this:

import * as React from "react"

// 1. import `ThemeProvider` component
import { ThemeProvider } from "@rockr/rock-ui"

function App() {
  // 2. Use at the root of your app and pass `resetCSS` prop
  return (
    <ThemeProvider resetCSS>
      <App />
    </ThemeProvider>
  )
}

import * as React from "react"
// 1. import `ThemeProvider` component
import { ThemeProvider } from "@rockr/rock-ui"
function App() {
  // 2. Use at the root of your app and pass `resetCSS` prop
  return (
    <ThemeProvider resetCSS>
      <App />
    </ThemeProvider>
  )
}

For Next.js, you need to set this up in pages/_app.js or pages/_app.tsx
For Gatsby, install the gatsby-plugin-chakra-ui. It does it automatically for you.
For Create React App, you need to set this up in index.js or index.tsx

Add Custom theme (Optional)#

If you need to customize the default chakra theme to match your design requirements, you can extend the theme from @rockr/rock-ui.

// 1. Import the theme and merge util
import { theme } from "@rockr/rock-ui"
import { merge } from "@chakra-ui/utils"

// 2. Extend the theme to include custom colors, fonts, etc.
const customTheme = merge(theme, {
  colors: {
    brand: {
      900: "#1a365d",
      800: "#153e75",
      700: "#2a69ac",
    },
  },
})

// 3. Pass the `theme` prop to the `ThemeProvider`
function App() {
  return (
    <ThemeProvider resetCSS theme={customTheme}>
      <App />
    </ThemeProvider>
  )
}

// 1. Import the theme and merge util
import { theme } from "@rockr/rock-ui"
import { merge } from "@chakra-ui/utils"
// 2. Extend the theme to include custom colors, fonts, etc.
const customTheme = merge(theme, {
  colors: {
    brand: {
      900: "#1a365d",
      800: "#153e75",
      700: "#2a69ac",
    },
  },
})
// 3. Pass the `theme` prop to the `ThemeProvider`
function App() {
  return (
    <ThemeProvider resetCSS theme={customTheme}>
      <App />
    </ThemeProvider>
  )
}

That's it, you're good to go!

Notes on TypeScript 🚨#

Please note that when adding Rock UI to a TypeScript project, a minimum TypeScript version of 3.8.0 is required.

If you're adding Rock UI to a create-react-app project, this means you'll need to manually upgrade typescript to ^3.8.0.

See the guide for our create-react-app templates if you'd like to generate a Chakra-enabled create-react-app project from scratch.

Contributing#

Please see our contribution guidelines to learn how you can contribute to this project.

Edit this page