cabana-react

Cabana Design System built in React!

Usage no npm install needed!

<script type="module">
  import cabanaReact from 'https://cdn.skypack.dev/cabana-react';
</script>

README

A design system built especially for both Sketch and React.
This is an Alpha build of the Cabana Design System in React

Join the community on Spectrum

Docs

See the documentation for more information about using cabana-react!

Example: Your first Cabana component

import { ThemeProvider } from 'styled-components';
import { Button } from 'cabana-react';
import myTheme from './theme.js';

const App = () => (
    <ThemeProvider theme={myTheme}>
        <Button bg="primary" color="white">Hi!</Button>
    </ThemeProvider>
);

This is what you'll see in your browser:

Theme File Starter

Use this theme file as a starting point to configure your Cabana config.

The Cabana Sketch Library

Cabana-React is the React counterpart of the Cabana Sketch Library. Check out the Cabana Design System website for a more in-depth rundown of how the design system works, and for access to the library.

Contributing

If you would like to contribute to cabana-react please see our contributing and community guidelines, they will help you get set up locally and explain the whole process. (Coming Soon)

License

Licensed under the MIT License, Copyright © 2018-present Marc Andrew and Lucas Arundell.