> ## Documentation Index > Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt > Use this file to discover all available pages before exploring further. # UI components > Overview of the UI components of WEBSALE | search: search box, filters, sorting, and pagination as reusable WebComponents in the storefront. This overview lists all available **UI components** of the WEBSALE WebComponents that can be used for searching, filtering, and displaying products in the storefront. These components provide prebuilt features that can be easily integrated into existing HTML templates. They allow you to customize interactions and presentations such as search fields, filter options, pagination, or sorting. Using these components significantly simplifies the integration of complex features, because they automatically generate and update HTML and CSS elements. ## Requirement for all UI components * The JavaScript bundle `ws-search-component-.js` must be integrated, e.g. via the [WEBSALE JavaScript library](https://doku.websale.net/index.html?mats_wsjsbibliothek.html). * Refer to the [JavaScript bundles](/en/ws-search/integration-in-die-templates-storefront/javascript-bundles) documentation for the version number currently in use. ## Overview of the UI components * [ws-communication](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-communication) — The component was renamed from `ws-communication` to `ws-search`. * [ws-search](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search) — The `ws-search` component establishes the connection between the frontend (search input field, filter) and the search backend. It is required to run search queries and retrieve the data for filters and search results. * [ws-filter](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-filter) — The `ws-filter` WebComponent enables filtering of the search results or categories based on various product properties. It supports different filter types such as checkboxes, value ranges (range), and sliders. * [ws-filters](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-filters) — `ws-filters` is the central control component for the filter presentation in the storefront. All ws-filter instances that are available for the search result or category are integrated in this component. * [ws-filter-chip](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-filter-chip) — The `ws-filter-chip` component displays the currently applied filters in the frontend. It is updated automatically as soon as filters are added or removed. Clicking one of the displayed filters removes it again. * [ws-filter-reset](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-filter-reset) — The `ws-filter-reset` component lets users remove all active filters with a single click on a "Reset filter" button. All applied filters are then removed both from the display and from the filter criteria of the search. * [ws-page-size-selector](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-page-size-selector) — The `ws-page-size-selector` component lets you choose the number of hits displayed per page. It can be used on the search result page as well as on category pages. By default the presentation is a dropdown list. * [ws-paging](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-paging) — The component was renamed from `ws-paging` to `ws-pagination`. * [ws-pagination](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-pagination) — The `ws-pagination` component provides a paging feature that lets users navigate between different pages of the search results or category. * [ws-paging-size-selector](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-paging-size-selector) — The component was renamed from `ws-paging-size-selector` to `ws-page-size-selector`. * [ws-search-box](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-box) — The `ws-search-box` component provides the search input field in the frontend. It allows you to integrate a search field with an optional suggest feature. The component can be extended with additional HTML elements such as an input field and a search button. * [ws-search-button](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-button) — The `ws-search-button` component provides an optional button through which the user can manually submit the search entry. It is used together with the `ws-search-box` component. * [ws-search-info](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-info) — The `ws-search-info` component displays information about the search result (number of hits, search term, displayed range) via freely definable templates and updates automatically. * [ws-search-result](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-result) — The `ws-search-result` component displays the results of a search or filtering in the storefront. A separate instance is used per source index (`product`, `category`, `content`). * [ws-search-result-tabs](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-result-tabs) — The `ws-search-result-tabs` component creates a tab navigation for search results from various sources. The tabs are generated automatically from the embedded `ws-search-result` instances. * [ws-sortbox](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-sortbox) — The component was renamed from `ws-sortbox` to `ws-sort-box`. * [ws-sort-box](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-sort-box) — The `ws-sort-box` WebComponent lets users interactively adjust the sorting of the search results or categories. The available sort options (e.g. relevance, price, rating) are based on the fields and options configured in the search module. * [ws-suggest](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-suggest) — The `ws-suggest` component shows search suggestions inside the search box. Via `ws-suggest-result` child elements, several suggestion types (search terms, products, categories, content) can be displayed as groups. * [ws-suggest-result](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-suggest-result) — The `ws-suggest-result` component configures within `ws-suggest` the presentation of a single suggestion type (search terms, products, categories, content, or "Show all results"). * [ws-searchbox](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-searchbox) — The component was renamed from `ws-searchbox` to `ws-search-box`.