{"id":13723014,"url":"https://github.com/zooplus/zoo-web-components","last_synced_at":"2025-06-27T15:08:09.906Z","repository":{"id":34361972,"uuid":"177769483","full_name":"zooplus/zoo-web-components","owner":"zooplus","description":"Web-components library.","archived":false,"fork":false,"pushed_at":"2024-09-25T12:58:29.000Z","size":6005,"stargazers_count":47,"open_issues_count":2,"forks_count":11,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-06-27T15:08:06.057Z","etag":null,"topics":["css","custom-elements","javascript","presentational-components","shadow-dom","ui-components","vanilla-javascript","vanilla-js","vanillajs","web-component","web-components"],"latest_commit_sha":null,"homepage":"https://zooplus.github.io/zoo-web-components/","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/zooplus.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-26T10:53:33.000Z","updated_at":"2025-04-06T08:05:49.000Z","dependencies_parsed_at":"2024-10-31T04:03:35.418Z","dependency_job_id":"b035022a-7bd8-4bcd-8cb1-23ec64d0a63d","html_url":"https://github.com/zooplus/zoo-web-components","commit_stats":{"total_commits":828,"total_committers":10,"mean_commits":82.8,"dds":"0.37681159420289856","last_synced_commit":"9c386e61691e96b9c6703a30c488c70cea5bafc4"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/zooplus/zoo-web-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zooplus%2Fzoo-web-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zooplus%2Fzoo-web-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zooplus%2Fzoo-web-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zooplus%2Fzoo-web-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zooplus","download_url":"https://codeload.github.com/zooplus/zoo-web-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zooplus%2Fzoo-web-components/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262279180,"owners_count":23286551,"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":["css","custom-elements","javascript","presentational-components","shadow-dom","ui-components","vanilla-javascript","vanilla-js","vanillajs","web-component","web-components"],"created_at":"2024-08-03T01:01:35.448Z","updated_at":"2025-06-27T15:08:09.885Z","avatar_url":"https://github.com/zooplus.png","language":"JavaScript","funding_links":[],"categories":["components and libraries","Real World"],"sub_categories":["web component sets","Design Systems"],"readme":"# Zoo Web Components\n\n|                             **Dependencies**                              |\n| :-----------------------------------------------------------------------: |\n| ![David](https://img.shields.io/david/dev/zooplus/zoo-web-components.svg) |\n|   ![David](https://img.shields.io/david/zooplus/zoo-web-components.svg)   |\n\n- Set of extendable, reusable web-components which can be used in any modern UI framework (or without any).\n- 0 dependencies, built with [Vanilla JS](http://vanilla-js.com/)\n- Doesn't hide native HTML elements behind multiple levels of abstraction but rather enhances them via composition.\n\n## Installation\n\nTo use this library install it by running:\n\n```bash\nnpm i @zooplus/zoo-web-components --save\n```\n\nWhen there is a tree-shaking mechanism in your build pipeline, you can import only the components that you need, for example:\n\n```JS\nimport { Input, Select, registerComponents } from '@zooplus/zoo-web-components';\nregisterComponents(Input, Select);\n\n// or to import everything\n\nimport * as zooComponents from  '@zooplus/zoo-web-components';\nzooComponents.registerComponents(zooComponents);\n```\n\nAll dependencies needed by the components should be pulled automatically, so you don't have to worry about importing classes for `zoo-info`, `zoo-label` etc.\n\nYour build tool should remove all of the components that are not imported automatically (when using rollup, for example).\n\nIn case you don't use any framework and/or any build tool you can import the whole library with the following:\n\n```HTML\n\u003cscript src=\"path-to-zooplus-lib/zoo-web-components.js\"\u003e\u003c/script\u003e\n```\n\nor only the components that you need, for example:\n\n```HTML\n\u003cscript src=\"path-to-zooplus-lib/checkbox.js\"\u003e\u003c/script\u003e\n```\n\nNote, that IIFE components already include all sub-dependencies needed by the component. For example, the above `zoo-checkbox` requires also a `zoo-info` component, it is already in the same bundle as the checkbox.\nOther components that might also use `zoo-info` will not throw an error, since care is taken to not redefine same elements in the custom elements registry.\n\nCurrently, we recommend to use ESM bundle only when you're using some kind of a bundler, which transforms your code into some js module format that is not ESM, since using pure ESM might trigger FOUC, and we do not want that.\n\nRemember to add CSS custom properties to your main styles file:\n\n```CSS\n:root {\n --primary-mid: #3C9700;\n --primary-light: #66B100;\n --primary-dark: #286400;\n --primary-ultralight: #EBF4E5;\n --secondary-mid: #FF6200;\n --secondary-light: #F80;\n --secondary-dark: #CC4E00;\n --info-ultralight: #ECF5FA;\n --info-mid: #459FD0;\n --warning-ultralight: #FDE8E9;\n --warning-mid: #ED1C24;\n}\n```\n\n## Examples integrating with various frameworks\n\n- [VueJS](https://github.com/GeorgeTailor/vue-wc-integration)\n- [Angular](https://github.com/GeorgeTailor/angular-wc-integration)\n- [React](https://github.com/GeorgeTailor/react-wc-integration)\n\n## Documentation\n\nLanding page is available here: \u003chttps://zooplus.github.io/zoo-web-components\u003e  \nDocumentation page is here: \u003chttps://zooplus.github.io/zoo-web-components-docs\u003e\n\n## Note\n\nThis library relies on attributes and/or slots. Usage of properties is not supported for simplicity.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzooplus%2Fzoo-web-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzooplus%2Fzoo-web-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzooplus%2Fzoo-web-components/lists"}