---
title: UI components
description: >-
  UI components are the building blocks that you use to display data and trigger
  API functions in customer account UI extensions. These components follow
  Shopify's design system and render optimized interfaces for workflows in
  customer accounts.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.

# UI components

These components are built with [remote-ui](https://github.com/Shopify/remote-ui). For the equivalents used in newer API versions, see [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components).

UI components are the building blocks that you use to display data and trigger API functions in customer account UI extensions. These components follow [Shopify's design system](https://shopify.dev/docs/apps/design) and render optimized interfaces for workflows in [customer accounts](https://shopify.dev/docs/apps/build/customer-accounts/start-building).

Your [target](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets) determines which components you can use because different locations in the customer account have different interface requirements and constraints.

**Constraints:**

You can't override the CSS for UI components. The customer account UI will always render the merchant's own branding. Customer account UI extensions don't have access to the real customer account DOM and can't render arbitrary HTML. They can only render custom HTML elements provided by Shopify.

## Actions

Actions enable users to perform tasks and navigate through the customer account interface with interactive elements like buttons and links.

[![Button](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/button-thumbnail-DCGzyj8G.png)![Button](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/button-thumbnail-DCGzyj8G.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/button)

[Button](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/button)

[Trigger actions or events, such as submitting forms, opening dialogs, or navigating to other pages.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/button)

[![ClipboardItem](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/clipboard-basic-CAPHKoqB.png)![ClipboardItem](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/clipboard-basic-CAPHKoqB.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/clipboarditem)

[Clipboard​Item](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/clipboarditem)

[Copy text or data to the clipboard when activated.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/clipboarditem)

[![CustomerAccountAction](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/customeraccountaction-thumbnail-D2cb0rYy.png)![CustomerAccountAction](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/customeraccountaction-thumbnail-D2cb0rYy.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/customeraccountaction)

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

[Define the title and action buttons that appear in customer account action extension surfaces.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/customeraccountaction)

[![Link](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/link-thumbnail-BfYvwrJP.png)![Link](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/link-thumbnail-BfYvwrJP.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/link)

[Link](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/link)

[Make text interactive, allowing users to navigate to other pages or perform specific actions.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/link)

[![Menu](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/menu-thumbnail-D6rnM_Ks.png)![Menu](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/menu-thumbnail-D6rnM_Ks.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/menu)

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

[Display a list of actions that users can perform on a resource.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/menu)

[![Pressable](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/pressable-thumbnail-VD8PLhvg.png)![Pressable](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/pressable-thumbnail-VD8PLhvg.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/pressable)

[Pressable](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/pressable)

[Make any content interactive and trigger actions when pressed.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/pressable)

[![ResourceItem](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/resourceitem-thumbnail-DIec6oRj.png)![ResourceItem](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/resourceitem-thumbnail-DIec6oRj.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/resourceitem)

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

[Display a resource with associated actions in a list format.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/resourceitem)

## Feedback and status indicators

Feedback and status indicators communicate system states, progress, and important information to users.

[![Badge](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/badge-thumbnail-BtsG1EN7.png)![Badge](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/badge-thumbnail-BtsG1EN7.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/badge)

[Badge](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/badge)

[Use color and text to communicate the state of orders, fulfillments, and other business data.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/badge)

[![Banner](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/banner-thumbnail-DE-d_upI.png)![Banner](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/banner-thumbnail-DE-d_upI.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/banner)

[Banner](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/banner)

[Highlight important information or required actions prominently within the interface.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/banner)

[![Progress](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/progress-thumbnail-D0wO0mxa.png)![Progress](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/progress-thumbnail-D0wO0mxa.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/progress)

[Progress](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/progress)

[Display progress through a series of steps or stages.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/progress)

[![Spinner](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/spinner-thumbnail-CjRn9iYx.png)![Spinner](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/spinner-thumbnail-CjRn9iYx.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/spinner)

[Spinner](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/spinner)

[Display an animated indicator to show that content or actions are loading.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/spinner)

## Forms

Forms capture and validate user input with specialized field types optimized for different data collection needs in the customer account.

[![Checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/checkbox-thumbnail-CntFeFXp.png)![Checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/checkbox-thumbnail-CntFeFXp.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/checkbox)

[Checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/checkbox)

[Capture user selections, such as agreeing to terms or choosing multiple items from a list.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/checkbox)

[![Choice](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/choice-thumbnail-XDsz5z12.png)![Choice](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/choice-thumbnail-XDsz5z12.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/choice)

[Choice](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/choice)

[Present a single option within a choice list.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/choice)

[![ChoiceList](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/choicelist-thumbnail-fTSlp-IU.png)![ChoiceList](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/choicelist-thumbnail-fTSlp-IU.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/choicelist)

[Choice​List](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/choicelist)

[Present multiple options for single or multiple selections.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/choicelist)

[![ConsentCheckbox](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/consent-checkbox-thumbnail-j714fHtS.png)![ConsentCheckbox](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/consent-checkbox-thumbnail-j714fHtS.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/consentcheckbox)

[Consent​Checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/consentcheckbox)

[Capture consent from customers with a checkbox and associated terms.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/consentcheckbox)

[![ConsentPhoneField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/consent-phonefield-thumbnail-DRBEwu8c.png)![ConsentPhoneField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/consent-phonefield-thumbnail-DRBEwu8c.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/consentphonefield)

[Consent​Phone​Field](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/consentphonefield)

[Capture phone numbers with associated consent agreements.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/consentphonefield)

[![DateField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/datefield-thumbnail-Chg9Tjo5.png)![DateField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/datefield-thumbnail-Chg9Tjo5.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/datefield)

[Date​Field](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/datefield)

[Capture date input with a consistent interface for date selection and proper validation.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/datefield)

[![DatePicker](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/datepicker-thumbnail-DK2kYMLM.png)![DatePicker](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/datepicker-thumbnail-DK2kYMLM.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/datepicker)

[Date​Picker](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/datepicker)

[Allow customers to select a specific date using a calendar-like picker interface.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/datepicker)

[![DropZone](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/dropzone-thumbnail-CNP2yeRn.png)![DropZone](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/dropzone-thumbnail-CNP2yeRn.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/dropzone)

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

[Accept file uploads through drag-and-drop or button activation.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/dropzone)

[![Form](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/form-thumbnail-BrcOInXb.png)![Form](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/form-thumbnail-BrcOInXb.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/form)

[Form](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/form)

[Wrap form controls and enable implicit submission when users press Enter.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/form)

[![PhoneField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/phonefield-thumbnail-CHAvnFU7.png)![PhoneField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/phonefield-thumbnail-CHAvnFU7.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/phonefield)

[Phone​Field](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/phonefield)

[Capture phone number input with built-in formatting and validation.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/phonefield)

[![Select](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/select-thumbnail-alK-t_xZ.png)![Select](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/select-thumbnail-alK-t_xZ.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/select)

[Select](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/select)

[Enable users to pick one option from a dropdown menu.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/select)

[![Stepper](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/stepper-thumbnail-HJ90J8XP.png)![Stepper](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/stepper-thumbnail-HJ90J8XP.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/stepper)

[Stepper](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/stepper)

[Capture numeric input with increment and decrement controls.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/stepper)

[![Switch](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/switch-thumbnail-4XWp77WO.png)![Switch](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/switch-thumbnail-4XWp77WO.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/switch)

[Switch](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/switch)

[Toggle options on or off.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/switch)

[![TextField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/textfield-thumbnail-DJAeq7KS.png)![TextField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/textfield-thumbnail-DJAeq7KS.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/textfield)

[Text​Field](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/textfield)

[Capture single-line text input.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/textfield)

[![ToggleButton](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/togglebutton-thumbnail-BCY0NmMe.png)![ToggleButton](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/togglebutton-thumbnail-BCY0NmMe.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/togglebutton)

[Toggle​Button](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/togglebutton)

[Toggle between two states with a button.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/togglebutton)

[![ToggleButtonGroup](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/togglebuttongroup-thumbnail-C5akmqK6.png)![ToggleButtonGroup](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/togglebuttongroup-thumbnail-C5akmqK6.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/togglebuttongroup)

[Toggle​Button​Group](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/togglebuttongroup)

[Display a group of toggle buttons for selecting options.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/togglebuttongroup)

## Layout and structure

Layout and structure components organize content hierarchically and spatially, creating clear visual relationships in customer account interfaces.

[![BlockLayout](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/blocklayout-thumbnail-EoJS188r.png)![BlockLayout](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/blocklayout-thumbnail-EoJS188r.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blocklayout)

[Block​Layout](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blocklayout)

[Organize content in vertical blocks with consistent spacing.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blocklayout)

[![BlockSpacer](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/blockspacer-thumbnail-Bf3Jl0nQ.png)![BlockSpacer](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/blockspacer-thumbnail-Bf3Jl0nQ.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blockspacer)

[Block​Spacer](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blockspacer)

[Add vertical spacing between elements.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blockspacer)

[![BlockStack](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/blockstack-thumbnail-BnlNIcxL.png)![BlockStack](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/blockstack-thumbnail-BnlNIcxL.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blockstack)

[Block​Stack](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blockstack)

[Organize elements vertically with consistent spacing between items.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blockstack)

[![Card](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/card-thumbnail-K0GL-GrD.png)![Card](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/card-thumbnail-K0GL-GrD.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/card)

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

[Group related content in a visually distinct container.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/card)

[![Divider](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/divider-thumbnail-D1W9Pntx.png)![Divider](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/divider-thumbnail-D1W9Pntx.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/divider)

[Divider](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/divider)

[Create visual separation between content sections.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/divider)

[![Grid](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/grid-thumbnail-CMXh9k0l.png)![Grid](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/grid-thumbnail-CMXh9k0l.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/grid)

[Grid](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/grid)

[Organize content in a matrix of rows and columns to build responsive layouts.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/grid)

[![GridItem](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/griditem-thumbnail-C43JFS7D.png)![GridItem](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/griditem-thumbnail-C43JFS7D.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/griditem)

[Grid​Item](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/griditem)

[Define an item within a grid layout.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/griditem)

[![InlineLayout](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/inlinelayout-thumbnail-J_OSsoFQ.png)![InlineLayout](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/inlinelayout-thumbnail-J_OSsoFQ.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/inlinelayout)

[Inline​Layout](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/inlinelayout)

[Organize content horizontally with consistent spacing.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/inlinelayout)

[![InlineSpacer](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/inlinespacer-thumbnail-DJ14BOLQ.png)![InlineSpacer](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/inlinespacer-thumbnail-DJ14BOLQ.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/inlinespacer)

[Inline​Spacer](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/inlinespacer)

[Add horizontal spacing between elements.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/inlinespacer)

[![InlineStack](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/inlinestack-thumbnail-DyRLjBpe.png)![InlineStack](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/inlinestack-thumbnail-DyRLjBpe.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/inlinestack)

[Inline​Stack](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/inlinestack)

[Organize elements horizontally with consistent spacing between items.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/inlinestack)

[![Page](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/page-thumbnail-epTdpNyW.png)![Page](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/page-thumbnail-epTdpNyW.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/page)

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

[Configure the top-level page layout for full-page extensions.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/page)

[![ScrollView](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/scrollview-thumbnail-DkbW3ZR9.png)![ScrollView](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/scrollview-thumbnail-DkbW3ZR9.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/scrollview)

[Scroll​View](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/scrollview)

[Create a scrollable container for overflowing content.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/scrollview)

[Style​Helper](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/stylehelper)

[Apply responsive styles to child elements based on container size.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/stylehelper)

[![View](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/view-thumbnail-BmFiLyUv.png)![View](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/view-thumbnail-BmFiLyUv.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/view)

[View](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/view)

[Display a generic container with consistent spacing and styling.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/view)

## Media and visuals

Media and visuals display images, icons, and graphical elements that enhance comprehension and visual communication in the customer account.

[![Avatar](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/avatar-thumbnail-BBjUEMuw.png)![Avatar](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/avatar-thumbnail-BBjUEMuw.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/avatar)

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

[Display a user's profile image or initials.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/avatar)

[![Icon](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/icon-thumbnail-zgeOmgzK.png)![Icon](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/icon-thumbnail-zgeOmgzK.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/icon)

[Icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/icon)

[Display standardized visual symbols to represent actions, statuses, or categories consistently.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/icon)

[![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/image-thumbnail-BXLxE2EI.png)![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/image-thumbnail-BXLxE2EI.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/image)

[Image](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/image)

[Add visual content to the interface and customize the presentation of visuals.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/image)

[![ImageGroup](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/imagegroup-thumbnail-BendmE00.png)![ImageGroup](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/imagegroup-thumbnail-BendmE00.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/imagegroup)

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

[Display a collection of images in a grouped layout.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/imagegroup)

[![Map](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/map-thumbnail-B5DdqsSg.png)![Map](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/map-thumbnail-B5DdqsSg.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/map)

[Map](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/map)

[Display an interactive map with location markers.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/map)

[![MapMarker](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/mapmarker-thumbnail-BZ9T0JS0.png)![MapMarker](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/mapmarker-thumbnail-BZ9T0JS0.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/mapmarker)

[Map​Marker](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/mapmarker)

[Define a marker to display on a map.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/mapmarker)

[![MapPopover](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/mappopover-thumbnail-BBcCsfcU.png)![MapPopover](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/mappopover-thumbnail-BBcCsfcU.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/mappopover)

[Map​Popover](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/mappopover)

[Display contextual information for a map marker.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/mappopover)

[![PaymentIcon](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/paymenticon-thumbnail-CjnpopSf.png)![PaymentIcon](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/paymenticon-thumbnail-CjnpopSf.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/paymenticon)

[Payment​Icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/paymenticon)

[Display standardized icons for payment methods.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/paymenticon)

[![ProductThumbnail](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/productthumbnail-thumbnail-mojfxqDM.png)![ProductThumbnail](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/productthumbnail-thumbnail-mojfxqDM.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/productthumbnail)

[Product​Thumbnail](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/productthumbnail)

[Display small preview images representing products.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/productthumbnail)

[![QRCode](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/qrcode-thumbnail-BnSmpOD4.png)![QRCode](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/qrcode-thumbnail-BnSmpOD4.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/qrcode)

[QR​Code](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/qrcode)

[Generate and display QR codes for sharing links or data.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/qrcode)

[![SkeletonImage](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/skeletonimage-thumbnail-eX5PDz6I.png)![SkeletonImage](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/skeletonimage-thumbnail-eX5PDz6I.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/skeletonimage)

[Skeleton​Image](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/skeletonimage)

[Display a placeholder for image content while data is loading.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/skeletonimage)

## Overlays

Overlays present content in floating or layered surfaces that appear above the main interface, useful for focused tasks, contextual information, and supplementary content.

[![Modal](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/modal-thumbnail-D6LF_aMm.png)![Modal](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/modal-thumbnail-D6LF_aMm.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/modal)

[Modal](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/modal)

[Display content in a layer that overlays the main page, requiring user interaction before returning.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/modal)

[![Popover](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/popover-thumbnail-A47HYwog.png)![Popover](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/popover-thumbnail-A47HYwog.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/popover)

[Popover](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/popover)

[Display contextual content in a floating container anchored to a trigger element.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/popover)

[![Sheet](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/sheet-thumbnail-BRUe5j22.png)![Sheet](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/sheet-thumbnail-BRUe5j22.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/sheet)

[Sheet](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/sheet)

[Display supplementary content in a panel that slides in from the edge of the screen.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/sheet)

[![Tooltip](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/tooltip-thumbnail-BZcNmLKG.png)![Tooltip](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/tooltip-thumbnail-BZcNmLKG.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/tooltip)

[Tooltip](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/tooltip)

[Display additional information in an overlay on hover or focus.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/tooltip)

## Typography and content

Typography and content components present textual information with appropriate hierarchy, emphasis, and styling for clear communication.

[![Disclosure](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/disclosure-thumbnail-VjA7wyX5.png)![Disclosure](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/disclosure-thumbnail-VjA7wyX5.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/disclosure)

[Disclosure](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/disclosure)

[Display a collapsible section that users can expand to reveal additional content.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/disclosure)

[![Heading](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/heading-thumbnail-BihHp9Vx.png)![Heading](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/heading-thumbnail-BihHp9Vx.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/heading)

[Heading](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/heading)

[Render hierarchical titles to communicate the structure and organization of page content.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/heading)

[![HeadingGroup](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/headinggroup-thumbnail-nZK8XUyJ.png)![HeadingGroup](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/headinggroup-thumbnail-nZK8XUyJ.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/headinggroup)

[Heading​Group](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/headinggroup)

[Group headings with consistent spacing and hierarchy.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/headinggroup)

[![List](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/list-thumbnail-BkisObB0.png)![List](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/list-thumbnail-BkisObB0.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/list)

[List](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/list)

[Display a list of items with consistent formatting.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/list)

[![ListItem](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/listitem-thumbnail-BcwEE40O.png)![ListItem](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/listitem-thumbnail-BcwEE40O.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/listitem)

[List​Item](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/listitem)

[Define an item within a list.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/listitem)

[![SkeletonText](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/skeletontext-thumbnail-BANT6RYn.png)![SkeletonText](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/skeletontext-thumbnail-BANT6RYn.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/skeletontext)

[Skeleton​Text](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/skeletontext)

[Display a placeholder for text content while data is loading.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/skeletontext)

[![SkeletonTextBlock](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/skeletontextblock-thumbnail-i4xNvlQQ.png)![SkeletonTextBlock](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/skeletontextblock-thumbnail-i4xNvlQQ.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/skeletontextblock)

[Skeleton​Text​Block](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/skeletontextblock)

[Display a placeholder for a block of text content while data is loading.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/skeletontextblock)

[![Tag](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/tag-thumbnail-B6TOXuLq.png)![Tag](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/tag-thumbnail-B6TOXuLq.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/tag)

[Tag](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/tag)

[Display a keyword or label for categorizing content.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/tag)

[![Text](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/text-thumbnail-9N4kW_B5.png)![Text](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/text-thumbnail-9N4kW_B5.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/text)

[Text](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/text)

[Display text with specific visual styles or tones.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/text)

[![TextBlock](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/textblock-thumbnail-C4B9zAt3.png)![TextBlock](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/textblock-thumbnail-C4B9zAt3.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/textblock)

[Text​Block](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/textblock)

[Display blocks of text that can contain inline elements.](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/textblock)

***