https://github.com/skiff-org/skiff-ui

React components for the Skiff UI Design System
https://github.com/skiff-org/skiff-ui

components design-system react react-components typescript

Last synced: 14 days ago
JSON representation

React components for the Skiff UI Design System

• Host: GitHub
• URL: https://github.com/skiff-org/skiff-ui
• Owner: skiff-org
• License: mit
• Created: 2021-04-06T18:21:02.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2023-11-06T05:29:11.000Z (over 1 year ago)
• Last Synced: 2025-04-04T12:05:23.765Z (23 days ago)
• Topics: components, design-system, react, react-components, typescript
• Language: TypeScript
• Homepage: https://skiff.com/ui
• Size: 2.41 MB
• Stars: 404
• Watchers: 6
• Forks: 122
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Audit: audit-ci.json

Awesome Lists containing this project

• awesome-ccamel - skiff-org/skiff-ui - React components for the Skiff UI Design System (TypeScript)

README

        

![Logo](https://raw.githubusercontent.com/skiff-org/skiff-org.github.io/main/assets/updates/skiff-ui-og.png)

# 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.

[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/skiff-org/skiff-ui/blob/main/LICENSE)

[![npm latest package](https://img.shields.io/npm/v/@skiff-org/skiff-ui/latest.svg)](https://www.npmjs.com/package/@skiff-org/skiff-ui)

[![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/skiff-org/skiff-ui.svg)](https://isitmaintained.com/project/skiff-org/skiff-ui 'Average time to resolve an issue')

[![Open Collective backers and sponsors](https://img.shields.io/opencollective/all/skiff)](https://opencollective.com/skiff)

[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](code_of_conduct.md)

[![Follow on Twitter](https://img.shields.io/twitter/follow/Skiff_hq.svg?label=follow+Skiff)](https://twitter.com/skiffprivacy)

## Documentation

[Skiff UI Documentation](https://skiff.com/ui)

## Installation

Inside your project, run either of the commands below to add Skiff UI:

```bash

  # Install Skiff UI with npm

  npm install @skiff-org/skiff-ui --save

```

```bash

  # 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:

```typescript

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

  

    Click me

  

```

[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/button-example-rfp4jn)

## ThemeProvider

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

```typescript

  import * as React from 'react';

  import { ThemeProvider } from '@skiff-org/skiff-ui';

  function App({ Component }) {

    return (

      

        

      

    );

  }

```

## Feedback

If you have any feedback, please reach out to us at [email protected]

## Contributing

Contributions are always welcome! See [contributing.md](/CONTRIBUTING.md) for ways to get started.

Please adhere to this project's [code_of_conduct.md](/CODE_OF_CONDUCT.md).

## Related

Our open source repositories and libraries

[Skiff Mail](https://github.com/skiff-org/skiff-mail)

[Skiff Windows App](https://github.com/skiff-org/skiff-windows-app)

[AEAD Library](https://www.npmjs.com/package/@skiff-org/typed-envelopes)

[Prosemirror Tables](https://github.com/skiff-org/prosemirror-tables)

## License

[MIT](https://choosealicense.com/licenses/mit/)