Home

Awesome

<div align="center"> <a href="https://varletjs.org/#/en-US/index"> <img src="https://varletjs.org/logo.svg" width="150"> </a> <h1>VARLET</h1> <p>A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.</p> <p> <a href="https://varletjs.org/#/en-US/index">Documentation</a> | <a href="https://github.com/varletjs/varlet/blob/dev/README.zh-CN.md">中文介绍</a> </p> <p> <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version"> <img src="https://img.shields.io/github/stars/varletjs/varlet" alt="stars"> <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue"> <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="license"> <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage"> <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci"> </p> </div>

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

Install

CDN

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

<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

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

AI Agent for documentation

You can get more information about varlet by asking in AI Agent for documentation. Thanks to qile AI for providing service support.

Official Ecosystem

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

NameDescription
@varlet/cliVue3 component library rapid prototyping tool
@varlet/touch-emulatorDesktop adapter, so that the mobile component library can run on the desktop
@varlet/ui-playgroundVarlet component library online editing tool
@varlet/import-resolverA resolver for unplugin-vue-components used to implement Varlet and import it on demand
@varlet/preset-unocssUnoCss presets for varlet
@varlet/preset-tailwindcsstailwindcss presets for varlet
varlet-theme-builderTheme generator for generating theme variables for varlet Material Design 3
varlet-vscode-extensionVarlet Component Library VSCode Plugin
vscode-theme-varletVarlet VSCode Theme
varlet-app-exampleVarlet component library app template
varlet-install-exampleCase 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-templateVue-based mobile template scaffolding, providing mobile presets for Varlet component library
create-vite-appA desktop template scaffolding based on Vue3, providing desktop presets for Varlet component library
vscode-common-intellisenseA VS Code extension that provides better intellisense to Varlet developers
vue3-varlet-mobileA mobile template based on Vue 3 and Varlet Component Library

Playground

See Varlet UI Playground.

Contribution

See Contributing Guide.

GitCode Repo

See Here.

Community

We recommend that issue be used for problem feedback, or others:

<img style="width: 25%" src="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/community.png" />

Thanks to contributors

<a href="https://github.com/varletjs/varlet/graphs/contributors"> <img src="https://contrib.rocks/image?repo=varletjs/varlet" /> </a>

Thanks to the following sponsors

<a href="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/sponsorkit/sponsors.svg"> <img src="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/sponsorkit/sponsors.svg"> </a>

Sponsor this project

Sponsor this project to support our better creation.

Wechat / Alipay

<img style="width: 25%" src="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/wechat.jpg" /> <img style="width: 25%" src="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/alipay.jpg" />