{"id":20249646,"url":"https://github.com/adrianmachado/kaiui","last_synced_at":"2025-04-09T20:13:48.680Z","repository":{"id":36401795,"uuid":"193618834","full_name":"AdrianMachado/KaiUI","owner":"AdrianMachado","description":"React component library for KaiOS apps","archived":false,"fork":false,"pushed_at":"2023-07-20T21:46:30.000Z","size":5100,"stargazers_count":192,"open_issues_count":30,"forks_count":38,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-09T20:13:43.404Z","etag":null,"topics":["kaios","mobile-development","react","react-component-library","ui-components","ui-framework"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AdrianMachado.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-25T02:25:16.000Z","updated_at":"2025-03-28T08:20:18.000Z","dependencies_parsed_at":"2023-02-15T08:16:38.885Z","dependency_job_id":null,"html_url":"https://github.com/AdrianMachado/KaiUI","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdrianMachado%2FKaiUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdrianMachado%2FKaiUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdrianMachado%2FKaiUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdrianMachado%2FKaiUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AdrianMachado","download_url":"https://codeload.github.com/AdrianMachado/KaiUI/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103872,"owners_count":21048245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["kaios","mobile-development","react","react-component-library","ui-components","ui-framework"],"created_at":"2024-11-14T09:54:50.835Z","updated_at":"2025-04-09T20:13:48.653Z","avatar_url":"https://github.com/AdrianMachado.png","language":"TypeScript","readme":"# KaiUI\n\nUI Component library for building KaiOS apps. All components and views are navigable using a phone's d-pad and softkeys.\n\n**CAUTION:** The style specs of some components has been updated recently, which has yet to be reflected in this implementation. Please refer to the [KaiOS blog article](https://medium.com/design-at-kai/design-exploration-for-ui-components-in-kaios-smart-feature-phones-85f211603ed0) on Medium.\n\n## Building and Usage\n\nKaiUI has not yet been deployed to NPM. To build and play with the demo app run:\n\n```\nnpm install\nnpm start\n```\n\nFor use in the KaiOS emulator you must build\n\n```\nnpm build\n```\n\nAnd update the hashes of the JS and CSS files in [index.html](https://github.com/AdrianMachado/KaiUI/blob/master/index.html) manually before running.\n\n## Components\n\nAll specs can be found [here](https://developer.kaiostech.com/docs/design-guide/ui-component)\n\n| Name                | Preview                                                                                  | Spec                                                                           |\n| ------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |\n| Header              | ![alt text](./component_screenshots/kaiui-header.png 'Header')                           | ![alt text](./component_screenshots/kaiui-header-spec.png 'Header spec')       |\n| Tabs                | ![alt text](./component_screenshots/kaiui-tabs.gif 'Tabs')                               | ![alt text](./component_screenshots/kaiui-tabs-spec.png 'Header spec')         |\n| SoftKey             | ![alt text](./component_screenshots/kaiui-softkey.png 'Tabs')                            | ![alt text](./component_screenshots/kaiui-softkey-spec.png 'Header spec')      |\n| Text List Item      | ![alt text](./component_screenshots/kaiui-text-list-item.png 'Text List Item')           | ![alt text](./component_screenshots/kaiui-list-item-spec.png 'List item spec') |\n| Body Text List Item | ![alt text](./component_screenshots/kaiui-body-text-list-item.png 'Body Text List Item') |                                                                                |\n| Icon List Item      | ![alt text](./component_screenshots/kaiui-icon-list-item.png 'Icon List Item')           |                                                                                |\n| Arrow List Item     | ![alt text](./component_screenshots/kaiui-arrow-list-item.png 'Arrow Text List Item')    |                                                                                |\n| Separator           | ![alt text](./component_screenshots/kaiui-separator.png 'Separator')                     | ![alt text](./component_screenshots/kaiui-separator-spec.png 'Separator spec') |\n| Checkbox            | ![alt text](./component_screenshots/kaiui-cb.png 'Checkbox')                             | ![alt text](./component_screenshots/kaiui-cb-spec.png 'Checkbox spec')         |\n| Radio Button        | ![alt text](./component_screenshots/kaiui-rb.png 'Radio button')                         |                                                                                |\n| Progress-Download   | ![alt text](./component_screenshots/kaiui-progress-download.png 'Download')              | ![alt text](./component_screenshots/kaiui-progress-spec.png 'Progress spec')   |\n| Progress-Buffering  | ![alt text](./component_screenshots/kaiui-progress-buffer.gif 'Buffering')               |                                                                                |\n| Slider              | ![alt text](./component_screenshots/kaiui-slider.gif 'Slider')                           | ![alt text](./component_screenshots/kaiui-slider-spec.png 'Slider spec')       |\n| Button              | ![alt text](./component_screenshots/kaiui-button.png 'Button')                           | ![alt text](./component_screenshots/kaiui-button-spec.png 'Button spec')       |\n| Input               | ![alt text](./component_screenshots/kaiui-input.png 'Input')                             | ![alt text](./component_screenshots/kaiui-input-spec.png 'Input')              |\n\n\n## Views\n\nNavigation details can be found [here](https://developer.kaiostech.com/docs/design-guide/basic-navigation)\n\n| Name     | Preview                                                              |\n| -------- | -------------------------------------------------------------------- |\n| TabView  | ![alt text](./component_screenshots/kaiui-tab-view.gif 'Tab view')   |\n| ListView | ![alt text](./component_screenshots/kaiui-list-view.gif 'List view') |\n\n## Popups\n\n| Name                | Preview                                                                                  | Spec                                                                           |\n| ------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |\n| Toast               | ![alt text](./component_screenshots/kaiui-toast.gif 'Toast')                             | ![alt text](./component_screenshots/kaiui-toast-spec.png 'Toast')              |\n\n## Notifications\n\nNotifications are provided by KaiOS itself when you use the standard [Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/notification) while your app is running, or the [Push API](https://developer.mozilla.org/en-US/docs/Web/API/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.\n\n```\n\"desktop-notification\": {}\n```\n\nOnce this is added, you can send the user notifications without needing to request permission.\n\n## Themes\n\nStandardized colors and font stylings are found in the [themes directory](https://github.com/AdrianMachado/KaiUI/tree/master/src/theme). These follow the KaiOS [typography standard](https://developer.kaiostech.com/docs/design-guide/typography).\nCurrently you can customize the focus color of components through props, font color is a WIP.\n\n## Icons\n\nKaiUI uses custom icons provided on the KaiOS developer portal. These are included in the kai-icons font and incorporated as [SASS/CSS classes](https://github.com/AdrianMachado/KaiUI/tree/master/src/kai-font).\n\n# Contributing\n\nThere's much work to be done on building out more UI components, writing tests, and integrating typing (probably using flow).\nPlease look at currently open issues and our [Contributing Guide](https://github.com/AdrianMachado/KaiUI/blob/master/CONTRIBUTING.md)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrianmachado%2Fkaiui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadrianmachado%2Fkaiui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrianmachado%2Fkaiui/lists"}