System-One - Design System

Customized theme-based style props for building design systems with React.

Features

• styled-components
• styled-systems
• react-styleguidist for component style guide

Installation

yarn add @system-one/react

or

npm install @system-one/react

Since this component is based off the concept of theme-based styling, you will need to install and wrap your root component with styled-components' ThemeProvider:

import { ThemeProvider } from 'styled-components';
import { theme } from '@system-one/react';

const App = props => (
  <ThemeProvider theme={theme}>
    {props.children}
  </ThemeProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

Available Scripts

In the project directory, you can run:

yarn guide

Runs Styleguidist server

Open http://localhost:4000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn guide:build

Builds HTML version of component library to production. Updates will be reflected in here.