skiff-ui is open-source

We’ve open-sourced and MIT licensed skiff-ui, our component library for building our privacy-first product suite. See example code, a code sandbox, and more in this blog.

Skiff UI open-source repository and documentation

Skiff UI, our open-source, MIT-licensed React component library that we use for all Skiff products - is now released on NPM! Skiff UI covers our entire design system integrated into Mail, Pages, Drive, and Calendar.We created skiff-ui because we need a powerful, customizable, and simple library for our privacy-first application. Our component library makes building high-performance, visually appealing web applications using React easier than ever.

Why use Skiff UI?

Skiff UI was built for beautiful, user-friendly, and performant user interfaces. This includes components for banners, buttons, dropdowns, avatars, and text. More complex components include facepiles (collections of avatars), progress indicators, and button groups.

Installation and usage

To get started, run:npm install @skiff-org/skiff-uior, using yarn,yarn add @skiff-org/skiff-uiThen, you can import components in your React app. Note that Skiff UI is written in TypeScript, meaning you will get full type definitions out of the box:

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

<Button onClick={onClick} size={Size.LARGE}>
  Large
</Button>

<Button onClick={onClick}>
  Medium
</Button>

<Button onClick={onClick} size={Size.SMALL}>
  Small
</Button>

import { Button, Size } from '@skiff-org/skiff-ui';
<Button onClick={onClick} size={Size.LARGE}>
Large
</Button>
<Button onClick={onClick}>
Medium
</Button>
<Button onClick={onClick} size={Size.SMALL}>
Small
</Button>

Here’s a link to the NPM package.

Community-driven, MIT-licensed, and fully open-source

Open sourcing is a huge part of what we do at Skiff. Skiff Mail has been open-source since it launched, and we’ve recently MIT licensed our cryptography library Skiff Crypto. Skiff Crypto powers all the cryptography inside Skiff’s end-to-end encrypted workspace, including generating keypairs, deriving keys, and performing symmetric or public-key authenticated encryption.

Documentation

We’ve published a thorough documentation site here with code samples, a getting started guide, and examples of every component in Skiff UI.Have any questions? Post on our subreddit, join the open-source channel in our Discord, or reach out to us on Twitter. If you’re looking to explore other open-source libraries, check out Skiff’s apps, Skiff Crypto, or our Windows native app.You can also write to us at or open a GitHub pull request!