Need help with KaiUI?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

AdrianMachado
135 Stars 30 Forks MIT License 72 Commits 14 Opened issues

Description

React component library for KaiOS apps

Services available

!
?

Need anything else?

Contributors list

# 295,671
Shell
Bash
powerli...
HTML
27 commits
# 351,891
HTML
TypeScr...
mobile-...
React
20 commits
# 523,898
Shell
TypeScr...
HTML
mobile-...
3 commits
# 496,728
Shell
wavelet...
signal-...
TypeScr...
2 commits
# 57,242
hyperap...
elm
Less
Firefox
1 commit

KaiUI

UI Component library for building KaiOS apps. All components and views are navigable using a phone's d-pad and softkeys.

Building and Usage

KaiUI has not yet been deployed to NPM. To build and play with the demo app run:

npm install
npm start

For use in the KaiOS emulator you must build

npm build

And update the hashes of the JS and CSS files in index.html manually before running.

Components

All specs can be found here

| Name | Preview | Spec | | ------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | Header | alt text | alt text | | Tabs | alt text | alt text | | SoftKey | alt text | alt text | | Text List Item | alt text | alt text | | Body Text List Item | alt text | | | Icon List Item | alt text | | | Arrow List Item | alt text | | | Separator | alt text | alt text | | Checkbox | alt text | alt text | | Radio Button | alt text | | | Progress-Download | alt text | alt text | | Progress-Buffering | alt text | | | Slider | alt text | alt text | | Button | alt text | alt text | | Input | alt text | alt text |

Views

Navigation details can be found here

| Name | Preview | | -------- | -------------------------------------------------------------------- | | TabView | alt text | | ListView | alt text |

Popups

| Name | Preview | Spec | | ------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | Toast | alt text | alt text |

Notifications

Notifications are provided by KaiOS itself when you use the standard Notifications API while your app is running, or the Push API if you want push notifications. Installed apps need to request permission for this through the manifest file. Just add this line to the permissions section of your

manifest.webapp
file.
"desktop-notification": {}

Once this is added, you can send the user notifications without needing to request permission.

Themes

Standardized colors and font stylings are found in the themes directory. These follow the KaiOS typography standard. Currently you can customize the focus color of components through props, font color is a WIP.

Icons

KaiUI uses custom icons provided on the KaiOS developer portal. These are included in the kai-icons font and incorporated as SASS/CSS classes.

Contributing

There's much work to be done on building out more UI components, writing tests, and integrating typing (probably using flow). Please look at currently open issues and our Contributing Guide

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.