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
Quick Navigation
For detailed component documentation, navigate to:
./components/el-{name}/SKILL.md
For design specifications, navigate to:
./element-plus-design-{name}/SKILL.md
