> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/canvas/3.0.0-1/canvas-functionality/reference/reusable-elements/widgets/ui-widgets.md).

# UI Widgets

## Notifications&#x20;

**Element name:** widget\_notifications\
**Purpose:** Display notifications to your users

This focus group reusable element contains a simple user interface for displaying unread messages or notifications. By default, we've included this reusable element in `Group Loggedin` in the header. This reusable element icon will only be visible when a user is logged into the app. <br>

![](/files/-M53jVeoBi1zeYSKnld_)

To use this UI, please replace all dummy data type with the data type you want to display (e.g., Messages or Notifications).

Add workflows to `Button Mark as read`, `Group Select message`, and `Group view more`.\
\
If you do not want this UI to be visible, you can hide `Group notification icon` in the header reusable element by unchecking the box for *This element is visible on page load*.

![](/files/-M53kqH_1MNknSjc7i68)

## Search&#x20;

**Element name:** widget\_search\
**Purpose:** Provide a convenient location for your users to search and view results

This focus group reusable element contains a simple user interface for searching for things. By default, we've included this reusable element in `Group Loggedin` in the header. This reusable element icon will only be visible when a user is logged into the app. <br>

![](/files/-M54RVNV-Ds8EjVmSL3N)

To use this UI, please replace all dummy data type with the data type you want to display (e.g., Files or products).

Add workflows to `Group Select item` and update data source of `RepeatingGroup Dummy`.\
\
If you do not want this UI to be visible, you can hide `Group search icon` in the header reusable element by unchecking the box for *This element is visible on page load*.

![](/files/-M53kqH_1MNknSjc7i68)

## Shopping Cart&#x20;

**Element name:** widget\_shopping\_cart\
**Purpose:** Display the items in the user's cart for easy review and checkout

This focus group reusable element contains a simple user interface for reviewing the items in your cart. By default, we've included this reusable element in `Group Loggedin` in the header. This reusable element icon will only be visible when a user is logged into the app. <br>

![](/files/-M54L8WlzSZcm_1h_hHQ)

To use this UI, please replace all dummy data type with the data type you want to display (e.g., Product or Cart items).

Add workflows to `Button remove`and `Button CHECKOUT`.\
\
If you do not want this UI to be visible, you can hide `Group shopping cart icon` in the header reusable element by unchecking the box for *This element is visible on page load*.

![](/files/-M53kqH_1MNknSjc7i68)
