# Varlet: Material Design for Vue3, from the Chinese community

> Varlet is a MIT-licensed Vue3 component library based on both Material Design 2 and Material Design 3, supporting mobile and desktop, with more than 70 lightweight components, on-demand import, theme customization, internationalization, SSR with a Nuxt module, TypeScript, dark mode and a stated unit test coverage above 90 percent, backed by an unusually large official ecosystem from a CLI prototyping tool to UnoCSS and Tailwind presets, at v3.20.6.

**varletjs/varlet** — A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

- Repository: https://github.com/varletjs/varlet
- Website: https://varletjs.org
- Stars: 5,334 · Forks: 618
- Language: Vue
- License: MIT
- Published: 2026-09-22 · Updated: 2026-09-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/varletjs-varlet

## Two Material Design generations in one library

Varlet is a Vue3 component library based on Material Design 2 and Material Design 3, supporting mobile and desktop, and the dual-generation stance is its most distinctive design decision. Most Material libraries picked a generation and stayed, while Varlet supports both design systems, letting a product follow Material's evolution or stay on the familiar second-generation patterns without changing component libraries. The mobile-and-desktop scope is the other half of the identity, the components are built mobile-first with a touch emulator handling desktop pointer input, rather than a desktop library squeezed onto phones. The project is developed and maintained by the varletjs organization, presents complete Chinese and English documentation as a feature rather than an afterthought, and mirrors the repository to GitCode alongside GitHub, the distribution fingerprint of a project whose home community is Chinese.

## 70 components, light and on-demand

The component count stands at more than 70 high quality general purpose components, described as very lightweight, and the loading story is on-demand introduction, only the used components pay their way into the bundle. The import resolver package integrates with unplugin-vue-components to make that automatic, resolving Varlet imports without manual registration, and the style side ships alongside so tree-shaken builds stay complete. TypeScript support is a listed feature rather than an add-on, WebStorm syntax highlighting is supported, and the official VSCode extension takes the editor story further. The quality claim is quantified, more than 90 percent unit test coverage providing stability assurance, a number stated as policy, and the release line at v3.20.6 with pushes continuing suggests the coverage discipline is maintained rather than a one-time measurement.

## Two install paths: CDN script or bundler import

The documented installation covers both eras of frontend development. The CDN path loads a single varlet.js containing all styles and logic, with Vue itself and a touch emulator for desktop adaptation, then registers the library and mounts:

```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>
```

The bundler path installs the package with npm, yarn or pnpm:

```shell
# npm
npm i @varlet/ui -S

# yarn
yarn add @varlet/ui

# pnpm
pnpm add @varlet/ui
```

then imports the library and its style entry and registers it on the app. The touch-emulator line in the CDN sample is the mobile-first orientation made visible, desktop is the adapted case, and the package is small enough that the full-library script remains a practical prototyping path.

## An ecosystem eleven projects deep

The official ecosystem table is longer than the feature list, eleven projects maintained by the team. Varlet CLI is a Vue3 component library rapid prototyping tool, so the tooling that built Varlet can build your library too. The touch emulator handles desktop adaptation, the playground powers the online editor at varletjs.org, and the import resolver automates on-demand loading. Two style-framework presets integrate Varlet with UnoCSS and Tailwind CSS, the theme builder generates Material Design 3 theme variables, the VSCode extension and a Varlet VSCode theme cover the editor, and an app template plus an install-example collection cover the getting-started surface. The community adds four more, mobile and desktop template scaffolds, an intellisense extension and a mobile template, the surrounding support a component library needs before a team can reasonably bet on it.

## Theming, dark mode and internationalization

Theme customization is a first-class feature with tooling behind it, the theme builder generating Material Design 3 theme variables rather than leaving designers to hand-edit CSS custom properties, and dark mode is supported natively, the pairing users now assume. Internationalization support covers the component strings, dates, picks and validation messages that ship inside components, with the library's own documentation bilingual, and the stated Chinese and English documentation plus logistics support is aimed at the market where that combination is scarce. The presets for UnoCSS and Tailwind matter here as well, utility-first styling coexisting with a component theme system is a known integration pain, and shipping presets for both major engines is the library taking that problem off the adopter's desk.

## SSR, Nuxt and the modern Vue surface

Server-side rendering is supported, and the support extends to a dedicated Nuxt Module in a sibling repository, the integration point that Nuxt projects need rather than manual SSR wiring, covering the framework's dominant meta-framework. The component library follows Vue 3 composition idioms with TypeScript types throughout, and the repository itself runs a modern toolchain, a pnpm workspace with only-allow-pnpm enforced at preinstall, engines accepting Node 20.19, 22.18 or 24.11 and newer, and per-package scripts for compile, test, coverage and release driven from the root. The changelog is generated through a committed toolchain, and the release script plus a separate extension release path indicate the ecosystem packages version alongside the library, the operational maturity that keeps an eleven-project ecosystem from drifting apart.

## Honest about accessibility, current in maintenance

The feature list ends with a candid entry, support for accessibility, still improving, the parenthetical doing more work than most feature bullets, an admission that screen-reader and keyboard support trails the visual polish rather than a quiet gap a user discovers. Maintenance is current to the day, the repository pushed on 2026-09-29, with three patch releases in August 2026, v3.20.4, v3.20.5 and v3.20.6 across three days, the release rhythm of an actively supported library. Sponsorship runs through a sponsors gallery with WeChat and Alipay options alongside the standard channels, consistent with the project's community, and the contributing guide and contributor graph round out the governance. For teams weighing it against the larger Material libraries, the differentiators remain the dual MD2 and MD3 support, the mobile-desktop span, the Chinese documentation, and an ecosystem built by the same hands as the components.

## Conclusion

Use Varlet when a Vue 3 project wants Material Design styling across both mobile and desktop from one library, especially when Chinese documentation and support matter to the team, since complete bilingual docs are a stated feature. Choose Vuetify for the larger English-first Material ecosystem, or a mobile-only library like Vant when the target is exclusively phones, since Varlet's dual-platform scope is its differentiator. Verify first that your build tooling pairs with the import resolver for on-demand loading, pick the Material Design generation your product follows since both are supported, and check the accessibility note honestly marked as still improving if assistive technology is a requirement.

## FAQ

### What is Varlet, the Vue library?

Varlet is a MIT-licensed Vue3 component library based on both Material Design 2 and Material Design 3, supporting mobile and desktop. It provides more than 70 lightweight components with TypeScript support, on-demand import, theming, dark mode, internationalization, SSR with a Nuxt module, and unit test coverage stated above 90 percent.

### How do you install Varlet?

Install @varlet/ui with npm, yarn or pnpm and register it on your Vue app with its style entry, or use the CDN path loading the UMD varlet.js script plus the touch emulator for desktop. A resolver for unplugin-vue-components enables automatic on-demand import.

### Does Varlet support server-side rendering?

Yes, SSR is a listed feature, and a dedicated Nuxt Module exists in the varlet-nuxt repository for integration with the Nuxt framework. Dark mode, internationalization and theme customization round out the platform-level support.

## Sources

- [License: MIT](https://github.com/varletjs/varlet/blob/dev/LICENSE)
- [Project website](https://varletjs.org)
- [README](https://github.com/varletjs/varlet/blob/dev/README.md)
- [Releases](https://github.com/varletjs/varlet/releases)
- [varletjs/varlet on GitHub](https://github.com/varletjs/varlet)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/varletjs-varlet