Storybook

Welcome! 🌈

Rainbow UI is ACG's design system with the ambitious goal of making handover b/w tech & design seamless. Rainbow handles Theming for you, not just for colours, but also spacing, typography & more!

The idea is to give designers & devs the same toolbox that is constraint-based so both parties can focus on what matters most: delivering a world-class user experience; and not nit-picking the margin sizes required for a container etc.

Getting Started 🏃

CRA or NextJS

In order to start using Rainbow UI quickly in your project, we recommend you check out one of our examples below:

Custom Build w/ Babel Plugin Overrides

Alternatively, if you're running your own Webpack build (mighty you! 💪), or you require to override Babel's plugins yourself (for testing purposes, Storybook, etc..), then fire up a .babelrc.js at your root directory like so:

const { getBabelPlugins } = require('@a-cloud-guru/rainbow-ui');

const presets = ['@babel/preset-env', '@babel/react'];
const plugins = [
  ...getBabelPlugins(),
];

module.exports = { presets, plugins };

This will allow you to import AntD stuff directly FROM Rainbow (please see passthru for more details).

Usage

Once you've setup Rainbow UI, you can use like so...

// MyComponent.jsx
/** @jsx jsx */
import { jsx, Styled } from 'theme-ui'
import {
  Box, // Rainbow Component
  Button, // Rainbow Component
  Checkbox // AntD Component
} from '@a-cloud-guru/rainbow-ui'

export const MyComponent = () => (
  <Box padding='s2'>
    <Styled.h2>My Styled Heading 2</Styled.h2>
    <Button sx={{ bg: 'danger' color: 'white' }}>Click Me!</Button>
    <Checkbox />
  </Box>
  )

As you can see above, we've imported the Rainbow UI Box & Button AND also AntD's own Checkbox. They all work together nicely in harmony 😎 If you're wondering how we just set bg to danger & it knows the value, see Styling

No Preview

Welcome! 🌈

Getting Started 🏃

CRA or NextJS

Custom Build w/ Babel Plugin Overrides

Usage