---
api_version: 2024-10
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components.md
---

# Components

## Additional components

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

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

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

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

[Avatar component is used to show a thumbnail representation of an individual or business in the interface.](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components/avatar)

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

[Card](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/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/2024-10/components/card)

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

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

[A modal to complete an order action flow.](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components/customeraccountaction)

[![DropZone](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2024-10/dropzone-thumbnail.png)![DropZone](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2024-10/dropzone-thumbnail.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components/dropzone)

[Drop​Zone](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components/dropzone)

[Dropzone allows file uploads through drag-and-drop functionality into a designated area on a page, or by activating a button.](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components/dropzone)

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

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

[Display up to 4 images in a grid or stacked layout.](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components/imagegroup)

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

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

[Use a menu to display a list of actions in a popover.](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components/menu)

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

[Page](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/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/2024-10/components/page)

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

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

[Use to represent a specific object within a collection, that a customer can take action on.](https://shopify.dev/docs/api/customer-account-ui-extensions/2024-10/components/resourceitem)