{"id":13607679,"url":"https://github.com/thepassle/generic-components","last_synced_at":"2025-05-16T13:03:27.384Z","repository":{"id":38048080,"uuid":"259044926","full_name":"thepassle/generic-components","owner":"thepassle","description":"A collection of generic web components with a focus on accessibility, and ease of use","archived":false,"fork":false,"pushed_at":"2022-07-21T13:25:46.000Z","size":1000,"stargazers_count":569,"open_issues_count":11,"forks_count":32,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-29T17:03:27.315Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://genericcomponents.netlify.app/","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/thepassle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-26T14:01:55.000Z","updated_at":"2025-03-26T03:27:18.000Z","dependencies_parsed_at":"2022-09-26T16:21:02.079Z","dependency_job_id":null,"html_url":"https://github.com/thepassle/generic-components","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/thepassle%2Fgeneric-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepassle%2Fgeneric-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepassle%2Fgeneric-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepassle%2Fgeneric-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thepassle","download_url":"https://codeload.github.com/thepassle/generic-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252486929,"owners_count":21755835,"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":[],"created_at":"2024-08-01T19:01:20.654Z","updated_at":"2025-05-16T13:03:27.354Z","avatar_url":"https://github.com/thepassle.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Guides"],"sub_categories":["Examples"],"readme":"# generic-components\n\nA collection of generic web components with a focus on:\n\n- 🚹 Accessibility\n- 🏗 Easy to use\n- 🎨 Easy to style\n\n## Goal\n\nThe goal of this project is to create a common library of generic web components, that are accessible, framework agnostic, easy to style, and easy to consume.\n\nAll components in these repo extend from HTMLElement and dont use any libraries or framework.\n\nYou can think of these components like using a native `\u003cbutton\u003e` element, you get all the functionality, and accessibility, keyboard navigation, etc., for free, you just have to style the button to your liking.\n\nYou can use these components to build an app, or compose them and build your own components with them.\n\n## Usage\n    \n### Via NPM\nComponents can be installed via NPM:\n\n```bash\nnpm i --save @generic-components/components\n```\n\nAnd imported in your code via ES imports:\n\n```js\nimport '@generic-components/components/switch.js';\n```\n\n### Via CDN\nAlternatively you can load the components from a CDN and drop them in your HTML file as a script tag\n\n```html\n\u003cscript src=\"https://unpkg.com/@generic-components/components@latest/switch.js\" type=\"module\"\u003e\u003c/script\u003e\n```\n\n```html\n\u003cgeneric-switch\u003e\u003c/generic-switch\u003e\n```\n\n## Collection\n\n| Component                                                     | Demo                                                                                  | Spec                                                                        | Status        |\n|---------------------------------------------------------------|---------------------------------------------------------------------------------------|-----------------------------------------------------------------------------|---------------|\n| [generic-accordion](/generic-accordion/README.md)             | [demo](https://genericcomponents.netlify.app/generic-accordion/demo/index.html)       | [WAI-ARIA Practices](https://www.w3.org/TR/wai-aria-practices/#accordion)   | ✅            |        \n| [generic-alert](/generic-alert/README.md)                     | [demo](https://genericcomponents.netlify.app/generic-alert/demo/index.html)           | [WAI-ARIA Practices](https://www.w3.org/TR/wai-aria-practices/#alert)       | ✅            |               \n| [generic-dialog](/generic-dialog/README.md)                   | [demo](https://genericcomponents.netlify.app/generic-dialog/demo/index.html)          | [WAI-ARIA Practices](https://www.w3.org/TR/wai-aria-practices/#dialog_modal)| ✅            |     \n| [generic-disclosure](/generic-disclosure/README.md)           | [demo](https://genericcomponents.netlify.app/generic-disclosure/demo/index.html)      | [WAI-ARIA Practices](https://www.w3.org/TR/wai-aria-practices/#disclosure)  | ✅            |      \n| [generic-listbox](/generic-listbox/README.md)                 | [demo](https://genericcomponents.netlify.app/generic-listbox/demo/index.html)         | [WAI-ARIA Practices](https://www.w3.org/TR/wai-aria-practices/#Listbox)     | ✅            |      \n| [generic-radio](/generic-radio/README.md)                     | [demo](https://genericcomponents.netlify.app/generic-radio/demo/index.html)           | [WAI-ARIA Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#radiobutton)     | ✅            |      \n| [generic-skiplink](/generic-skiplink/README.md)               | [demo](https://genericcomponents.netlify.app/generic-skiplink/demo/index.html)        | [WebAIM](https://webaim.org/techniques/skipnav/)                            | ✅            |               \n| [generic-spinner](/generic-spinner/README.md)                 | [demo](https://genericcomponents.netlify.app/generic-spinner/demo/index.html)         |                                                                             | ✅            |               \n| [generic-switch](/generic-switch/README.md)                   | [demo](https://genericcomponents.netlify.app/generic-switch/demo/index.html)          | [WAI-ARIA Practices](https://www.w3.org/TR/wai-aria-1.1/#switch)            | ✅            |        \n| [generic-tabs](/generic-tabs/README.md)                       | [demo](https://genericcomponents.netlify.app/generic-tabs/demo/index.html)            | [WAI-ARIA Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel)    | ✅            |        \n| [generic-visually-hidden](/generic-visually-hidden/README.md) | [demo](https://genericcomponents.netlify.app/generic-visually-hidden/demo/index.html) | [WebAIM](https://webaim.org/techniques/css/invisiblecontent/)               | ✅            |         \n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthepassle%2Fgeneric-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthepassle%2Fgeneric-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthepassle%2Fgeneric-components/lists"}