Varlet

screenshot of Varlet
vue

A mobile component library based on Vue3, Material Design 2, Material Design 3, and supports desktop development.

Overview:

Varlet is a Material design mobile component library developed based on Vue3. It is a lightweight library that provides over 60 high-quality general-purpose components. The library is developed and maintained by the Varletjs community team and offers complete Chinese and English documentation and logistics support. Varlet also supports on-demand introduction, theme customization, internationalization, WebStorm syntax highlighting, SSR, TypeScript, dark mode, and provides official VSCode extension.

Features:

  • 60+ High Quality General Purpose Components
  • Lightweight Components
  • Complete Chinese and English Documentation
  • On-Demand Introduction
  • Theme Customization
  • Internationalization Support
  • WebStorm Syntax Highlighting
  • SSR Support
  • TypeScript Support
  • Unit Test Coverage
  • Dark Mode Support
  • Official VSCode Extension

CDN:

<link rel="stylesheet" href="https://unpkg.com/varlet-ui/dist/varlet.min.css">
<script src="https://unpkg.com/varlet-ui"></script>

Webpack / Vite:

$ npm install varlet-ui
# or
$ yarn add varlet-ui

Playground:

You can visit the Varlet UI Playground to have a better understanding of the library.

Contribution:

If you want to contribute to Varlet, you can refer to the Contributing Guide for more information.

Cloud IDE:

You can start working with Varlet on a Cloud IDE.

Summary:

Varlet is a mobile component library developed based on Vue3, offering a wide range of lightweight components for building mobile applications. With its comprehensive documentation, theme customization, and internationalization support, Varlet provides developers with an easy-to-use and versatile toolkit. Its support for WebStorm syntax highlighting, SSR, TypeScript, and unit test coverage ensures stability and reliability. Additionally, Varlet offers dark mode support and an official VSCode extension for an enhanced development experience.

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

ui-kit
UI Kits & Components

A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

material-design
Material Design

Material Design is a design system developed by Google that provides a set of guidelines, components, and tools for creating visually appealing and functional user interfaces. Material Design is designed to be flexible and customizable, making it a great choice for a wide range of applications and use cases.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.