{"id":22636156,"url":"https://github.com/47degrees/codetab","last_synced_at":"2026-04-30T00:07:14.477Z","repository":{"id":81545252,"uuid":"247119049","full_name":"47degrees/codetab","owner":"47degrees","description":"Tab selector web component","archived":false,"fork":false,"pushed_at":"2020-03-13T17:42:32.000Z","size":114,"stargazers_count":0,"open_issues_count":4,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T04:46:28.538Z","etag":null,"topics":["code-snippets","stenciljs","tabs","web-component"],"latest_commit_sha":null,"homepage":null,"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/47degrees.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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-13T16:48:51.000Z","updated_at":"2020-03-13T17:42:32.000Z","dependencies_parsed_at":"2023-03-02T07:01:02.311Z","dependency_job_id":null,"html_url":"https://github.com/47degrees/codetab","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/47degrees/codetab","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/47degrees%2Fcodetab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/47degrees%2Fcodetab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/47degrees%2Fcodetab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/47degrees%2Fcodetab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/47degrees","download_url":"https://codeload.github.com/47degrees/codetab/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/47degrees%2Fcodetab/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32448891,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T22:27:22.272Z","status":"ssl_error","status_checked_at":"2026-04-29T22:10:49.234Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["code-snippets","stenciljs","tabs","web-component"],"created_at":"2024-12-09T03:18:31.839Z","updated_at":"2026-04-30T00:07:14.463Z","avatar_url":"https://github.com/47degrees.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D\u0026colorA=16161d\u0026style=flat-square) [![npm version](http://img.shields.io/npm/v/@47deg/codetab.svg?label=npm%20package\u0026style=flat-square\u0026logo=npm\u0026logoWidth=20)](https://npmjs.com/package/@47deg/codetab \"View this project on npm\")\n\n# Codetab\n\nTab selector web component.\n\n\n## Preview\n\n![Codetab preview](preview.png \"Codetab\")\n\n\n## Installation\n\n### Load it from a CDN\n\n- Put a script tag similar to this `\u003cscript src='https://unpkg.com/@47deg/codetab/dist/codetab/codetab.js'\u003e\u003c/script\u003e` in the head of your `index.html`.\n- Then you can use the element anywhere in your template, JSX, html etc.\n\n### Host your own instance\n\n- Run `npm install @47deg/codetab --save`.\n- Put a script tag similar to this `\u003cscript src='node_modules/@47deg/codetab/dist/codetab.js'\u003e\u003c/script\u003e` in the head of your `index.html`.\n- Then you can use the element anywhere in your template, JSX, html etc.\n\n### In JS environment app\n- Run `npm install @47deg/codetab --save`.\n- Add an import to the npm packages `import @47deg/codetab;`.\n- Then you can use the element anywhere in your template, JSX, html etc.\n\n\n## Usage\n\nOnce loaded on your site, you can simply use it like this:\n\n```html\n\u003cfortyseven-codetab data-languages='[\"Scala\", \"Kotlin\", \"Swift\", \"Haskell]'\u003e\n  \u003ccode\u003e\n    Scala code snippet\n  \u003c/code\u003e\n  \u003ccode\u003e\n    Kotlin code snippet\n  \u003c/code\u003e\n  \u003ccode\u003e\n    Swift code snippet\n  \u003c/code\u003e\n  \u003ccode\u003e\n    Haskell code snippet\n  \u003c/code\u003e\n\u003c/fortyseven-codetab\u003e\n```\n\nCodetab will show one element at a time depending on the tab you have selected. The web component will respect styles associated with those elements, so will happen with any code highlighting, which are responsibility of your website styling.\n\n\n## Contributing or modifying this web component\n\nCodetab is built with Stencil, a compiler for building fast web apps using Web Components.\n\nStencil components are just Web Components, so they work in any major framework or with no framework at all. To start playing with it, clone this repo to a new directory:\n\n```bash\ngit clone https://github.com/47degrees/codetab.git codetab\ncd codetab\n```\n\nand run:\n\n```bash\nnpm install\nnpm start\n```\n\nTo build the component for production, run:\n\n```bash\nnpm run build\n```\n\nTo run the unit tests for the components, run:\n\n```bash\nnpm test\n```\n\nNeed help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F47degrees%2Fcodetab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F47degrees%2Fcodetab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F47degrees%2Fcodetab/lists"}