{"id":17797218,"url":"https://github.com/timoscheuermann/timos-components","last_synced_at":"2025-03-17T03:31:02.813Z","repository":{"id":39171576,"uuid":"253236217","full_name":"TimoScheuermann/Timos-Components","owner":"TimoScheuermann","description":"A library of high-quality ready to use VueJS components that will help you speed up your development workflow.","archived":false,"fork":false,"pushed_at":"2022-12-12T09:42:31.000Z","size":9977,"stargazers_count":5,"open_issues_count":23,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-27T17:17:07.083Z","etag":null,"topics":["components","components-library","vue","vuejs","web"],"latest_commit_sha":null,"homepage":"https://components.timos.design","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TimoScheuermann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-05T13:02:34.000Z","updated_at":"2022-06-03T04:46:13.000Z","dependencies_parsed_at":"2023-01-27T17:16:31.197Z","dependency_job_id":null,"html_url":"https://github.com/TimoScheuermann/Timos-Components","commit_stats":null,"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimoScheuermann%2FTimos-Components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimoScheuermann%2FTimos-Components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimoScheuermann%2FTimos-Components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimoScheuermann%2FTimos-Components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TimoScheuermann","download_url":"https://codeload.github.com/TimoScheuermann/Timos-Components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243841204,"owners_count":20356441,"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","components-library","vue","vuejs","web"],"created_at":"2024-10-27T11:51:42.232Z","updated_at":"2025-03-17T03:31:02.068Z","avatar_url":"https://github.com/TimoScheuermann.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![](https://components.timos.design/assets/banner.svg) Components\n\n\u003e A Vue Component Library of high-quality ready to use components that will help you speed up your development workflow.\n\n## Demos\n\n- [FitnessHub](https://fitnesshub.app)\n- [Timos Icons (Icon Library)](https://icons.timos.design)\n- [TC Components (Docs)](https://components.timos.design)\n- [Timos Newsroom](https://newsroom.timos.design)\n- [Gastro Assistant](https://gastro-assistant.com)\n- [Sport Kamasutra](https://sk.timos.design/)\n- [Investing Collectors](https://wip-investing-collectors.netlify.app/)\n\n## Available Components\n\n[Avatar](https://components.timos.design/component/Avatar),\n[Badge](https://components.timos.design/component/Badge),\n[Button](https://components.timos.design/component/Button),\n[Card](https://components.timos.design/component/Card),\n[Checkbox](https://components.timos.design/component/Checkbox),\n[Divider](https://components.timos.design/component/Divider),\n[Header](https://components.timos.design/component/Header),\n[Headline](https://components.timos.design/component/Headline),\n[Hero](https://components.timos.design/component/Hero),\n[Image](https://components.timos.design/component/Image),\n[Input](https://components.timos.design/component/Input),\n[Link](https://components.timos.design/component/Link),\n[List](https://components.timos.design/component/List),\n[Modal](https://components.timos.design/component/Modal),\n[Navbar](https://components.timos.design/component/Navbar),\n[Progress](https://components.timos.design/component/Progress),\n[Quote](https://components.timos.design/component/Quote),\n[Revealer](https://components.timos.design/component/Revealer),\n[Scroll Up](https://components.timos.design/component/Scroll%20Up),\n[Segments](https://components.timos.design/component/Segments),\n[Select](https://components.timos.design/component/Select),\n[Slider](https://components.timos.design/component/Slider),\n[Spinner](https://components.timos.design/component/Spinner),\n[Steps](https://components.timos.design/component/Steps),\n[Switch](https://components.timos.design/component/Switch),\n[Tabbar](https://components.timos.design/component/Tabbar),\n[Table](https://components.timos.design/component/Table),\n[Textarea](https://components.timos.design/component/Textarea),\n[Tooltip](https://components.timos.design/component/Tooltip)\n\n## Layouts\n\n[Flow](https://components.timos.design/layout/Flow),\n[Grid](https://components.timos.design/layout/Grid),\n[Sidebar](https://components.timos.design/layout/Sidebar),\n[Modal](https://components.timos.design/layout/Modal)\n\n## Fundamentals\n\n[Default Tags](https://components.timos.design/fundamental/Default%20Tags),\n[Colors](https://components.timos.design/fundamental/Colors),\n[Icons](https://components.timos.design/fundamental/Icons),\n[Auto Background](https://components.timos.design/fundamental/Auto%20Background),\n\n## Installation\n\nTC Components is a framework of UI components based on Vuejs which means\nthat vuejs has to be in your project so that TC Components can do the\nmagic.\n\n### NPM\n\nYou can install TC Components through npm with the command:\n\n```\nnpm i tccomponents_vue\n// or\nyarn add tccomponents_vue\n```\n\n## Import in your project\n\nTo use TC Components in your vuejs project, add this code:\n\n```js\n// main.ts or main.js\nimport Vue from 'vue';\n\nimport * as TCComponents from 'tccomponents_vue';\nimport 'tccomponents_vue/lib/tccomponents_vue.css';\n\nfor (const component in TCComponents) {\n  Vue.component(component, TCComponents[component]);\n}\n```\n\n**If you only want specific components do this:**\n\n```js\n// main.ts or main.js\nimport Vue from 'vue';\n\nimport 'tccomponents_vue/lib/tccomponents_vue.css';\nimport { tcButton, tcTable, tcAvatar } from 'tccomponents_vue';\n\nVue.component('tc-button', tcButton);\nVue.component('tc-table', tcTable);\nVue.component('tc-avatar', tcAvatar);\n```\n\n## Component Designer\n\nTC Component features a designer to easily create the mockup for any component. Specifying attributes is as simple as filling out a form.\n\n[Component Designer](https://components.timos.design/designer)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimoscheuermann%2Ftimos-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimoscheuermann%2Ftimos-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimoscheuermann%2Ftimos-components/lists"}