Redback UI

Design system and UI component library for React, designed for Redback's data-driven applications.

• Live Storybook and documentation
• Release notes

Installation

To install Redback UI in a React project, run:

npm install @redbackops/redback-ui

To update Redback UI to the latest version in an existing project, run one of the following:

npm update @redbackops/redback-ui

npm install @redbackops/redback-ui@latest

Getting started

To use Redback UI, wrap your application (or the part of it that you want to style with Redback UI) in the RedbackUiThemeProvider component.

The below example includes selecting the "Redback Smartbike" bundled theme. You can see all of the available themes in the Storybook.

import { RedbackUiThemeProvider } from '@redbackops/redback-ui';
import themes from '@redbackops/redback-ui/themes';

<RedbackUiThemeProvider theme={themes.smartbike}>
    { /* Your app here */ }
</RedbackUiThemeProvider>

If you are using Redback UI outside of Redback Operations, you can pass in your own custom theme object. See the structure of the default theme for guidance on the design tokens to include.

Contributing

Redback UI is primarily worked on by students in Deakin University's School of IT capstone program, but we welcome external contributions.

To find out more about how Redback UI is built and how to contribute, please see the Redback Operations developer documentation, in particular:

• Creating a new component
• Using Styled Components
• Automated tests
• Submitting code.