https://github.com/varletjs/varlet
A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
https://github.com/varletjs/varlet
components javascript js material material-design material-design-3 material-design-you mobile ts typescript ui ui-kit ui-library vue vue3 vuejs3
Last synced: 7 days ago
JSON representation
A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
- Host: GitHub
- URL: https://github.com/varletjs/varlet
- Owner: varletjs
- License: mit
- Created: 2020-10-30T13:32:43.000Z (over 4 years ago)
- Default Branch: dev
- Last Pushed: 2025-04-01T06:55:31.000Z (14 days ago)
- Last Synced: 2025-04-01T16:07:48.974Z (14 days ago)
- Topics: components, javascript, js, material, material-design, material-design-3, material-design-you, mobile, ts, typescript, ui, ui-kit, ui-library, vue, vue3, vuejs3
- Language: Vue
- Homepage: https://varletjs.org/#/en-US/home
- Size: 42.6 MB
- Stars: 5,140
- Watchers: 48
- Forks: 629
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - varletjs/varlet - A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop. (Vue)
README
VARLET
A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
---
### 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
- ๐ ย Provide 60+ high quality general purpose components
- ๐ ย Components are very lightweight
- ๐ช ย Developed by Chinese, complete Chinese and English documentation and logistics support
- ๐ ๏ธ ย Support on-demand introduction
- ๐ ๏ธ ย Support theme customization
- ๐ ย Support internationalization
- ๐ก ย Support WebStorm syntax highlighting
- ๐ช ย Support the SSR
- ๐ฆ ย Support [Nuxt Module](https://github.com/varletjs/varlet-nuxt)
- ๐ก ย Support the Typescript
- ๐ช ย Make sure more than 90 percent unit test coverage, providing stability assurance
- ๐จ ย Supports both Material Design 2 and Material Design 3 design systems
- ๐ ๏ธ ย Support dark mode
- ๐ง ย Provide official VSCode extension
- โจ๏ธ ย Support Accessibility (still improving)
### Install
### CDN
`varlet.js` contain all the styles and logic of the component library, and you can import them.
```html
const app = Vue.createApp({
template: '<var-button>Button</var-button>'
})
app.use(Varlet).mount('#app')
```
### Webpack / Vite
```shell
# Install with npm or yarn or pnpm
# npm
npm i @varlet/ui -S
# yarn
yarn add @varlet/ui
# pnpm
pnpm add @varlet/ui
```
```js
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](https://gpt.qilepan.com/chat/share?shareId=y3ytky9ifjgl6fxtva1ai16h). Thanks to [qile AI](https://ai.qilepan.com/auth?type=register&invite=MjM0) for providing service support.
### Official Ecosystem
The following projects are maintained by the official team for a long time.
| Name | Description |
|------------------------------------------------------------------------------------------------------|--------------------------------------|
| [@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli) | `Vue3 component library rapid prototyping tool` |
| [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `Desktop adapter, so that the mobile component library can run on the desktop` |
| [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground) | `Varlet component library online editing tool` |
| [@varlet/import-resolver](https://github.com/varletjs/varlet/tree/dev/packages/varlet-import-resolver) | `A resolver for` [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) ` used to implement Varlet and import it on demand` |
| [@varlet/preset-unocss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-unocss) | [UnoCss](https://unocss.dev/) `presets for varlet` |
| [@varlet/preset-tailwindcss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-tailwindcss) | [tailwindcss](https://tailwindcss.com/) `presets for varlet` |
| [varlet-theme-builder](https://github.com/varletjs/varlet-theme-builder) | `Theme generator for generating theme variables for varlet Material Design 3` |
| [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension) | `Varlet Component Library VSCode Plugin` |
| [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet) | `Varlet VSCode Theme` |
| [varlet-app-example](https://github.com/varletjs/varlet-app-template) | `Varlet component library app template` |
| [varlet-install-example](https://github.com/varletjs/varlet-install-example) | `Case collection of Varlet component library and various ecosystem integration` |
### Community Ecosystem
The following projects are maintained by community personnel, welcome to add.
| Name | Description |
|----------------------------------------------------------------|-----------------------------------------|
| [vue-h5-template](https://github.com/sunniejs/vue-h5-template) | `Vue-based mobile template scaffolding, providing mobile presets for Varlet component library` |
| [create-vite-app](https://github.com/ErKeLost/create-vite-app) | `A desktop template scaffolding based on Vue3, providing desktop presets for Varlet component library` |
| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | `A VS Code extension that provides better intellisense to Varlet developers` |
| [vue3-varlet-mobile](https://github.com/easy-temps/vue3-varlet-mobile) | `A mobile template based on Vue 3 and Varlet Component Library` |
### Playground
See [Varlet UI Playground](https://varletjs.org/playground).
### Contribution
See [Contributing Guide](https://github.com/varletjs/varlet/blob/dev/.github/CONTRIBUTING.md).
### GitCode Repo
See [Here](https://gitcode.com/varletjs/varlet).
### Community
We recommend that [issue](https://github.com/varletjs/varlet/issues) be used for problem feedback, or others:
* Wechat group
* Join the [Discord](https://discord.gg/Dmb8ydBHkw)
### Thanks to contributors
### Thanks to the following sponsors
### Sponsor this project
Sponsor this project to support our better creation.
#### Wechat / Alipay
