# Element Plus Design Overview

> Overview of all Element Plus components organized by category. Invoke when user needs a quick reference to all available components or wants to explore the component library.

- Skill: `jiaiyan/element-plus-design-overview` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jiaiyan/element-plus-design-overview`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jiaiyan/element-plus-design-overview/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: jiaiyan (https://skillmd.com/u/jiaiyan)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/jiaiyan/element-plus-design-overview

---


# Element Plus Component Overview

Quick reference to all Element Plus components organized by category.

## When to Use

- Exploring available components
- Quick component reference
- Understanding component categories
- Planning UI implementation

---

## Component Categories

### Basic Components (14)

| Component | Description |
|-----------|-------------|
| **Affix** | Fixes elements to a specific visible area |
| **Anchor** | Anchor navigation for page sections |
| **Avatar** | User avatars with images, icons, or characters |
| **Backtop** | Back-to-top button |
| **Badge** | Numbers or status marks on elements |
| **Breadcrumb** | Page location display |
| **Button** | Basic button with various types |
| **Card** | Information in card containers |
| **Carousel** | Image/text carousels |
| **Collapse** | Expandable panels |
| **Divider** | Content separation lines |
| **Icon** | SVG icons |
| **Link** | Text hyperlinks |
| **Text** | Styled text display |

### Form Components (24)

| Component | Description |
|-----------|-------------|
| **Autocomplete** | Input suggestions |
| **Cascader** | Hierarchical selection |
| **Checkbox** | Multiple selection |
| **ColorPicker** | Color selection |
| **ColorPickerPanel** | Color picker panel |
| **DatePicker** | Date selection |
| **DatePickerPanel** | Date picker panel |
| **DateTimePicker** | Date and time selection |
| **Form** | Form management and validation |
| **Input** | Text input |
| **InputNumber** | Numeric input |
| **InputTag** | Tag input |
| **Mention** | @mentions in inputs |
| **Radio** | Single selection |
| **Rate** | Star rating |
| **Select** | Dropdown selection |
| **SelectV2** | Virtualized select |
| **Slider** | Range slider |
| **Switch** | Toggle switch |
| **TimePicker** | Time selection |
| **TimeSelect** | Fixed time options |
| **Transfer** | Dual-column selection |
| **TreeSelect** | Tree-based selection |
| **Upload** | File upload |

### Data Display Components (17)

| Component | Description |
|-----------|-------------|
| **Avatar** | User avatars |
| **Badge** | Status marks |
| **Calendar** | Date display |
| **Card** | Card containers |
| **Carousel** | Carousels |
| **Descriptions** | Key-value displays |
| **Empty** | Empty state placeholder |
| **Image** | Images with preview |
| **Pagination** | Page navigation |
| **Progress** | Progress indicators |
| **Scrollbar** | Custom scrollbars |
| **Segmented** | Segmented control |
| **Skeleton** | Loading placeholders |
| **Statistic** | Numerical statistics |
| **Table** | Data tables |
| **TableV2** | Virtualized tables |
| **Tag** | Labels and tags |
| **Timeline** | Chronological events |
| **Tree** | Hierarchical data |
| **TreeV2** | Virtualized tree |

### Navigation Components (8)

| Component | Description |
|-----------|-------------|
| **Affix** | Sticky elements |
| **Anchor** | Page navigation |
| **Breadcrumb** | Location display |
| **Dropdown** | Dropdown menus |
| **Menu** | Navigation menu |
| **PageHeader** | Page headers |
| **Steps** | Step guide |
| **Tabs** | Tabbed content |

### Feedback Components (12)

| Component | Description |
|-----------|-------------|
| **Alert** | Alert messages |
| **Dialog** | Modal dialogs |
| **Drawer** | Slide-out panels |
| **Loading** | Loading indicators |
| **Message** | Toast messages |
| **MessageBox** | Modal alerts |
| **Notification** | Corner notifications |
| **Popconfirm** | Confirmation dialogs |
| **Popover** | Rich popups |
| **Result** | Result pages |
| **Tooltip** | Hover tooltips |
| **Tour** | Product tours |

### Layout Components (4)

| Component | Description |
|-----------|-------------|
| **Container** | Layout containers |
| **Divider** | Content separation |
| **Space** | Element spacing |
| **Splitter** | Resizable panels |

### Utility Components (5)

| Component | Description |
|-----------|-------------|
| **ConfigProvider** | Global configuration |
| **InfiniteScroll** | Infinite scrolling |
| **Scrollbar** | Custom scrollbars |
| **Tour** | Product tours |
| **Watermark** | Watermarks |

---

## Design Resources

| Resource | Description |
|----------|-------------|
| **Border** | Border styles, radius, shadows |
| **Color** | Color palette and semantics |
| **Layout** | 24-column grid system |
| **Typography** | Font conventions |

---

## Related Skills

| Skill | Description |
|-------|-------------|
| [element-plus-components](./element-plus-components/SKILL.md) | Detailed component index with navigation |
| [element-plus-quickstart](./element-plus-quickstart/SKILL.md) | Installation and configuration |
| [element-plus-theming](./element-plus-theming/SKILL.md) | Theme customization |
| [element-plus-i18n](./element-plus-i18n/SKILL.md) | Internationalization |

---

## Quick Navigation

For detailed component documentation, navigate to:
```
./components/el-{name}/SKILL.md
```

For design specifications, navigate to:
```
./element-plus-design-{name}/SKILL.md
```