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


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


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 (
        <Component />