vant README

The project's README from github.com/youzan/vant. As one markdown file: README.md.

logo

Vant

A lightweight, customizable Vue UI library for mobile web apps.

npm version Coverage Status downloads

Documentation   ·   Documentation (backup)   ·   中文介绍   ·   日本語

Features

Install

Using npm to install:

# install latest Vant for Vue 3 project
npm i vant

# install Vant 2 for Vue 2 project
npm i vant@latest-v2

Using yarn, pnpm, or bun:

# with yarn
yarn add vant

# with pnpm
pnpm add vant

# with Bun
bun add vant

Scaffold

It is recommended to use Rsbuild to create a scaffold project.

Rsbuild is a build tool based on Rspack, developed by the author of Vant, with first-class build speed and development experience, providing first-priority support for Vant.

You can create a Rsbuild project with the following command:

npm create rsbuild@latest

Please visit the Rsbuild repository for more information.

Quickstart

import { createApp } from 'vue';
// 1. Import the components you need
import { Button } from 'vant';
// 2. Import the components style
import 'vant/lib/index.css';

const app = createApp();

// 3. Register the components you need
app.use(Button);

See more in Quickstart.

Browser Support

Vant 2 supports modern browsers and Android >= 4.0、iOS >= 8.0.

Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).

Official Ecosystem

Project Description
vant-weapp WeChat MiniProgram UI
vant-demo Collection of Vant demos
vant-cli Scaffold for UI library
vant-icons Vant icons
vant-touch-emulator Using vant in desktop browsers
vant-nuxt Vant module for Nuxt

Community Ecosystem

Project Description
3lang3/react-vant React mobile UI Components based on Vant
vant-theme Online theme preview built on Vant UI
@antmjs/vantui Mobile UI Components based on Vant, supporting Taro and React
Taroify Taroify is the Taro version of Vant
vant-playground Vant Playground
sfc-playground-vant Vant Playground
vue3-h5-template Mobile project template based on Vant
vue3-vant-mobile Mobile project template based on Vant, out of the box
vscode-common-intellisense A VS Code extension that provides better intellisense to Vant developers
nuxt-vant-mobile Nuxt ⁴ project template based on Vant, out of the box
mobvue A well-crafted mobile web app template

Preview

You can scan the following QR code to access the demo：

Core Team

Core contributors of Vant and Vant Weapp:

chenjiahan cookfront w91 pangxie1991 rex-zsd nemo-shen
chenjiahan cookfront wangnaiyi pangxie rex-zsd nemo-shen
Lindysen JakeLaoyu landluck wjw-gavin inottn zhousg
Lindysen JakeLaoyu landluck wjw-gavin inottn zhousg

Contribution Guide

Please make sure to read the Contributing Guide before making a pull request.

Start On Web IDE

https://github.dev/youzan/vant

LICENSE

Vant is MIT licensed.

vant (youzan/vant)

vue2
Searching Database…

24.4K ·GitHub
Vant
What is this?Vant is a lightweight, customizable Vue UI library for mobile web apps: 80+ high-quality components averaging about 1KB each (min+gzip), maintained by Youzan under the MIT license.
Is this a framework for building a whole app, or a component library?It is a component library: you add it to your own Vue project and import the components you need — Tree Shaking keeps unused ones out of your bundle.
How do I add it to a project?Install it with your usual package manager — npm, yarn, pnpm, and bun all work. For a new project, the README recommends scaffolding with Rsbuild, a Rspack-based build tool from the author of Vant with first-priority Vant support.
Does it work with Vue 3 or only older Vue?Both: Vant supports Vue 2 and Vue 3, and Nuxt 2/3 through a dedicated Vant module. The library itself has zero third-party dependencies.
Will it run on older phones, and what about desktop browsers?Vant 3/4 targets modern browsers — Chrome >= 51 and iOS >= 10, the same baseline as Vue 3 (Vant 2 went back to Android 4.0 and iOS 8). Components are touch-first, so on desktop you add the vant-touch-emulator package.
Where do apps built with it run?In the browser — any modern mobile browser, plus desktop browsers via the touch emulator; you consume it through npm in a web project.
How is it licensed?MIT — permissive and free to use in commercial products.
What comes out of the box besides the components themselves?Custom theming and dark mode, SSR support, accessibility (still improving), and i18n with 30+ built-in languages. There are also Sketch and Axure design resources if you mock up screens before coding.
How heavy will it make my mobile page?The average component is about 1KB min+gzip — lightness is a headline feature of the library, and the codebase carries 90%+ unit test coverage.
I use React — is there anything for me here?The official library is Vue-only, but the ecosystem lists community React ports: react-vant, @antmjs/vantui (Taro support), and Taroify. There is also vant-weapp, a WeChat MiniProgram version.
Can I try the components before wiring them into my app?Yes — the ecosystem includes a Vant Playground for in-browser experiments, the README links a demo you can open by scanning a QR code, and a VS Code extension adds Vant intellisense while you code.
What are similar projects?vuestic-admin, iview, mint-ui, vux, shadcn-vue, primitives, element-plus, react-native-ui-kitten
Which topics is it in?mobile-web, nuxt, vue2, ui-kit, vue3, components, ssr, ui-library, dark-mode, mobile-development, accessibility, component-library
Creator
youzan
Size
122.3 MB
Stars
24.4K
Updated
CommitOct 14Releasev4.10.2Aug 31
Age
9y
Commits · 90 Days