https://github.com/divriots/starter-origami

A react-native-paper based design system as a starter kit for Backlight
https://github.com/divriots/starter-origami

backlight design-system material-design react-native react-native-paper

Last synced: 3 months ago
JSON representation

A react-native-paper based design system as a starter kit for Backlight

• Host: GitHub
• URL: https://github.com/divriots/starter-origami
• Owner: divriots
• License: mit
• Created: 2021-03-12T14:12:51.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-02-24T19:32:14.000Z (almost 3 years ago)
• Last Synced: 2024-09-22T06:18:01.262Z (5 months ago)
• Topics: backlight, design-system, material-design, react-native, react-native-paper
• Language: TypeScript
• Homepage: https://backlight.dev/preview/VvdVbvAaydq8hYLh7RLq
• Size: 981 KB
• Stars: 3
• Watchers: 6
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# starter-origami

Origami is a [React-Native](https://reactnative.dev) Design System starter kit, using [Paper](https://reactnativepaper.com) component library: an open source components library based on [Material Design](https://material.io/design).

## Features

- Open-source

- Cross-platform: Mobile & Web

- 25+ components

- Interactive documentation

- Light & Dark mode

## Design Tokens

Origami takes the design tokens defined in [Paper](https://reactnativepaper.com).

- Colors

- Fonts

- Roundness

- Animation

And make them automatically documented and visually discoverable.

[Paper](https://reactnativepaper.com) has great semantical design tokens. It's simple but very efficient. The Paper team has done a great job here.

## Dark mode

Dark and Light themes are included out-of-the-box. You can experience it in the documentation itself.

## Components

Origami comes with 25+ components to get started: menu, dialog, buttons, checkbox, cards, everything to cover the basics, and more.

📦 [npm package](https://www.npmjs.org/@divriots/starter-origami) to try Origami unchanged.

## Getting started

- Duplicate this starter-kit on [Backlight.dev](https://backlight.dev) using the `Duplicate` button.

- Setup the design tokens to match your brand.

- Release the package to `npm`.

- Enjoy your Design System on your app(s) by importing from `npm`.

For more information, follow the [Quick Starting Guide](https://backlight.dev/docs/getting-started).