# Element Plus Components

> Element Plus component overview and navigation index. Invoke when user needs to browse all available components, find specific component categories, or navigate to detailed component skill files.

- Skill: `jiaiyan/element-plus-components` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jiaiyan/element-plus-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jiaiyan/element-plus-components/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-components

---


# Element Plus Components Overview

This skill provides a comprehensive index of all Element Plus components with navigation to their dedicated skill files for detailed API documentation.

## When to Invoke

- Browse all available components
- Find components by category
- Navigate to specific component skill files
- Get an overview of component capabilities

---

## Component Index (77 Components)

All components listed below have dedicated skill files located at:

```
./components/el-{name}/SKILL.md
```

---

## Basic Components (14)

| Component      | Description                                                     | Skill File                                           |
| -------------- | --------------------------------------------------------------- | ---------------------------------------------------- |
| **Affix**      | Fixes elements to a specific visible area for sticky navigation | [el-affix](./components/el-affix/SKILL.md)           |
| **Anchor**     | Anchor navigation for quick page section navigation             | [el-anchor](./components/el-anchor/SKILL.md)         |
| **Avatar**     | Displays user avatars with images, icons, or characters         | [el-avatar](./components/el-avatar/SKILL.md)         |
| **Backtop**    | Back-to-top button for long page navigation                     | [el-backtop](./components/el-backtop/SKILL.md)       |
| **Badge**      | Displays numbers or status marks on buttons and icons           | [el-badge](./components/el-badge/SKILL.md)           |
| **Breadcrumb** | Displays page location for easier navigation                    | [el-breadcrumb](./components/el-breadcrumb/SKILL.md) |
| **Button**     | Basic button with various types, sizes, and styles              | [el-button](./components/el-button/SKILL.md)         |
| **Card**       | Integrates information in a card container                      | [el-card](./components/el-card/SKILL.md)             |
| **Carousel**   | Loops images or texts in limited space                          | [el-carousel](./components/el-carousel/SKILL.md)     |
| **Collapse**   | Stores content in expandable panels                             | [el-collapse](./components/el-collapse/SKILL.md)     |
| **Divider**    | Creates dividing lines between content                          | [el-divider](./components/el-divider/SKILL.md)       |
| **Icon**       | SVG icons with customizable size and color                      | [el-icon](./components/el-icon/SKILL.md)             |
| **Link**       | Text hyperlinks with various styles                             | [el-link](./components/el-link/SKILL.md)             |
| **Text**       | Styled text display with truncation support                     | [el-text](./components/el-text/SKILL.md)             |

---

## Form Components (24)

| Component            | Description                            | Skill File                                                           |
| -------------------- | -------------------------------------- | -------------------------------------------------------------------- |
| **Autocomplete**     | Input suggestions based on user input  | [el-autocomplete](./components/el-autocomplete/SKILL.md)             |
| **Cascader**         | Hierarchical option selection          | [el-cascader](./components/el-cascader/SKILL.md)                     |
| **Checkbox**         | Multiple choice selection              | [el-checkbox](./components/el-checkbox/SKILL.md)                     |
| **ColorPicker**      | Color selection with multiple formats  | [el-color-picker](./components/el-color-picker/SKILL.md)             |
| **ColorPickerPanel** | Core panel for custom color picker UI  | [el-color-picker-panel](./components/el-color-picker-panel/SKILL.md) |
| **DatePicker**       | Date selection with various types      | [el-date-picker](./components/el-date-picker/SKILL.md)               |
| **DatePickerPanel**  | Core panel for custom date picker UI   | [el-date-picker-panel](./components/el-date-picker-panel/SKILL.md)   |
| **DateTimePicker**   | Combined date and time selection       | [el-datetime-picker](./components/el-datetime-picker/SKILL.md)       |
| **Form**             | Form management and validation         | [el-form](./components/el-form/SKILL.md)                             |
| **Input**            | Text input with various configurations | [el-input](./components/el-input/SKILL.md)                           |
| **InputNumber**      | Numeric input with increment controls  | [el-input-number](./components/el-input-number/SKILL.md)             |
| **InputTag**         | Tag input for multi-value entry        | [el-input-tag](./components/el-input-tag/SKILL.md)                   |
| **Mention**          | @mentions in text inputs               | [el-mention](./components/el-mention/SKILL.md)                       |
| **Radio**            | Single selection from options          | [el-radio](./components/el-radio/SKILL.md)                           |
| **Rate**             | Star rating functionality              | [el-rate](./components/el-rate/SKILL.md)                             |
| **Select**           | Dropdown selection component           | [el-select](./components/el-select/SKILL.md)                         |
| **SelectV2**         | Virtualized select for large datasets  | [el-select-v2](./components/el-select-v2/SKILL.md)                   |
| **Slider**           | Numeric range selection with dragging  | [el-slider](./components/el-slider/SKILL.md)                         |
| **Switch**           | Toggle between two opposing states     | [el-switch](./components/el-switch/SKILL.md)                         |
| **TimePicker**       | Time selection with various formats    | [el-time-picker](./components/el-time-picker/SKILL.md)               |
| **TimeSelect**       | Selection from fixed time options      | [el-time-select](./components/el-time-select/SKILL.md)               |
| **Transfer**         | Dual-column list selection             | [el-transfer](./components/el-transfer/SKILL.md)                     |
| **TreeSelect**       | Tree-based dropdown selection          | [el-tree-select](./components/el-tree-select/SKILL.md)               |
| **Upload**           | File upload with drag-and-drop         | [el-upload](./components/el-upload/SKILL.md)                         |

---

## Data Display Components (17)

| Component        | Description                                    | Skill File                                               |
| ---------------- | ---------------------------------------------- | -------------------------------------------------------- |
| **Avatar**       | User avatars with images, icons, or characters | [el-avatar](./components/el-avatar/SKILL.md)             |
| **Badge**        | Numbers or status marks on elements            | [el-badge](./components/el-badge/SKILL.md)               |
| **Calendar**     | Date display with events                       | [el-calendar](./components/el-calendar/SKILL.md)         |
| **Card**         | Information in card containers                 | [el-card](./components/el-card/SKILL.md)                 |
| **Carousel**     | Image/text carousels                           | [el-carousel](./components/el-carousel/SKILL.md)         |
| **Descriptions** | Multiple fields in list form                   | [el-descriptions](./components/el-descriptions/SKILL.md) |
| **Empty**        | Placeholder hints for empty states             | [el-empty](./components/el-empty/SKILL.md)               |
| **Image**        | Images with lazy load and preview              | [el-image](./components/el-image/SKILL.md)               |
| **Pagination**   | Page navigation for large datasets             | [el-pagination](./components/el-pagination/SKILL.md)     |
| **Progress**     | Operation progress visualization               | [el-progress](./components/el-progress/SKILL.md)         |
| **Scrollbar**    | Custom scrollbar styling                       | [el-scrollbar](./components/el-scrollbar/SKILL.md)       |
| **Segmented**    | Single option selection from multiple          | [el-segmented](./components/el-segmented/SKILL.md)       |
| **Skeleton**     | Loading placeholders                           | [el-skeleton](./components/el-skeleton/SKILL.md)         |
| **Statistic**    | Numerical statistics display                   | [el-statistic](./components/el-statistic/SKILL.md)       |
| **Table**        | Data table with sorting and filtering          | [el-table](./components/el-table/SKILL.md)               |
| **TableV2**      | Virtualized table for large datasets           | [el-table-v2](./components/el-table-v2/SKILL.md)         |
| **Tag**          | Labels and markers for categorization          | [el-tag](./components/el-tag/SKILL.md)                   |
| **Timeline**     | Chronological event display                    | [el-timeline](./components/el-timeline/SKILL.md)         |
| **Tree**         | Hierarchical data display                      | [el-tree](./components/el-tree/SKILL.md)                 |
| **TreeV2**       | Virtualized tree for large datasets            | [el-tree-v2](./components/el-tree-v2/SKILL.md)           |

---

## Navigation Components (6)

| Component      | Description                 | Skill File                                             |
| -------------- | --------------------------- | ------------------------------------------------------ |
| **Affix**      | Sticky navigation elements  | [el-affix](./components/el-affix/SKILL.md)             |
| **Anchor**     | Page anchor navigation      | [el-anchor](./components/el-anchor/SKILL.md)           |
| **Breadcrumb** | Page location display       | [el-breadcrumb](./components/el-breadcrumb/SKILL.md)   |
| **Dropdown**   | Toggleable dropdown menus   | [el-dropdown](./components/el-dropdown/SKILL.md)       |
| **Menu**       | Navigation menu system      | [el-menu](./components/el-menu/SKILL.md)               |
| **PageHeader** | Page navigation headers     | [el-page-header](./components/el-page-header/SKILL.md) |
| **Steps**      | Step-by-step process guide  | [el-steps](./components/el-steps/SKILL.md)             |
| **Tabs**       | Tabbed content organization | [el-tabs](./components/el-tabs/SKILL.md)               |

---

## Feedback Components (12)

| Component        | Description                     | Skill File                                               |
| ---------------- | ------------------------------- | -------------------------------------------------------- |
| **Alert**        | Non-dismissible alert messages  | [el-alert](./components/el-alert/SKILL.md)               |
| **Dialog**       | Modal dialog boxes              | [el-dialog](./components/el-dialog/SKILL.md)             |
| **Drawer**       | Slide-out panel                 | [el-drawer](./components/el-drawer/SKILL.md)             |
| **Loading**      | Loading animation overlay       | [el-loading](./components/el-loading/SKILL.md)           |
| **Message**      | Toast notification messages     | [el-message](./components/el-message/SKILL.md)           |
| **MessageBox**   | Modal alerts, confirms, prompts | [el-message-box](./components/el-message-box/SKILL.md)   |
| **Notification** | Corner notification popups      | [el-notification](./components/el-notification/SKILL.md) |
| **Popconfirm**   | Simple confirmation dialogs     | [el-popconfirm](./components/el-popconfirm/SKILL.md)     |
| **Popover**      | Rich content popups             | [el-popover](./components/el-popover/SKILL.md)           |
| **Result**       | Operation result feedback       | [el-result](./components/el-result/SKILL.md)             |
| **Tooltip**      | Hover tooltip information       | [el-tooltip](./components/el-tooltip/SKILL.md)           |
| **Tour**         | Product tour and onboarding     | [el-tour](./components/el-tour/SKILL.md)                 |

---

## Layout Components (4)

| Component     | Description                                     | Skill File                                         |
| ------------- | ----------------------------------------------- | -------------------------------------------------- |
| **Container** | Layout containers (header, aside, main, footer) | [el-container](./components/el-container/SKILL.md) |
| **Divider**   | Content separation lines                        | [el-divider](./components/el-divider/SKILL.md)     |
| **Space**     | Consistent spacing between elements             | [el-space](./components/el-space/SKILL.md)         |
| **Splitter**  | Resizable split panels                          | [el-splitter](./components/el-splitter/SKILL.md)   |

---

## Utility Components (5)

| Component          | Description                       | Skill File                                                     |
| ------------------ | --------------------------------- | -------------------------------------------------------------- |
| **ConfigProvider** | Global configuration wrapper      | [el-config-provider](./components/el-config-provider/SKILL.md) |
| **InfiniteScroll** | Infinite scrolling directive      | [el-infinite-scroll](./components/el-infinite-scroll/SKILL.md) |
| **Scrollbar**      | Custom scrollbar styling          | [el-scrollbar](./components/el-scrollbar/SKILL.md)             |
| **Tour**           | Product tour and onboarding guide | [el-tour](./components/el-tour/SKILL.md)                       |
| **Watermark**      | Text or pattern watermarks        | [el-watermark](./components/el-watermark/SKILL.md)             |

---

## How to Use Component Skills

Each component skill file contains:

1. **Component Overview**: Description and use cases
2. **Basic Usage**: Simple code examples
3. **API Reference**: Attributes, events, slots, and exposes
4. **Common Patterns**: Real-world usage examples
5. **Best Practices**: Recommended usage guidelines
6. **Component Interactions**: How components work together

### Navigation Example

To access detailed documentation for a specific component:

```
For Button component:
→ Navigate to: ./components/el-button/SKILL.md

For Form component:
→ Navigate to: ./components/el-form/SKILL.md
```

---

## Quick Reference by Use Case

### Building Forms

- **Form** - Form container with validation
- **Input** - Text input fields
- **Select** - Dropdown selections
- **Checkbox** - Multiple selections
- **Radio** - Single selections
- **DatePicker** - Date inputs
- **Upload** - File uploads

### Displaying Data

- **Table** - Data tables
- **Pagination** - Page navigation
- **Tree** - Hierarchical data
- **Descriptions** - Key-value displays
- **Statistic** - Numeric statistics

### User Feedback

- **Message** - Toast notifications
- **Notification** - Corner alerts
- **Dialog** - Modal dialogs
- **Alert** - Page alerts
- **Loading** - Loading states

### Navigation

- **Menu** - Navigation menus
- **Tabs** - Tabbed content
- **Breadcrumb** - Location display
- **Dropdown** - Dropdown menus

### Layout

- **Container** - Page structure
- **Space** - Element spacing
- **Divider** - Content separation
- **Splitter** - Resizable panels

---

## Related Skills

| Skill                       | Description                    | Path                                                          |
| --------------------------- | ------------------------------ | ------------------------------------------------------------- |
| **element-plus-quickstart** | Installation and configuration | [element-plus-quickstart](./element-plus-quickstart/SKILL.md) |
| **element-plus-theming**    | Theme customization            | [element-plus-theming](./element-plus-theming/SKILL.md)       |
| **element-plus-i18n**       | Internationalization           | [element-plus-i18n](./element-plus-i18n/SKILL.md)             |
| **element-plus-dark-mode**  | Dark mode implementation       | [element-plus-dark-mode](./element-plus-dark-mode/SKILL.md)   |
| **element-plus-ssr**        | Server-side rendering          | [element-plus-ssr](./element-plus-ssr/SKILL.md)               |

---

## Best Practices

1. **Use TypeScript**: Enable type definitions for better IDE support
2. **On-demand Import**: Use unplugin for automatic component import
3. **Form Validation**: Use async-validator for complex validation rules
4. **Accessibility**: Use proper ARIA attributes and labels
5. **Performance**: Use virtualized components (TableV2, TreeV2, SelectV2) for large datasets
6. **Consult Specific Skills**: Always refer to the dedicated component skill file for detailed API documentation