jiaiyan 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 | Detailed component index with navigation |
| element-plus-quickstart | Installation and configuration |
| element-plus-theming | Theme customization |
| element-plus-i18n | 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