Skiff UI – Design System

Skiff UI is an open-source React component library based on a collection of reusable interface elements used in Skiff. It offers a wide range of customizable components for web apps, empowering you to create beautiful and user-friendly interfaces.

Documentation

Skiff UI Documentation

Installation

Inside your project, 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>

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>
    );
  }