Super ops design system

Using the React components

While we do offer a CSS-only version, we strongly recommend using the React versions of our components. It’s the version that we use at Shopify. It allows for rich, complex components like Tabs and Popovers, and will not have as many breaking changes as the CSS-only version.

Installation

Run the following command using npm:

npm install @superops/ui-design-system --save

Usage

1. Import the CSS directly into your project if your asset packager supports it:

import '@superops/ui-design-system/build/esm/styles.css';

2. Include the translations and any of the provided components in your project:

import enTranslations from '@superops/ui-design-system/locales/en.json';
import {AppProvider, Page, Card, Button} from '@superops/ui-design-system';

3. Tell React to render the element in the DOM:

ReactDOM.render(
  <AppProvider i18n={enTranslations}>
    <Page title="Example app">
      <Card sectioned>
        <Button onClick={() => alert('Button clicked!')}>Example button</Button>
      </Card>
    </Page>
  </AppProvider>,
  document.querySelector('#app'),
);