{"id":13458424,"url":"https://github.com/varletjs/varlet","last_synced_at":"2026-02-12T01:42:02.598Z","repository":{"id":37182890,"uuid":"308639708","full_name":"varletjs/varlet","owner":"varletjs","description":"A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.","archived":false,"fork":false,"pushed_at":"2025-05-14T06:57:19.000Z","size":46449,"stargazers_count":5174,"open_issues_count":13,"forks_count":626,"subscribers_count":47,"default_branch":"dev","last_synced_at":"2025-05-14T07:50:00.980Z","etag":null,"topics":["components","javascript","js","material","material-design","material-design-3","material-design-you","mobile","ts","typescript","ui","ui-kit","ui-library","vue","vue3","vuejs3"],"latest_commit_sha":null,"homepage":"https://varletjs.org/#/en-US/home","language":"Vue","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/varletjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://cdn.jsdelivr.net/gh/varletjs/varlet-static/alipay.jpg","https://cdn.jsdelivr.net/gh/varletjs/varlet-static/wechat.jpg"]}},"created_at":"2020-10-30T13:32:43.000Z","updated_at":"2025-05-14T06:57:23.000Z","dependencies_parsed_at":"2023-12-19T18:44:59.182Z","dependency_job_id":"1a28ea41-c922-4733-a1e7-12c2c99f3579","html_url":"https://github.com/varletjs/varlet","commit_stats":{"total_commits":4509,"total_committers":137,"mean_commits":32.91240875912409,"dds":"0.46706586826347307","last_synced_commit":"4cd6dbf0fd817491e80705150ee634773042fb20"},"previous_names":["haoziqaq/varlet"],"tags_count":371,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varletjs%2Fvarlet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varletjs%2Fvarlet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varletjs%2Fvarlet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varletjs%2Fvarlet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/varletjs","download_url":"https://codeload.github.com/varletjs/varlet/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101584,"owners_count":22014907,"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","javascript","js","material","material-design","material-design-3","material-design-you","mobile","ts","typescript","ui","ui-kit","ui-library","vue","vue3","vuejs3"],"created_at":"2024-07-31T09:00:52.416Z","updated_at":"2026-02-12T01:42:02.594Z","avatar_url":"https://github.com/varletjs.png","language":"Vue","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://varletjs.org/#/en-US/index\"\u003e\n    \u003cimg src=\"https://varletjs.org/logo.svg\" width=\"150\"\u003e\n  \u003c/a\u003e\n  \u003ch1\u003eVARLET\u003c/h1\u003e\n  \u003cp\u003eA Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.\u003c/p\u003e\n  \u003cp\u003e\n    \u003ca href=\"https://varletjs.org/#/en-US/index\"\u003eDocumentation\u003c/a\u003e |\n    \u003ca href=\"https://github.com/varletjs/varlet/blob/dev/README.zh-CN.md\"\u003e中文介绍\u003c/a\u003e\n  \u003c/p\u003e\n  \u003cp\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@varlet/ui?style=flat-square\" alt=\"version\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/varletjs/varlet\" alt=\"stars\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc\" alt=\"vue\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/@varlet/ui.svg\" alt=\"license\"\u003e\n    \u003cimg src=\"https://img.shields.io/codecov/c/github/varletjs/varlet\" alt=\"coverage\"\u003e\n    \u003cimg src=\"https://github.com/varletjs/varlet/workflows/CI/badge.svg\" alt=\"ci\"\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n### Intro\n\nVarlet is a `Vue3` component library based on Material Design 2 and 3, supporting mobile and desktop, developed and maintained by `varletjs` organization.\n\n\n### Features\n\n- 🚀 \u0026nbsp; Provide 60+ high quality general purpose components\n- 🚀 \u0026nbsp; Components are very lightweight\n- 💪 \u0026nbsp; Developed by Chinese, complete Chinese and English documentation and logistics support\n- 🛠️ \u0026nbsp; Support on-demand introduction\n- 🛠️ \u0026nbsp; Support theme customization\n- 🌍 \u0026nbsp; Support internationalization\n- 💡 \u0026nbsp; Support WebStorm syntax highlighting\n- 💪 \u0026nbsp; Support the SSR\n- 📦 \u0026nbsp; Support [Nuxt Module](https://github.com/varletjs/varlet-nuxt)\n- 💡 \u0026nbsp; Support the Typescript\n- 💪 \u0026nbsp; Make sure more than 90 percent unit test coverage, providing stability assurance\n- 🎨 \u0026nbsp; Supports both Material Design 2 and Material Design 3 design systems\n- 🛠️ \u0026nbsp; Support dark mode\n- 🔧 \u0026nbsp; Provide official VSCode extension\n- ⌨️ \u0026nbsp; Support Accessibility (still improving)\n\n### Install\n\n### CDN\n`varlet.js` contain all the styles and logic of the component library, and you can import them.\n\n```html\n\u003cdiv id=\"app\"\u003e\u003c/div\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue\"\u003e\u003c/script\u003e\n \u003c!-- Desktop Adaptation --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@varlet/touch-emulator/iife.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const app = Vue.createApp({\n    template: '\u003cvar-button\u003eButton\u003c/var-button\u003e'\n  })\n  app.use(Varlet).mount('#app')\n\u003c/script\u003e\n```\n\n### Webpack / Vite\n```shell\n# Install with npm or yarn or pnpm\n\n# npm\nnpm i @varlet/ui -S\n\n# yarn\nyarn add @varlet/ui\n\n# pnpm\npnpm add @varlet/ui\n```\n\n```js\nimport App from './App.vue'\nimport Varlet from '@varlet/ui'\nimport { createApp } from 'vue'\nimport '@varlet/ui/es/style'\n\ncreateApp(App).use(Varlet).mount('#app')\n```\n\n### Official Ecosystem\n\nThe following projects are maintained by the official team for a long time.\n\n| Name | Description |\n|------------------------------------------------------------------------------------------------------|--------------------------------------|\n| [@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli) | `Vue3 component library rapid prototyping tool` |\n| [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `Desktop adapter, so that the mobile component library can run on the desktop` |\n| [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground) | `Varlet component library online editing tool` |\n| [@varlet/import-resolver](https://github.com/varletjs/varlet/tree/dev/packages/varlet-import-resolver)  | `A resolver for` [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) ` used to implement Varlet and import it on demand`   |\n| [@varlet/preset-unocss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-unocss)  | [UnoCss](https://unocss.dev/) `presets for varlet` |\n| [@varlet/preset-tailwindcss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-tailwindcss)  | [tailwindcss](https://tailwindcss.com/) `presets for varlet` |\n| [varlet-theme-builder](https://github.com/varletjs/varlet-theme-builder) | `Theme generator for generating theme variables for varlet Material Design 3` | \n| [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension) | `Varlet Component Library VSCode Plugin` |\n| [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet)  | `Varlet VSCode Theme`   |\n| [varlet-app-example](https://github.com/varletjs/varlet-app-template)  | `Varlet component library app template`   |\n| [varlet-install-example](https://github.com/varletjs/varlet-install-example)  | `Case collection of Varlet component library and various ecosystem integration` |\n\n### Community Ecosystem\n\nThe following projects are maintained by community personnel, welcome to add.\n\n| Name | Description |\n|----------------------------------------------------------------|-----------------------------------------|\n| [vue-h5-template](https://github.com/sunniejs/vue-h5-template) | `Vue-based mobile template scaffolding, providing mobile presets for Varlet component library` |\n| [create-vite-app](https://github.com/ErKeLost/create-vite-app) | `A desktop template scaffolding based on Vue3, providing desktop presets for Varlet component library` |\n| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | `A VS Code extension that provides better intellisense to Varlet developers` |\n| [vue3-varlet-mobile](https://github.com/vue-zone/vue3-varlet-mobile) | `A mobile template based on Vue 3 and Varlet Component Library` |\n\n### Playground\n\nSee [Varlet UI Playground](https://varletjs.org/playground).\n\n### Contribution\n\nSee [Contributing Guide](https://github.com/varletjs/varlet/blob/dev/.github/CONTRIBUTING.md).\n\n### GitCode Repo\n\nSee [Here](https://gitcode.com/varletjs/varlet).\n\n### Thanks to contributors\n\n\u003ca href=\"https://github.com/varletjs/varlet/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=varletjs/varlet\" /\u003e\n\u003c/a\u003e\n\n### Thanks to the following sponsors\n\n\u003ca href=\"https://cdn.jsdelivr.net/gh/varletjs/varlet-static/sponsorkit/sponsors.svg\"\u003e\n  \u003cimg src=\"https://cdn.jsdelivr.net/gh/varletjs/varlet-static/sponsorkit/sponsors.svg\"\u003e\n\u003c/a\u003e\n\n### Sponsor this project\n\nSponsor this project to support our better creation. \n\n#### Wechat / Alipay\n\n\u003cimg style=\"width: 25%\" src=\"https://cdn.jsdelivr.net/gh/varletjs/varlet-static/wechat.jpg\" /\u003e\n\u003cimg style=\"width: 25%\" src=\"https://cdn.jsdelivr.net/gh/varletjs/varlet-static/alipay.jpg\" /\u003e\n","funding_links":["https://cdn.jsdelivr.net/gh/varletjs/varlet-static/alipay.jpg","https://cdn.jsdelivr.net/gh/varletjs/varlet-static/wechat.jpg"],"categories":["Vue","vue"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvarletjs%2Fvarlet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvarletjs%2Fvarlet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvarletjs%2Fvarlet/lists"}