{"id":13464941,"url":"https://github.com/arielsalminen/vue-design-system","last_synced_at":"2025-05-15T13:04:36.353Z","repository":{"id":41375556,"uuid":"107857950","full_name":"arielsalminen/vue-design-system","owner":"arielsalminen","description":"An open source tool for building UI Design Systems with Vue.js","archived":false,"fork":false,"pushed_at":"2023-04-19T08:22:50.000Z","size":20807,"stargazers_count":2173,"open_issues_count":59,"forks_count":224,"subscribers_count":50,"default_branch":"master","last_synced_at":"2024-10-29T17:39:42.524Z","etag":null,"topics":["component-library","components","design-system","design-systems","vue","vue-styleguidist","vuejs"],"latest_commit_sha":null,"homepage":"https://vueds.com","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/arielsalminen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-10-22T10:56:38.000Z","updated_at":"2024-10-29T12:37:55.000Z","dependencies_parsed_at":"2023-07-15T08:58:08.383Z","dependency_job_id":null,"html_url":"https://github.com/arielsalminen/vue-design-system","commit_stats":{"total_commits":582,"total_committers":9,"mean_commits":64.66666666666667,"dds":"0.053264604810996596","last_synced_commit":"38c4c43613029bddec43fb79316ab582197496ce"},"previous_names":["viljamis/vue-design-system"],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arielsalminen%2Fvue-design-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arielsalminen%2Fvue-design-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arielsalminen%2Fvue-design-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arielsalminen%2Fvue-design-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arielsalminen","download_url":"https://codeload.github.com/arielsalminen/vue-design-system/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248961140,"owners_count":21189991,"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":["component-library","components","design-system","design-systems","vue","vue-styleguidist","vuejs"],"created_at":"2024-07-31T14:00:53.143Z","updated_at":"2025-04-14T20:56:00.395Z","avatar_url":"https://github.com/arielsalminen.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![Build status](https://travis-ci.org/arielsalminen/vue-design-system.svg?branch=master)](https://travis-ci.org/arielsalminen/vue-design-system/) ![Dependencies status](https://david-dm.org/arielsalminen/vue-design-system.svg) ![MIT License](https://img.shields.io/badge/license-MIT-blue.svg) [![Gitter](https://badges.gitter.im/gitterHQ/gitter.svg)](https://gitter.im/vueds/Lobby)\n\n# Vue Design System\n\n**Vue Design System** is an open source tool for building UI Design Systems with [Vue.js](https://vuejs.org). It provides you and your team a set of organized tools, patterns \u0026 practices that work as the foundation for your application development.\n\nThe tool is built on top of [Vue.js](https://vuejs.org), [Vue Styleguidist](https://github.com/vue-styleguidist/vue-styleguidist), [Webpack](https://webpack.js.org), and [Theo](https://github.com/salesforce-ux/theo) and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, SCSS \u0026 JavaScript.\n\n**Made by [@arielsalminen](https://twitter.com/arielsalminen) and other contributors. See also [the official website](https://vueds.com) of Vue Design System and [read my article](https://arielsalminen.com/2018/vue-design-system/) on the processes and workflow I use to get started with a new design system project.**\n\n[![Screenshot](./docs/preview.gif)](https://vueds.com/)\n\n## Features\n\n- A set of interconnected patterns \u0026 practices for you and your team.\n- A well thought-out terminology, naming conventions, and hierarchy.\n- Get an automated overview of how your design system progresses over time.\n- Global design tokens in YAML format that you can use inside any component.\n- Automatic generation of living, user editable documentation.\n- Easily export and use your Design System as an NPM dependency in another Vue.js or Nuxt.js project.\n- Create a token, an element, or a pattern, and it’s immediately available across all components.\n- Pre-configured Prettier setup for auto-formatting code on both save and before commit.\n- Live Reloading, Autoprefixing, SCSS, and helper functions + simple and sane defaults for SVG and Webfont usage out-of-the-box.\n- Documentation and the app logic are separated, so you can have public docs while the app itself stays private.\n- [And more…](https://vueds.com/)\n\n## Documentation\n\n- **[Getting Started](https://github.com/arielsalminen/vue-design-system/wiki/getting-started): How to install and run Vue Design System.**\n- [Terminology](https://github.com/arielsalminen/vue-design-system/wiki/terminology): Introduction to the system concepts and its hierarchy.\n- [Naming of Things](https://github.com/arielsalminen/vue-design-system/wiki/naming-of-Things): Naming is hard, so it’s good to have clear guidelines.\n- [Directory Structure](https://github.com/arielsalminen/vue-design-system/wiki/directory-structure): What goes where and why.\n- [Working with the System](https://github.com/arielsalminen/vue-design-system/wiki/working-with-the-system): Concrete examples on how to work with `Tokens`, `Elements` , `Patterns` and `Templates`.\n- [Editing Living Documentation](https://github.com/arielsalminen/vue-design-system/wiki/editing-living-documentation): How to customize the living system documentation.\n- [Spacing](https://github.com/arielsalminen/vue-design-system/wiki/spacing): A framework for creating a predictable and harmonious spacing.\n- [Component Status](https://github.com/arielsalminen/vue-design-system/wiki/Component-Status): Clear labels that reflect the state of completion.\n- [Component QA](https://github.com/arielsalminen/vue-design-system/wiki/Component-QA): How to review new components and keep the quality high.\n- [Contributing](https://github.com/arielsalminen/vue-design-system/blob/master/CONTRIBUTING.md): A set of guidelines for contributing to the system.\n- [Code of Conduct](https://github.com/arielsalminen/vue-design-system/blob/master/CODE_OF_CONDUCT.md): By participating you agree to abide by its terms.\n- [Frequently Asked Questions](\u003chttps://github.com/arielsalminen/vue-design-system/wiki/frequently-asked-questions-(FAQ)\u003e): How to use icons, how to use font-face, etc.\n\n## Examples\n\n- **[Official example](https://vueds.com/example)**\n- [Using Vue Design System as NPM dependency on Vue.js project](https://github.com/arielsalminen/vue-design-system-example)\n- [Using Vue Design System as NPM Dependency on Nuxt.js project](https://github.com/arielsalminen/nuxt-design-system)\n- [Using Vue Design System as NPM Dependency on a static website](https://github.com/arielsalminen/vue-design-system-example-website)\n\n## Roadmap\n\n- See [Roadmap tag](https://github.com/arielsalminen/vue-design-system/issues?q=is%3Aissue+is%3Aopen+label%3Aroadmap) in the issues.\n\n## Changelog\n\n- `3.5.7` is the latest release.\n- See [Releases page](https://github.com/arielsalminen/vue-design-system/releases) for the full changelog.\n\n## Need more help?\n\nAbout to get started with a new design system? I’m an independent designer and developer, specialized in helping companies to build [design systems](https://vueds.com). I also conduct [design system workshops](https://arielsalminen.com/2018/vue-design-system/) and do consulting. [Let’s talk!](https://twitter.com/arielsalminen)\n\n## Authors and License\n\n[Ariel Salminen](https://arie.ls), [Artem Sapegin](http://sapegin.me), [Rafael Escala](https://github.com/rafaesc), [react-styleguidist contributors](https://github.com/styleguidist/react-styleguidist/graphs/contributors), [vue-styleguidist contributors](https://github.com/vue-styleguidist/vue-styleguidist/graphs/contributors), [Vue.js contributors](https://github.com/vuejs/vue/graphs/contributors), [vue-webpack-boilerplate contributors](https://github.com/vuejs-templates/webpack/graphs/contributors), [Theo contributors](https://github.com/salesforce-ux/theo/graphs/contributors), and [Polaris contributors](https://github.com/Shopify/polaris).\n\nLicensed under the [MIT license](https://github.com/arielsalminen/vue-design-system/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farielsalminen%2Fvue-design-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farielsalminen%2Fvue-design-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farielsalminen%2Fvue-design-system/lists"}