# Element Plus — Vue 3 UI Library by the Element Team

> Element Plus is a Vue 3 UI library made by the Element team. 60+ components with desktop-first design, clean aesthetic, TypeScript support, and a huge Chinese developer community. The Vue 3 successor to Element UI.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npm i element-plus
```

```ts
// main.ts
import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";

createApp(App).use(ElementPlus).mount("#app");
```

```vue
<!-- App.vue -->
<template>
  <el-card>
    <el-form :model="form" label-width="80px">
      <el-form-item label="Name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="Level">
        <el-select v-model="form.level">
          <el-option label="Free" value="free" />
          <el-option label="Pro" value="pro" />
        </el-select>
      </el-form-item>
      <el-button type="primary">Submit</el-button>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const form = reactive({ name: "", level: "free" });
</script>
```

## Intro

Element Plus is a Vue 3 UI library made by the Element team at Ele.me (Alibaba). Successor to Element UI (Vue 2). Focused on clean, desktop-first design for admin dashboards and B2B apps. Massive Chinese developer adoption with 80+ components covering most enterprise needs.

- **Repo**: https://github.com/element-plus/element-plus
- **Stars**: 27K+
- **Language**: TypeScript
- **License**: MIT

## What Element Plus Does

- **80+ components** — Button, Input, Select, Table, Form, DatePicker, Tree, Cascader, Upload
- **Desktop-first** — polished for large screens, but responsive
- **Dark mode** — built-in theme switch
- **i18n** — 50+ locales
- **Form engine** — reactive form with validation rules
- **Icons** — standalone @element-plus/icons-vue package
- **SSR** — Nuxt module

## Architecture

Built on Vue 3 Composition API. Styles use SCSS with design tokens via CSS custom properties. Runtime theming via CSS variables; components consume tokens.

## Self-Hosting

Client library.

## Key Features

- 80+ components
- Vue 3 + Composition API
- TypeScript-first
- Dark mode built in
- 50+ locales
- Treeshakable via unplugin-vue-components + element-plus/auto-resolver
- SSR (Nuxt) ready
- Responsive layout
- Form validation engine

## Comparison

| Library | Design | Components | Target |
|---|---|---|---|
| Element Plus | Desktop flat | 80+ | Admin/B2B |
| Vuetify | Material Design | 80+ | Apps |
| Naive UI | Flat | 80+ | Modern UIs |
| PrimeVue | Multi-theme | 90+ | Apps |
| Ant Design Vue | Enterprise | 60+ | Admin |

## FAQ

**Q: Element UI vs Element Plus？**
A: Element UI is the Vue 2 version and no longer gets new features. Vue 3 projects must use Element Plus. Most of the API is compatible.

**Q: On-demand imports?**
A: `npm i -D unplugin-auto-import unplugin-vue-components`, and use ElementPlusResolver to auto-import components and styles on demand.

**Q: Element Plus or Vuetify — which should I choose?**
A: Chinese-language projects and B2B admin backends tend to prefer Element Plus (bigger ecosystem in China); pick Vuetify if you want the Material Design look.

## Sources & Credits

- Docs: https://element-plus.org
- GitHub: https://github.com/element-plus/element-plus
- License: MIT

---
Source: https://tokrepo.com/en/workflows/element-plus-vue-3-ui-library-element-team-25e2a2cf
Author: Script Depot