---
api_version: 2025-04
api_name: customer-account-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components
  md: https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components.md
---

# Components

## Additional components

In addition to the components below, you can also use checkout components to build customer account UI extensions.

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/components)

[More componentsCheckout components](https://shopify.dev/docs/api/checkout-ui-extensions/components)

[![Avatar](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-04/avatar-thumbnail.png)![Avatar](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-04/avatar-thumbnail.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/avatar)

[Avatar](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/avatar)

[Avatar component is used to show a thumbnail representation of an individual or business in the interface. It can be a graphical representation or visual depiction, such as an image, initials, or an icon.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/avatar)

[![Card](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-04/card-thumbnail.png)![Card](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-04/card-thumbnail.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/card)

[Card](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/card)

[Group related content and functionality together in a familiar and consistent style, for customers to scan, read, and get things done.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/card)

[![CustomerAccountAction](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-04/customeraccountaction-thumbnail.png)![CustomerAccountAction](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-04/customeraccountaction-thumbnail.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/customeraccountaction)

[Customer​Account​Action](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/customeraccountaction)

[A modal to complete an order action flow. This component can only be used to populate the customer-account.order.action.render extension target, which renders as a result of the customer clicking the order action button rendered via the customer-account.order.action.menu-item.render extension target.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/customeraccountaction)

[![ImageGroup](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-04/imagegroup-thumbnail.png)![ImageGroup](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-04/imagegroup-thumbnail.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/imagegroup)

[Image​Group](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/imagegroup)

[Display up to 4 images in a grid or stacked layout. For example, images of products in a wishlist or subscription. When there are more than 4 images, the component indicates how many more images are not displayed.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/imagegroup)

[![Menu](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-04/menu-thumbnail.png)![Menu](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-04/menu-thumbnail.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/menu)

[Menu](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/menu)

[Use a menu to display a list of actions in a popover. Actions can open a modal, trigger an event, or link to an external page.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/menu)

[![Page](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-04/page-thumbnail.png)![Page](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-04/page-thumbnail.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/page)

[Page](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/page)

[The outer wrapper of the page—including the page title, subtitle, and page-level actions—displayed in a familiar and consistent style that sets expectations about the purpose of the page.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/page)

[![ResourceItem](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-04/resourceitem-thumbnail.png)![ResourceItem](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-04/resourceitem-thumbnail.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/resourceitem)

[Resource​Item](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/resourceitem)

[Use to represent a specific object within a collection, that a customer can take action on. For example, a list of active subscriptions or redeemable offers, in a style consistent with the order index page.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-04/components/resourceitem)