Package Exports
- vant
- vant/es/index.mjs
- vant/es/locale/lang/en-US.mjs
- vant/es/locale/lang/zh-CN.mjs
- vant/es/swipe-item/index.css
- vant/es/swipe/index.css
- vant/lib
- vant/lib/action-bar
- vant/lib/action-bar-button
- vant/lib/action-bar-button/index.js
- vant/lib/action-bar-button/style
- vant/lib/action-bar-button/style/index.js
- vant/lib/action-bar-icon
- vant/lib/action-bar-icon/index.js
- vant/lib/action-bar-icon/style
- vant/lib/action-bar-icon/style/index.js
- vant/lib/action-bar/index.js
- vant/lib/action-bar/style
- vant/lib/action-bar/style/index.js
- vant/lib/action-sheet
- vant/lib/action-sheet/index.js
- vant/lib/action-sheet/style
- vant/lib/action-sheet/style/index.js
- vant/lib/address-edit
- vant/lib/address-edit/index.js
- vant/lib/address-list
- vant/lib/address-list/index.js
- vant/lib/area
- vant/lib/area/index.js
- vant/lib/area/style
- vant/lib/area/style/index
- vant/lib/area/style/index.js
- vant/lib/badge
- vant/lib/badge/index.css
- vant/lib/badge/index.js
- vant/lib/badge/style
- vant/lib/badge/style/index.js
- vant/lib/button
- vant/lib/button/index.js
- vant/lib/button/style
- vant/lib/button/style/index
- vant/lib/button/style/index.js
- vant/lib/calendar
- vant/lib/calendar/index.js
- vant/lib/calendar/style
- vant/lib/calendar/style/index
- vant/lib/calendar/style/index.js
- vant/lib/card
- vant/lib/card/index.js
- vant/lib/card/style
- vant/lib/card/style/index.js
- vant/lib/cascader
- vant/lib/cascader/index.js
- vant/lib/cascader/style
- vant/lib/cascader/style/index
- vant/lib/cascader/style/index.js
- vant/lib/cell
- vant/lib/cell-group
- vant/lib/cell-group/index.js
- vant/lib/cell-group/style
- vant/lib/cell-group/style/index.js
- vant/lib/cell/index.js
- vant/lib/cell/style
- vant/lib/cell/style/index.js
- vant/lib/checkbox
- vant/lib/checkbox-group
- vant/lib/checkbox-group/index.js
- vant/lib/checkbox-group/style
- vant/lib/checkbox-group/style/index.js
- vant/lib/checkbox/index.css
- vant/lib/checkbox/index.js
- vant/lib/checkbox/style
- vant/lib/checkbox/style/index
- vant/lib/checkbox/style/index.js
- vant/lib/circle
- vant/lib/circle/index.js
- vant/lib/circle/style
- vant/lib/circle/style/index.js
- vant/lib/col
- vant/lib/col/index.js
- vant/lib/col/style
- vant/lib/col/style/index.js
- vant/lib/collapse
- vant/lib/collapse-item
- vant/lib/collapse-item/index.js
- vant/lib/collapse-item/style
- vant/lib/collapse-item/style/index.js
- vant/lib/collapse/index.js
- vant/lib/collapse/style
- vant/lib/collapse/style/index.js
- vant/lib/composables/use-expose
- vant/lib/composables/use-expose.js
- vant/lib/contact-card
- vant/lib/contact-card/index.js
- vant/lib/contact-edit
- vant/lib/contact-edit/index.js
- vant/lib/contact-list
- vant/lib/contact-list/index.js
- vant/lib/count-down
- vant/lib/count-down/index.js
- vant/lib/count-down/style
- vant/lib/count-down/style/index.js
- vant/lib/count-down/utils
- vant/lib/count-down/utils.js
- vant/lib/coupon
- vant/lib/coupon-cell
- vant/lib/coupon-cell/index.js
- vant/lib/coupon-cell/style
- vant/lib/coupon-cell/style/index.js
- vant/lib/coupon-list
- vant/lib/coupon-list/index.js
- vant/lib/coupon-list/style
- vant/lib/coupon-list/style/index.js
- vant/lib/coupon/index.js
- vant/lib/date-picker/style/index
- vant/lib/date-picker/style/index.js
- vant/lib/dialog
- vant/lib/dialog/index.js
- vant/lib/dialog/style
- vant/lib/dialog/style/index.js
- vant/lib/divider
- vant/lib/divider/index.js
- vant/lib/divider/style
- vant/lib/divider/style/index.js
- vant/lib/dropdown-item
- vant/lib/dropdown-item/index.js
- vant/lib/dropdown-item/style
- vant/lib/dropdown-item/style/index.js
- vant/lib/dropdown-menu
- vant/lib/dropdown-menu/index.js
- vant/lib/dropdown-menu/style
- vant/lib/dropdown-menu/style/index.js
- vant/lib/empty
- vant/lib/empty/index.js
- vant/lib/empty/style
- vant/lib/empty/style/index.js
- vant/lib/field
- vant/lib/field/index.js
- vant/lib/field/style
- vant/lib/field/style/index
- vant/lib/field/style/index.js
- vant/lib/form
- vant/lib/form/index.js
- vant/lib/form/style
- vant/lib/form/style/index
- vant/lib/form/style/index.js
- vant/lib/grid
- vant/lib/grid-item
- vant/lib/grid-item/index.js
- vant/lib/grid-item/style
- vant/lib/grid-item/style/index.js
- vant/lib/grid/index.js
- vant/lib/grid/style
- vant/lib/grid/style/index.js
- vant/lib/icon
- vant/lib/icon/index.css
- vant/lib/icon/index.js
- vant/lib/icon/style
- vant/lib/icon/style/index.js
- vant/lib/image
- vant/lib/image-preview
- vant/lib/image-preview/index.css
- vant/lib/image-preview/index.js
- vant/lib/image-preview/style
- vant/lib/image-preview/style/index
- vant/lib/image-preview/style/index.js
- vant/lib/image/index.css
- vant/lib/image/index.js
- vant/lib/image/style
- vant/lib/image/style/index
- vant/lib/image/style/index.js
- vant/lib/index
- vant/lib/index-anchor
- vant/lib/index-anchor/index.js
- vant/lib/index-anchor/style
- vant/lib/index-anchor/style/index.js
- vant/lib/index-bar
- vant/lib/index-bar/index.js
- vant/lib/index-bar/style
- vant/lib/index-bar/style/index.js
- vant/lib/index.css
- vant/lib/index.js
- vant/lib/lazyload
- vant/lib/lazyload/index.js
- vant/lib/lazyload/style
- vant/lib/lazyload/style/index.js
- vant/lib/list
- vant/lib/list/index.js
- vant/lib/list/style
- vant/lib/list/style/index.js
- vant/lib/loading
- vant/lib/loading/index.css
- vant/lib/loading/index.js
- vant/lib/loading/style
- vant/lib/loading/style/index.js
- vant/lib/locale
- vant/lib/locale/index
- vant/lib/locale/index.js
- vant/lib/locale/lang/en-US
- vant/lib/locale/lang/en-US.js
- vant/lib/locale/lang/zh-CN
- vant/lib/locale/lang/zh-CN.js
- vant/lib/locale/lang/zh-HK
- vant/lib/locale/lang/zh-HK.js
- vant/lib/locale/lang/zh-TW
- vant/lib/locale/lang/zh-TW.js
- vant/lib/nav-bar
- vant/lib/nav-bar/index.js
- vant/lib/nav-bar/style
- vant/lib/nav-bar/style/index.js
- vant/lib/notice-bar
- vant/lib/notice-bar/index.js
- vant/lib/notice-bar/style
- vant/lib/notice-bar/style/index.js
- vant/lib/notify
- vant/lib/notify/index.js
- vant/lib/notify/style
- vant/lib/notify/style/index.js
- vant/lib/number-keyboard
- vant/lib/number-keyboard/index.js
- vant/lib/number-keyboard/style
- vant/lib/number-keyboard/style/index
- vant/lib/number-keyboard/style/index.js
- vant/lib/overlay
- vant/lib/overlay/index.css
- vant/lib/overlay/index.js
- vant/lib/overlay/style
- vant/lib/overlay/style/index.js
- vant/lib/pagination
- vant/lib/pagination/index.js
- vant/lib/pagination/style
- vant/lib/pagination/style/index.js
- vant/lib/password-input
- vant/lib/password-input/index.js
- vant/lib/password-input/style
- vant/lib/password-input/style/index.js
- vant/lib/picker
- vant/lib/picker/index.css
- vant/lib/picker/index.js
- vant/lib/picker/style
- vant/lib/picker/style/index
- vant/lib/picker/style/index.js
- vant/lib/picker/utils
- vant/lib/picker/utils.js
- vant/lib/popover
- vant/lib/popover/index.css
- vant/lib/popover/index.js
- vant/lib/popover/style
- vant/lib/popover/style/index.js
- vant/lib/popup
- vant/lib/popup/index.css
- vant/lib/popup/index.js
- vant/lib/popup/style
- vant/lib/popup/style/index
- vant/lib/popup/style/index.js
- vant/lib/progress
- vant/lib/progress/index.js
- vant/lib/progress/style
- vant/lib/progress/style/index.js
- vant/lib/pull-refresh
- vant/lib/pull-refresh/index.js
- vant/lib/pull-refresh/style
- vant/lib/pull-refresh/style/index.js
- vant/lib/radio
- vant/lib/radio-group
- vant/lib/radio-group/index.js
- vant/lib/radio-group/style
- vant/lib/radio-group/style/index.js
- vant/lib/radio/index.js
- vant/lib/radio/style
- vant/lib/radio/style/index
- vant/lib/radio/style/index.js
- vant/lib/rate
- vant/lib/rate/index.js
- vant/lib/rate/style
- vant/lib/rate/style/index
- vant/lib/rate/style/index.js
- vant/lib/row
- vant/lib/row/index.js
- vant/lib/row/style
- vant/lib/row/style/index.js
- vant/lib/search
- vant/lib/search/index.js
- vant/lib/search/style
- vant/lib/search/style/index.js
- vant/lib/share-sheet
- vant/lib/share-sheet/index.js
- vant/lib/share-sheet/style
- vant/lib/share-sheet/style/index.js
- vant/lib/sidebar
- vant/lib/sidebar-item
- vant/lib/sidebar-item/index.js
- vant/lib/sidebar-item/style
- vant/lib/sidebar-item/style/index.js
- vant/lib/sidebar/index.js
- vant/lib/sidebar/style
- vant/lib/sidebar/style/index.js
- vant/lib/skeleton
- vant/lib/skeleton/index.js
- vant/lib/skeleton/style
- vant/lib/skeleton/style/index.js
- vant/lib/slider
- vant/lib/slider/index.js
- vant/lib/slider/style
- vant/lib/slider/style/index
- vant/lib/slider/style/index.js
- vant/lib/step
- vant/lib/step/index.js
- vant/lib/step/style
- vant/lib/step/style/index.js
- vant/lib/stepper
- vant/lib/stepper/index.js
- vant/lib/stepper/style
- vant/lib/stepper/style/index
- vant/lib/stepper/style/index.js
- vant/lib/steps
- vant/lib/steps/index.js
- vant/lib/steps/style
- vant/lib/steps/style/index.js
- vant/lib/sticky
- vant/lib/sticky/index.js
- vant/lib/sticky/style
- vant/lib/sticky/style/index.js
- vant/lib/style/base.css
- vant/lib/submit-bar
- vant/lib/submit-bar/index.js
- vant/lib/swipe
- vant/lib/swipe-cell
- vant/lib/swipe-cell/index.js
- vant/lib/swipe-cell/style
- vant/lib/swipe-cell/style/index.js
- vant/lib/swipe-item
- vant/lib/swipe-item/index.css
- vant/lib/swipe-item/index.js
- vant/lib/swipe-item/style
- vant/lib/swipe-item/style/index.js
- vant/lib/swipe/index.css
- vant/lib/swipe/index.js
- vant/lib/swipe/style
- vant/lib/swipe/style/index.js
- vant/lib/switch
- vant/lib/switch/index.js
- vant/lib/switch/style
- vant/lib/switch/style/index
- vant/lib/switch/style/index.js
- vant/lib/tab
- vant/lib/tab/index.js
- vant/lib/tab/style
- vant/lib/tab/style/index.js
- vant/lib/tabbar
- vant/lib/tabbar-item
- vant/lib/tabbar-item/index.js
- vant/lib/tabbar-item/style
- vant/lib/tabbar-item/style/index.js
- vant/lib/tabbar/index.js
- vant/lib/tabbar/style
- vant/lib/tabbar/style/index.js
- vant/lib/tabs
- vant/lib/tabs/index.js
- vant/lib/tabs/style
- vant/lib/tabs/style/index.js
- vant/lib/tag
- vant/lib/tag/index.js
- vant/lib/tag/style
- vant/lib/tag/style/index.js
- vant/lib/time-picker/style/index
- vant/lib/time-picker/style/index.js
- vant/lib/toast
- vant/lib/toast/index.css
- vant/lib/toast/index.js
- vant/lib/toast/style
- vant/lib/toast/style/index
- vant/lib/toast/style/index.js
- vant/lib/tree-select
- vant/lib/tree-select/index.js
- vant/lib/tree-select/style
- vant/lib/tree-select/style/index.js
- vant/lib/uploader
- vant/lib/uploader/index.js
- vant/lib/uploader/style
- vant/lib/uploader/style/index
- vant/lib/uploader/style/index.js
- vant/lib/utils
- vant/lib/utils/constant
- vant/lib/utils/constant.js
- vant/lib/utils/index
- vant/lib/utils/index.js
- vant/lib/vant.cjs.js
- vant/package.json
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vant) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Vant
A lightweight, customizable Vue UI library for mobile web apps.
π₯ ζζ‘£η½η«οΌε½ε οΌ π ζζ‘£η½η«οΌGitHubοΌ π¨π³ δΈζηδ»η»
Features
- π 1KB Component average size (min+gzip)
- π 80+ High quality components
- π Zero third-party dependencies
- πͺ 90%+ Unit test coverage
- πͺ Written in TypeScript
- π Extensive documentation and demos
- π Provide Sketch and Axure design resources
- π Support Vue 2 & Vue 3
- π Support Nuxt 2 & Nuxt 3, provide Vant Module for Nuxt
- π Support Tree Shaking
- π Support Custom Theme
- π Support Accessibility (still improving)
- π Support Dark Mode
- π Support SSR
- π Support i18n, built-in 30+ languages
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-v2Using yarn, pnpm, or bun:
# with yarn
yarn add vant
# with pnpm
pnpm add vant
# with Bun
bun add vantScaffold
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@latestPlease 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-aliapp | Alipay MiniProgram UI |
| taroify | Vant Taro |
| vant-theme | Online theme preview built on Vant UI |
| @antmjs/vantui | Mobile UI Components based on Vant, supporting Taro and React |
| 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 |
| vscode-common-intellisense | A VS Code extension that provides better intellisense to Vant developers |
Links
Preview
You can scan the following QR code to access the demoοΌ
Core Team
Core contributors of Vant and Vant Weapp:
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| chenjiahan | cookfront | wangnaiyi | pangxie | rex-zsd | nemo-shen |
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Lindysen | JakeLaoyu | landluck | wjw-gavin | inottn | zhousg |
All Contributors
Thanks to the following friends for their contributions to Vant:
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.