{"id":13750130,"url":"https://josephuspaye.github.io/Keen-UI/","last_synced_at":"2025-05-09T15:31:36.990Z","repository":{"id":40414453,"uuid":"54435333","full_name":"JosephusPaye/Keen-UI","owner":"JosephusPaye","description":"A lightweight Vue.js UI library with a simple API, inspired by Google's Material Design.","archived":false,"fork":false,"pushed_at":"2023-08-16T07:41:38.000Z","size":10474,"stargazers_count":4091,"open_issues_count":65,"forks_count":434,"subscribers_count":90,"default_branch":"next","last_synced_at":"2025-05-04T21:46:19.885Z","etag":null,"topics":["components","javascript","material-design","ui","vue","vue3"],"latest_commit_sha":null,"homepage":"https://josephuspaye.github.io/Keen-UI/","language":"JavaScript","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/JosephusPaye.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-03-22T01:23:20.000Z","updated_at":"2025-04-29T14:28:27.000Z","dependencies_parsed_at":"2024-01-02T23:35:51.094Z","dependency_job_id":"8e41b9a7-2999-40f0-bec7-3ec0f3771c69","html_url":"https://github.com/JosephusPaye/Keen-UI","commit_stats":{"total_commits":566,"total_committers":33,"mean_commits":"17.151515151515152","dds":"0.10954063604240283","last_synced_commit":"3348200acb2318b5e8db545d4babaafa213fb96f"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosephusPaye%2FKeen-UI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosephusPaye%2FKeen-UI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosephusPaye%2FKeen-UI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosephusPaye%2FKeen-UI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JosephusPaye","download_url":"https://codeload.github.com/JosephusPaye/Keen-UI/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253275605,"owners_count":21882334,"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":["components","javascript","material-design","ui","vue","vue3"],"created_at":"2024-08-03T08:00:22.224Z","updated_at":"2025-05-09T15:31:36.379Z","avatar_url":"https://github.com/JosephusPaye.png","language":"JavaScript","funding_links":[],"categories":["VueJS","Admin Template"],"sub_categories":["Related community list","Vue"],"readme":"# Keen UI\n\nKeen UI is a [Vue.js](http://vuejs.org) UI library with a simple API, inspired by Google's [Material Design](https://material.io/guidelines).\n\n\u003csub\u003e_Keen UI is **not** a CSS framework. Therefore, it doesn't include styles for a grid system, typography, etc. Instead, the focus is on interactive components that require Javascript. You should be able to use Keen UI with any page layout, structure, or CSS framework._\u003c/sub\u003e\n\n## Documentation and demo\n\n[http://josephuspaye.github.io/Keen-UI/](http://josephuspaye.github.io/Keen-UI/)\n\n## Requirements\n\n- [Vue.js](http://vuejs.org/) (v3)\n  - use [keen-ui@0.8.9](http://josephuspaye.github.io/Keen-UI/0.8.9/) for Vue 1.x support.\n  - use [keen-ui@1.x](http://josephuspaye.github.io/Keen-UI/1.4.0/) for Vue 2.x support.\n\nOptional\n\n- [Material Icons font](http://google.github.io/material-design-icons/#icon-font-for-the-web)\n\n## Browser support\n\nKeen UI supports [browsers with native ES2015 support](https://caniuse.com/es6) ([same as Vue 3](https://vuejs.org/about/faq.html#what-browsers-does-vue-support)).\n\n## Installation\n\n```bash\nnpm install keen-ui --save\n```\n\n## Usage\n\n##### CSS Reset\n\nBefore using Keen UI, ensure that the following CSS resets are applied to your site.\n\n```css\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-size: 100%;\n}\n```\n\nYou can add the reset to your stylesheet (before other styles). If you are using a CSS framework, check to see if the framework already includes a reset (most CSS frameworks do). The root font size set on `\u003chtml\u003e` [can be customized](Customization.md#component-sizing) to globally resize the components.\n\n### ES6\n\nUse as a Vue plugin (globally registers all components):\n\n```js\nimport { createApp } from \"vue\";\nimport * as KeenUI from \"keen-ui\";\nimport \"keen-ui/keen-ui.css\";\n\nconst app = createApp();\napp.use(KeenUI);\n```\n\nUse individual components:\n\n```js\nimport { createApp } from \"vue\";\nimport { UiAlert, UiButton } from \"keen-ui\";\nimport \"keen-ui/keen-ui.css\";\n\nconst app = createApp({\n  components: {\n    UiAlert,\n    UiButton,\n  },\n});\n```\n\n### Global script tag\n\nFirst, add a stylesheet link to the Keen UI CSS file in `dist/keen-ui.min.css`. Then, add a script tag pointing to `dist/keen-ui.min.js`.\n\nThe library is made available globally via `window.KeenUI` so that you can use it on your app instance.\n\nExample:\n\n```html\n\u003c!-- Place this in \u003chead\u003e --\u003e\n\u003clink rel=\"stylesheet\" href=\"path/to/keen-ui.min.css\" /\u003e\n\n\u003c!-- Place this in \u003cbody\u003e --\u003e\n\u003cdiv id=\"app\"\u003e\n  \u003cui-button\u003e{{ message }}\u003c/ui-button\u003e\n\u003c/div\u003e\n\n\u003cscript src=\"path/to/vue.global.prod.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/keen-ui.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const app = Vue.createApp({\n    data() {\n      return {\n        message: \"Hello world!\",\n      };\n    },\n  });\n  app.use(KeenUI);\n  app.mount(\"#app\");\n\u003c/script\u003e\n```\n\n## Customization\n\nYou can customize many aspects of Keen UI, including theme colors, component sizes, default props, and more.\n\nSee [Customization](Customization.md).\n\n## Using standalone components\n\nEach component is built into a standalone file with all its dependencies included. You can use these individual standalone components without importing the rest of the library. The standalone components are located in the `lib/` folder.\n\n\u003e **Note**\n\u003e Standalone component files each contain their own dependencies, and many contain overlapping dependencies. As a result, using multiple standalone files may increase the size of your bundle due to duplicate code.\n\n```js\nimport { createApp } from \"vue\";\nimport \"keen-ui/src/bootstrap\"; // Required when using standalone components, should be imported only once in your project\nimport UiButton from \"keen-ui/lib/UiButton\";\nimport \"keen-ui/css/UiButton.css\";\n\nconst app = createApp({\n  components: {\n    UiButton,\n  },\n});\n```\n\n## Licence\n\nKeen UI is open source and released under the [MIT Licence](LICENCE).\n\nCopyright (c) 2023 [Josephus Paye II](https://twitter.com/JosephusPaye).\n\n\u003e _PS: Made something cool with Keen UI? I would love to know! Tweet to me at [@JosephusPaye](https://twitter.com/JosephusPaye)_.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/josephuspaye.github.io%2FKeen-UI%2F","html_url":"https://awesome.ecosyste.ms/projects/josephuspaye.github.io%2FKeen-UI%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/josephuspaye.github.io%2FKeen-UI%2F/lists"}