Varlet is an MIT-licensed Vue 3 component library that implements Material Design 2 and 3 across both mobile and desktop, built for Vue developers and teams who need a broad, themeable UI kit rather than a hand-rolled set of components.

What it is

Varlet is a Vue 3 component library based on Material Design 2 and 3, supporting mobile and desktop, developed and maintained by the varletjs organization. It provides more than 70 general purpose components, is written in TypeScript, and covers both the Material Design 2 and Material Design 3 design systems, with dark mode, internationalization, server-side rendering and on-demand introduction all supported. The project is MIT licensed, has 5,333 stars and 619 forks, and carries 11 open issues.

The concrete problem it solves is the work of assembling a Material-styled interface in the Vue 3 ecosystem without building and maintaining the component set yourself. It also removes the need to run separate component sets for phone and desktop screens: components are lightweight and the official @varlet/touch-emulator package acts as a desktop adapter so the mobile component library can run on the desktop. Around the core library sits an official ecosystem that handles the surrounding chores, including @varlet/cli for rapid prototyping, @varlet/import-resolver for on-demand imports, and a theme generator for Material Design 3 variables.

Key capabilities

• 70+ general purpose components covering both Material Design 2 and Material Design 3 within a single library.
• On-demand introduction through @varlet/import-resolver, a resolver for unplugin-vue-components.
• Theme customization, including the varlet-theme-builder generator for Material Design 3 theme variables.
• Internationalization, dark mode, and SSR support, plus a dedicated Nuxt module.
• TypeScript support, WebStorm syntax highlighting, and an official VSCode extension (varlet-vscode-extension).
• Styling presets for both UnoCss and tailwindcss, published as @varlet/preset-unocss and @varlet/preset-tailwindcss.
• Unit test coverage held above 90 percent, with Accessibility support listed as still improving.

Who uses it and how

• Mobile-first Vue 3 teams, using community scaffolding such as vue-h5-template, which provides mobile presets for the Varlet component library.
• Desktop-oriented Vue 3 teams, for which the community ecosystem lists a Vue 3 desktop template scaffolding alongside the official touch emulator.
• Nuxt projects, which can pull Varlet in through the official Nuxt module rather than wiring the library up manually.
• Teams already standardized on UnoCss or tailwindcss, who apply the matching Varlet preset so the component library and utility classes share one styling story.
• Prototypers and integrators, using @varlet/cli for rapid prototyping, @varlet/ui-playground for online editing, and the installation examples collection for ecosystem integration cases.

Getting started

Install the package with npm, yarn or pnpm (npm i @varlet/ui -S), import @varlet/ui/es/style, and register the library with createApp(App).use(Varlet).mount('#app'). A CDN build is also available: varlet.js contains all the styles and logic of the component library.

How it compares

The facts name no paid or commercial products that Varlet replaces, and no directly comparable Vue component libraries either. What they do place it alongside are integrations such as unplugin-vue-components, UnoCss, tailwindcss and Nuxt, for which the project publishes dedicated resolvers and presets, so Varlet positions itself as a library that plugs into an existing Vue toolchain rather than one that asks a team to adopt a separate stack.

When to use it — and when not to

Varlet is a front-end library, so there is no database, object storage or SMTP service to operate; the setup burden is build tooling and the surrounding ecosystem packages, which must be selected and wired up individually. Teams that need a finished accessibility story should weigh the README's own note that Accessibility support is still improving, and teams not building on Vue 3 will find nothing here, since no other framework target is documented. The README excerpt also truncates the community ecosystem table, so expect to consult the project site for the full list of integrations.

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

# Install with npm or yarn or pnpm

# npm
npm i @varlet/ui -S

# yarn
yarn add @varlet/ui

# pnpm
pnpm add @varlet/ui

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')