Quickstart

This guide will get you all set up and ready to use the Skiff Design System.

Installation

Inside your project, install the skiff-ui npm package and run either of the commands below to add Skiff UI:

# Install Skiff UI with npm
npm install @skiff-org/skiff-ui --save

# Install Skiff UI with yarn
yarn add @skiff-org/skiff-ui

Using Skiff UI inside your app

Integrate Skiff components into your project easily, as shown below:

  import { Button, Type } from '@skiff-org/skiff-ui';

  <Button onClick={onClick} type={Type.SECONDARY}>
    Click me
  </Button>

Read the docs for the Button component

ThemeProvider

To display Skiff UI components correctly, add the ThemeProvider at the root of your app.

  import * as React from 'react';
  import { ThemeProvider } from '@skiff-org/skiff-ui';

  function App({ Component }) {
    return (
      <ThemeProvider>
        <Component />
      </ThemeProvider>
    );
  }