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

# Web components

Web components are the UI building blocks that you use to display data and trigger API functions. These components are native UI elements that 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).

Your [target](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/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.

***

## Upgrading your extension

The latest version of customer account UI extensions adds new components and target APIs, and replaces checkout metafields with order metafields. Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) for the steps to upgrade your extension.

## 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-10/button-thumbnail-BfZnAuEe.png)![Button](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/button-thumbnail-BfZnAuEe.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/button)

[Button](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-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/latest/web-components/actions/button)

[![Button group](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-10/buttongroup-thumbnail-DnErQh13.png)![Button group](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-10/buttongroup-thumbnail-DnErQh13.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/button-group)

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

[Display multiple related buttons in a single layout.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/button-group)

[![Clickable](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/clickable-thumbnail-BRMP8BHA.png)![Clickable](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/clickable-thumbnail-BRMP8BHA.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/clickable)

[Clickable](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/clickable)

[Make any content interactive with customizable styling such as backgrounds, padding, or borders.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/clickable)

[![Clickable chip](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/clickable-chip-thumbnail-Ba_IS1uS.png)![Clickable chip](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/clickable-chip-thumbnail-Ba_IS1uS.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/clickable-chip)

[Clickable chip](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/clickable-chip)

[Display interactive filters or tags that can be clicked or removed.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/clickable-chip)

[![Clipboard item](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/clipboard-basic-Ctmy24fF.png)![Clipboard item](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/clipboard-basic-Ctmy24fF.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/clipboard-item)

[Clipboard item](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/clipboard-item)

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

[![Customer account action](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-10/customeraccountaction-thumbnail-BTMb0Gdk.png)![Customer account action](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-10/customeraccountaction-thumbnail-BTMb0Gdk.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/customer-account-action)

[Customer account action](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/customer-account-action)

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

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

[Link](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-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/latest/web-components/actions/link)

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

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

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

[![Press button](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/press-button-thumbnail-BsATZaAo.png)![Press button](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/press-button-thumbnail-BsATZaAo.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/press-button)

[Press button](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/press-button)

[Make any content interactive and trigger actions when pressed.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/press-button)

## Feedback and status indicators

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

[![Announcement](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/announcement-thumbnail-DARYr6K-.png)![Announcement](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/announcement-thumbnail-DARYr6K-.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/announcement)

[Announcement](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/announcement)

[Communicate important, time-sensitive information to users.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/announcement)

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

[Badge](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-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/latest/web-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-10/banner-thumbnail-CGI0HHQn.png)![Banner](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/banner-thumbnail-CGI0HHQn.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/banner)

[Banner](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-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/latest/web-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-10/progress-thumbnail-B43fiJD9.png)![Progress](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/progress-thumbnail-B43fiJD9.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/progress)

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

[Display progress through a series of steps or stages.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-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-10/spinner-thumbnail-BDWF5bu8.png)![Spinner](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/spinner-thumbnail-BDWF5bu8.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/spinner)

[Spinner](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-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/latest/web-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-10/checkbox-thumbnail-Dc8KbyEv.png)![Checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/checkbox-thumbnail-Dc8KbyEv.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/checkbox)

[Checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-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/latest/web-components/forms/checkbox)

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

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

[Present multiple options for single or multiple selections.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/choice-list)

[![Consent checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/consent-checkbox-thumbnail-Bobrtc7r.png)![Consent checkbox](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/consent-checkbox-thumbnail-Bobrtc7r.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/consent-checkbox)

[Consent checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/consent-checkbox)

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

[![Consent phone field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/consent-phone-field-thumbnail-ixRPV86k.png)![Consent phone field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/consent-phone-field-thumbnail-ixRPV86k.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/consent-phone-field)

[Consent phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/consent-phone-field)

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

[![Date field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/date-field-thumbnail-T6C2Li4o.png)![Date field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/date-field-thumbnail-T6C2Li4o.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/date-field)

[Date field](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/date-field)

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

[![Date picker](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/date-picker-thumbnail-BqAvVsRh.png)![Date picker](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/date-picker-thumbnail-BqAvVsRh.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/date-picker)

[Date picker](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/date-picker)

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

[![Drop zone](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/drop-zone-thumbnail-DaIYV0G2.png)![Drop zone](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/drop-zone-thumbnail-DaIYV0G2.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/drop-zone)

[Drop zone](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/drop-zone)

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

[![Email field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/email-field-thumbnail-D010x2qt.png)![Email field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/email-field-thumbnail-D010x2qt.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/email-field)

[Email field](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/email-field)

[Capture email address input with built-in validation.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/email-field)

[![Form](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components/form-B0kMehyX.png)![Form](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components/form-B0kMehyX.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/form)

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

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

[![Money field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/money-field-thumbnail-Bb8GnkaJ.png)![Money field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/money-field-thumbnail-Bb8GnkaJ.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/money-field)

[Money field](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/money-field)

[Capture monetary values with built-in currency formatting and validation.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/money-field)

[![Number field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/number-field-thumbnail-CYoZRuz8.png)![Number field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/number-field-thumbnail-CYoZRuz8.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/number-field)

[Number field](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/number-field)

[Capture numeric input with built-in validation.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/number-field)

[![Password field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/password-field-thumbnail-CNB0zR71.png)![Password field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/password-field-thumbnail-CNB0zR71.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/password-field)

[Password field](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/password-field)

[Securely capture sensitive information.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/password-field)

[![Phone field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/phone-field-thumbnail-DIk-2zce.png)![Phone field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/phone-field-thumbnail-DIk-2zce.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/phone-field)

[Phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/phone-field)

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

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

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

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

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

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

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

[![Text area](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/text-area-thumbnail-C05TfnLG.png)![Text area](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/text-area-thumbnail-C05TfnLG.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/text-area)

[Text area](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/text-area)

[Capture longer text content with a multi-line, resizable text input area.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/text-area)

[![Text field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/text-field-thumbnail-DU_Zc72d.png)![Text field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/text-field-thumbnail-DU_Zc72d.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/text-field)

[Text field](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/text-field)

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

[![URL field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/url-field-thumbnail-D-kdH9F9.png)![URL field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/url-field-thumbnail-D-kdH9F9.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/url-field)

[URL field](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/url-field)

[Capture URLs with built-in formatting and validation.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/forms/url-field)

## Layout and structure

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

[![Box](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/box-thumbnail-ccy-RH7a.png)![Box](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/box-thumbnail-ccy-RH7a.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/box)

[Box](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/box)

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

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

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

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

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

[Grid](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-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/latest/web-components/layout-and-structure/grid)

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

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

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

[![Query container](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components/page-ZjQ0PRv6.png)![Query container](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components/page-ZjQ0PRv6.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/query-container)

[Query container](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/query-container)

[Manage loading and error states for data queries.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/query-container)

[![Scroll box](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/scroll-box-thumbnail-11IGxt0S.png)![Scroll box](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/scroll-box-thumbnail-11IGxt0S.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/scroll-box)

[Scroll box](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/scroll-box)

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

[![Section](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-10/section-thumbnail-BOUkhrI7.png)![Section](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-10/section-thumbnail-BOUkhrI7.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/section)

[Section](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/section)

[Group related content into clearly-defined thematic areas.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/section)

[![Stack](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/stack-thumbnail-CGHqNUgm.png)![Stack](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/stack-thumbnail-CGHqNUgm.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/stack)

[Stack](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/stack)

[Organize elements horizontally or vertically along the block or inline axis.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/stack)

## 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-10/avatar-thumbnail-2UefS8BD.png)![Avatar](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-10/avatar-thumbnail-2UefS8BD.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/media-and-visuals/avatar)

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

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

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

[Icon](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-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/latest/web-components/media-and-visuals/icon)

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

[Image](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-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/latest/web-components/media-and-visuals/image)

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

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

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

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

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

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

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

[Payment icon](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/media-and-visuals/payment-icon)

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

[![Product thumbnail](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/product-thumbnail-thumbnail-CmnlDrNe.png)![Product thumbnail](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/product-thumbnail-thumbnail-CmnlDrNe.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/media-and-visuals/product-thumbnail)

[Product thumbnail](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/media-and-visuals/product-thumbnail)

[Display small preview images representing products.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/media-and-visuals/product-thumbnail)

[![QR code](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/qr-code-thumbnail-DNJ5WgA-.png)![QR code](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/qr-code-thumbnail-DNJ5WgA-.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/media-and-visuals/qr-code)

[QR code](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/media-and-visuals/qr-code)

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

## 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-10/modal-thumbnail-D5PNMNOH.png)![Modal](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/modal-thumbnail-D5PNMNOH.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/overlays/modal)

[Modal](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-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/latest/web-components/overlays/modal)

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

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

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

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

[Sheet](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-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/latest/web-components/overlays/sheet)

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

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

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

## Typography and content

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

[![Abbreviation](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/abbreviation-thumbnail-BiXI2eyD.png)![Abbreviation](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/abbreviation-thumbnail-BiXI2eyD.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/abbreviation)

[Abbreviation](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/abbreviation)

[Display abbreviated text with a tooltip showing the full term on hover.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/abbreviation)

[![Chip](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/chip-thumbnail-Dm3qc2FJ.png)![Chip](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/chip-thumbnail-Dm3qc2FJ.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/chip)

[Chip](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/chip)

[Display user-supplied keywords that label, organize, and categorize objects.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/chip)

[![Details](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/details-thumbnail-ottKwVSH.png)![Details](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/details-thumbnail-ottKwVSH.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/details)

[Details](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/details)

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

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

[Heading](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-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/latest/web-components/typography-and-content/heading)

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

[Ordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/ordered-list)

[Display a numbered list of items.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/ordered-list)

[![Paragraph](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/paragraph-thumbnail-DljjYJmu.png)![Paragraph](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/paragraph-thumbnail-DljjYJmu.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/paragraph)

[Paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/paragraph)

[Display blocks of text that can contain inline elements such as buttons, links, or emphasized text.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/paragraph)

[![Skeleton paragraph](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/skeleton-paragraph-thumbnail-C_eH5TVX.png)![Skeleton paragraph](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/skeleton-paragraph-thumbnail-C_eH5TVX.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/skeleton-paragraph)

[Skeleton paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/skeleton-paragraph)

[Display a placeholder for paragraph content while data is loading.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/skeleton-paragraph)

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

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

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

[![Time](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/time-thumbnail-BInsRCaK.png)![Time](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/time-thumbnail-BInsRCaK.png)](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/time)

[Time](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/time)

[Display dates and times in a localized format.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/time)

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

[Unordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/unordered-list)

[Display a bulleted list of items.](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/unordered-list)

***