---
name: varlet
summary: "varlet is an open-source Vue project in the testing space with 5.3k GitHub stars. The repository is actively maintained, with recent commits."
language: Vue
license: MIT
repo: https://github.com/varletjs/varlet
source: https://opensources.dev/resource/varlet
health: 100
---

# varlet

varlet is an open-source Vue project in the testing space with 5.3k GitHub stars. The repository is actively maintained, with recent commits.

---

### Intro

Varlet is a `Vue3` component library based on Material Design 2 and 3, supporting mobile and desktop, developed and maintained by `varletjs` organization.

### Features

- 🚀   Provide 70+ high quality general purpose components
- 🚀   Components are very lightweight
- 💪   Developed by Chinese, complete Chinese and English documentation and logistics support
- 🛠️   Support on-demand introduction
- 🛠️   Support theme customization
- 🌍   Support internationalization
- 💡   Support WebStorm syntax highlighting
- 💪   Support the SSR
- 📦   Support [Nuxt Module](https://github.com/varletjs/varlet-nuxt)
- 💡   Support the Typescript
- 💪   Make sure more than 90 percent unit test coverage, providing stability assurance
- 🎨   Supports both Material Design 2 and Material Design 3 design systems
- 🛠️   Support dark mode
- 🔧   Provide official VSCode extension
- ⌨️   Support Accessibility (still improving)

### Install

### CDN

`varlet.js` contain all the styles and logic of the component library, and you can import them.

```html
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <!-- Desktop Adaptation -->
<script src="https://cdn.jsdelivr.net/npm/@varlet/touch-emulator/iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script>
<script>
  const app = Vue.createApp({
    template: '<var-button>Button</var-button>'
  })
  app.use(Varlet).mount('#app')
</script>
```

### Webpack / Vite

```shell
# Install with npm or yarn or pnpm

# npm
npm i @varlet/ui -S

# yarn
yarn add @varlet/ui

# pnpm
pnpm add @varlet/ui
```

```js
import App from './App.vue'
import Varlet from '@varlet/ui'
import { createApp } from 'vue'
import '@varlet/ui/es/style'

createApp(App).use(Varlet).mount('#app')
```

### Official Ecosystem

The following projects are maintained by the official team for a long time.

NameDescription[@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli)`Vue3 component library rapid prototyping tool`[@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`[@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground)`Varlet component library online editing tool`[@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`[@varlet/preset-unocss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-unocss)[UnoCss](https://unocss.dev/) `presets for varlet`[@varlet/preset-tailwindcss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-tailwindcss)[tailwindcss](https://tailwindcss.com/) `presets for varlet`[varlet-theme-builder](https://github.com/varletjs/varlet-theme-builder)`Theme generator for generating theme variables for varlet Material Design 3`[varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension)`Varlet Component Library VSCode Plugin`[vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet)`Varlet VSCode Theme`[varlet-app-example](https://github.com/varletjs/varlet-app-template)`Varlet component library app template`[varlet-install-example](https://github.com/varletjs/varlet-install-example)`Case collection of Varlet component library and various ecosystem integration`

### Community Ecosystem

The following projects are maintained by community personnel, welcome to add.

NameDescription[vue-h5-template](https://github.com/sunniejs/vue-h5-template)`Vue-based mobile template scaffolding, providing mobile presets for Varlet component library`[create-vite-app](https://github.com/ErKeLost/create-vite-app)`A desktop template scaffolding based on Vue3, providing desktop presets for Varlet component library`[vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense)`A VS Code extension that provides better intellisense to Varlet developers`[vue3-varlet-mobile](https://github.com/vue-zone/vue3-varlet-mobile)`A mobile template based on Vue 3 and Varlet Component Library`

### Playground

See [Varlet UI Playground](https://varletjs.org/playground).

### Contribution

See [Contributing Guide](https://github.com/varletjs/varlet/blob/dev/.github/CONTRIBUTING.md).

### GitCode Repo

See [Here](https://gitcode.com/varletjs/varlet).

### Thanks to contributors

### Thanks to the following sponsors

### Sponsor this project

Sponsor this project to support our better creation.

### Wechat / Alipay