https://github.com/catchrelease/arbor

Reacklebox - Catch&Release's Design System
https://github.com/catchrelease/arbor

arbor design-system react

Last synced: about 1 year ago
JSON representation

Reacklebox - Catch&Release's Design System

• Host: GitHub
• URL: https://github.com/catchrelease/arbor
• Owner: CatchRelease
• Created: 2018-09-28T18:47:58.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-09T15:02:14.000Z (over 3 years ago)
• Last Synced: 2025-05-18T11:07:13.988Z (about 1 year ago)
• Topics: arbor, design-system, react
• Language: JavaScript
• Homepage: https://catchrelease.github.io/arbor/
• Size: 6.38 MB
• Stars: 2
• Watchers: 8
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
[![Build

Status](https://travis-ci.com/CatchRelease/arbor.svg?branch=master)](https://travis-ci.com/CatchRelease/arbor)

[![code style:

prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

# Arbor

Arbor is a set of React UI components for [Catch&Release's](https://www.catchandrelease.com/) design system.

It is built using [emotion](https://emotion.sh/) and [styled-system](https://github.com/jxnblk/styled-system).

## Getting Started

### Installation

Install the [Arbor package](https://www.npmjs.com/package/@catchandrelease/arbor) and its dependencies.

```

npm install --save @catchandrelease/arbor

```

or

```

yarn add @catchandrelease/arbor

```

### Usage

```jsx

import React from 'react';

import { render } from 'react-dom';

import { Heading, theme } from '@catchandrelease/arbor';

import { ThemeProvider } from '@emotion/react';

function App() {

  return (

    

      Hello World

    

  );

}

render(, document.getElementById('app'));

```

The application must be wrapped in an emotion `ThemeProvider` in order to work.

You can import the base theme from arbor, or customize it and pass in your own.

See [emotion-theming](https://github.com/emotion-js/emotion/blob/master/docs/theming.mdx).

## License

The package is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).