Skip to content
React component library for KaiOS apps
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates Jul 31, 2019
component_screenshots
icons
public
src
.gitignore
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE Updating license Jul 30, 2019
README.md
index.html Adding readme with screenshots Jul 10, 2019
manifest.webapp
package-lock.json Project rename Jul 9, 2019
package.json

README.md

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

TBD

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

You can’t perform that action at this time.