{"id":18961667,"url":"https://github.com/yoonit-labs/vue-yoonit-components","last_synced_at":"2025-04-19T11:41:27.362Z","repository":{"id":38991908,"uuid":"318290395","full_name":"Yoonit-Labs/vue-yoonit-components","owner":"Yoonit-Labs","description":"VueJS Atomic Design System framework","archived":false,"fork":false,"pushed_at":"2024-05-01T16:52:45.000Z","size":22414,"stargazers_count":12,"open_issues_count":8,"forks_count":0,"subscribers_count":2,"default_branch":"development","last_synced_at":"2025-03-29T07:22:43.388Z","etag":null,"topics":["atomic-design","design-system","hacktoberfest","vuejs","vuejs-components"],"latest_commit_sha":null,"homepage":"","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/Yoonit-Labs.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-03T18:54:52.000Z","updated_at":"2023-09-04T09:14:47.000Z","dependencies_parsed_at":"2024-05-01T18:17:32.672Z","dependency_job_id":"d756e153-30f7-4149-a04e-85f6d056f15a","html_url":"https://github.com/Yoonit-Labs/vue-yoonit-components","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yoonit-Labs%2Fvue-yoonit-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yoonit-Labs%2Fvue-yoonit-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yoonit-Labs%2Fvue-yoonit-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yoonit-Labs%2Fvue-yoonit-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yoonit-Labs","download_url":"https://codeload.github.com/Yoonit-Labs/vue-yoonit-components/tar.gz/refs/heads/development","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249195415,"owners_count":21228193,"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":["atomic-design","design-system","hacktoberfest","vuejs","vuejs-components"],"created_at":"2024-11-08T14:13:56.497Z","updated_at":"2025-04-16T04:32:55.473Z","avatar_url":"https://github.com/Yoonit-Labs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eVue Yoonit Components\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Vue.js-35495E?color=lightgrey\u0026style=for-the-badge\u0026logo=vue.js\"/\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Storybook-35495E?color=lightgrey\u0026style=for-the-badge\u0026logo=storybook\"/\u003e\n\t\u003cimg src=\"https://img.shields.io/npm/v/@yoonit/nativescript-camera?color=lightgrey\u0026style=for-the-badge\u0026logo=npm\"/\u003e\n\t\u003cimg src=\"https://img.shields.io/npm/dm/@yoonit/nativescript-camera?color=lightgrey\u0026logo=npm\u0026style=for-the-badge\"/\u003e\n\t\u003cimg src=\"https://img.shields.io/npm/l/@yoonit/nativescript-camera?color=lightgrey\u0026style=for-the-badge\"/\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003eThe Atomic Design System framework\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\t\u003ctable\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd align=\"left\" valign=\"middle\"\u003e\n                    \u003cp\u003e◻ 26 Vue Components to create modern UI's\u003c/p\u003e\n                    \u003cp\u003e◻ Grid and Flex layout components\u003c/p\u003e\n                    \u003cp\u003e◻ Unit tests with 100% coverage\u003c/p\u003e\n                    \u003cp\u003e◻ All components documented with Storybook\u003c/p\u003e\n                    \u003cp\u003e◻ Standardized code\u003c/p\u003e\n                    \u003cp\u003e◻ Consistency between interfaces\u003c/p\u003e\n                    \u003cp\u003e◻ The extended definition of Atomic Design including Bosons and Quarks\u003c/p\u003e\n                    \u003cp\u003e◻ SASS with BEM\u003c/p\u003e\n                    \u003cp\u003e◻ Fully customizable with themes provided by \u003ca src=\"https://github.com/Yoonit-Labs/sass-yoonit-style\"\u003e@yoonit/style\u003c/a\u003e\u003c/p\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\t\u003ctd align=\"center\" valign=\"middle\"\u003e\n\t\t\t\t\t\u003cimg src=\"./yoonit.png\" width=\"300\" /\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003ctbody\u003e\n\t\u003c/table\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\t\u003ch3\u003eSponsors\u003c/h3\u003e\n\t\u003ctable align=\"center\"\u003e\n\t\t\u003ctbody align=\"center\"\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\u003cb\u003ePlatinum\u003c/b\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd align=\"center\" valign=\"middle\"\u003e\n\t\t\t\t\t\u003ca href=\"https://cyberlabs.ai\"\u003e\u003cimg src=\"./sponsor_cyberlabs.png\" width=\"300\" /\u003e\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\t\u003ch5\u003e\u003ca href=\"mailto:about@yoonit.dev\"\u003eBecome a sponsor!\u003c/a\u003e\u003c/h5\u003e\n\u003c/div\u003e\n\n### [Atoms](#atoms)\n* [YooAnimation](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/Animation)\n* [YooAvatar](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/Avatar)\n* [YooButton](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/Button)\n* [YooCheckButton](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/CheckButton)\n* [YooDropdown](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/DropDown)\n* [YooIcon](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/Icon)\n* [YooSelectDate](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/SelectDate)\n* [YooStepper](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/Stepper)\n* [YooSwitch](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/Switch)\n### [Molecules](#molecules)\n* [YooButtonToggle](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/ButtonToggle)\n* [YooCard](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/Card)\n* [YooFormGroup](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/FormGroup)\n* [YooHeader](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/Header)\n* [YooListItem](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/ListItem)\n* [YooModal](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/Modal)\n* [YooNotify](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/Notify)\n* [YooPagination](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/Pagination)\n* [YooQuizQuestion](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/QuizQuestion)\n* [YooSegmentedBar](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/SegmentedBar)\n* [YooSelectButton](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/SelectButton)\n* [YooTableAttribute](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/TableAttribute)\n### [Bosons](#bosons)\n* [YooFlexLayout](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/bosons/FlexLayout)\n* [YooGridLayout](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/bosons/GridLayout)\n* [YooScrollView](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/bosons/ScrollView)\n### [Quarks](#quarks)\n* [YooIndicator](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/quarks/Indicator)\n\n## Installation\n\n```javascript\nnpm i -s @yoonit/vue-components\n```\n\n## Usage\n\n#### VueJS Plugin\n\nTo use the components, import the library into your project's main.js file.\n\n`main.js`\n```javascript\nimport Vue from 'vue'\nimport YoonitVueComponents from '@yoonit/vue-components'\n\nVue.use(YoonitVueComponents)\n```\n\nAfter that, you can access each component by calling it in the html template. It is not necessary to import manually each component in your template.\n\n## StoryBook\n\nTo see all the components, run the Storybook available in this project. \n\n```javascript\nnpm run storybook\n```\nAfter running the command above, an address will be available for you to access the component library. There you will be able to meet, interact and copy the code ready to put in your project.\n\n\u003cimg src=\"./public/readme-img/StorybookButton.png\" width=\"960\"\u003e\n\n## To contribute and make it better\n\nClone the repo, change what you want and send PR.\nFor commit messages we use \u003ca href=\"https://www.conventionalcommits.org/\"\u003eConventional Commits\u003c/a\u003e.\n\nContributions are always welcome!\n\n\u003ca href=\"https://github.com/Yoonit-Labs/vue-yoonit-components/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=Yoonit-Labs/vue-yoonit-components\" /\u003e\n\u003c/a\u003e\n  \n---  \n\nCode with ❤ by the [**Yoonit**](https://yoonit.dev/) Team\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoonit-labs%2Fvue-yoonit-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoonit-labs%2Fvue-yoonit-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoonit-labs%2Fvue-yoonit-components/lists"}