Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 4 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 (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-11-06T05:29:11.000Z (over 1 year ago)
- Last Synced: 2025-02-08T06:08:55.556Z (11 days ago)
- Topics: components, design-system, react, react-components, typescript
- Language: TypeScript
- Homepage: https://skiff.com/ui
- Size: 2.41 MB
- Stars: 401
- Watchers: 7
- Forks: 120
- 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

# 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.
[](https://github.com/skiff-org/skiff-ui/blob/main/LICENSE)
[](https://www.npmjs.com/package/@skiff-org/skiff-ui)
[](https://isitmaintained.com/project/skiff-org/skiff-ui 'Average time to resolve an issue')
[](https://opencollective.com/skiff)
[](code_of_conduct.md)
[](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 appIntegrate Skiff components into your project easily, as shown below:
```typescript
import { Button, Type } from '@skiff-org/skiff-ui';
Click me
```[](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/)