1e41f4b71Sopenharmony_ci# Component Overview 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci 4e41f4b71Sopenharmony_ciComponents are the core of a UI page. Each component can provide visible and interactive functional units that are independent from each other. This is achieved by data and method encapsulation. You can use and reuse any component anywhere as needed. For details about how to use the components, see [Universal Attributes](../reference/apis-arkui/arkui-js/js-components-common-attributes.md). 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ci 7e41f4b71Sopenharmony_ciYou can also customize a new component through proper combination of components to make the development simple and easy. For details about how to customize components, see [Custom Components](ui-js-custom-components.md). 8e41f4b71Sopenharmony_ci 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ci## Classification 11e41f4b71Sopenharmony_ci 12e41f4b71Sopenharmony_ciComponents can be classified into the following types based on their functions. 13e41f4b71Sopenharmony_ci 14e41f4b71Sopenharmony_ci| Type | Components | 15e41f4b71Sopenharmony_ci| --------- | ---------------------------------------- | 16e41f4b71Sopenharmony_ci| Container | badge, dialog, div, form, list, list-item, list-item-group, panel, popup, refresh, stack, stepper, stepper-item, swiper, tabs, tab-bar, tab-content | 17e41f4b71Sopenharmony_ci| Basic | button, chart, divider, image, image-animator, input, label, marquee, menu, option, picker, picker-view, piece, progress, qrcode, rating, richtext, search, select, slider, span, switch, text, textarea, toolbar, toolbar-item, toggle | 18e41f4b71Sopenharmony_ci| Media | video | 19e41f4b71Sopenharmony_ci| Canvas | canvas | 20e41f4b71Sopenharmony_ci| Grid | grid-container, grid-row, grid-col | 21e41f4b71Sopenharmony_ci| SVG | svg, rect, circle, ellipse, path, line, polyline, polygon, text, tspan, textPath, animate, animateMotion, animateTransform |