@lightspeed/cirrus

Cirrus

Still a work in progress, don't use for now!

A package containing all available Cirrus components.

Installation

First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus

Or using npm:

npm i -S @lightspeed/cirrus

Usage

React Component

Import required style in your SCSS file:

@import '@lightspeed/cirrus/index.scss';

Add use any Cirrus components in your project:

import React from 'react';
import tokens from '@lightspeed/cirrus-tokens';
import { Button } from '@lightspeed/cirrus';

const styles = {
  padding: tokens.spacing.scale['spacing-2'],
};

const MyComponent = (props) =>
  <div style={styles}>
    <Button>My Button</Button>
  </div>;

export default MyComponent;

CSS Component

Import required style in your SCSS file:

@import '@lightspeed/cirrus/index.scss';

Add classes to your HTML elements for available Components:

<div class="cr-p-2">
  <button type="button" class="cr-button">My Button</button>
</div>