---
title: UI API
description: The API for interacting with UI.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/target-apis/platform-apis/ui-api
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/target-apis/platform-apis/ui-api.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/api/customer-account-ui-extensions/2025-10/upgrading-to-2025-10) to upgrade your extension.

# UI API

The API for interacting with UI.

## StandardApi

The base API object provided to this and other `customer-account` extension targets.

* **ui**

  **Ui**

  **required**

  Triggers platform-level UI interactions, such as displaying toast notifications. Use this to show success or error messages in response to customer actions.

### Ui

Triggers platform-level UI interactions from your extension, such as displaying toast notifications. Use the UI API to show success or error messages in response to customer actions.

* forceDataRefresh

  Refresh data so the surrounding information on the page is updated. The \`content\` string will appear in a toast message after refresh, to confirm the action was successful. To request access to this API: 1. Go to your partner dashboard and click \*\*Apps\*\*. 2. Select the app you need to request access for. 3. Click \*\*API access\*\*. 4. Under \*\*Access force data refresh\*\*, click \*\*Request access\*\*.

  ```ts
  (content: string) => Promise<void>
  ```

* overlay

  An overlay is a contextual element on top of the main interface that provides additional information or functionality.

  ```ts
  { close(overlayId: string): void; }
  ```

* toast

  The Toast API displays a non-disruptive message that displays at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action. How to use: - Use toasts to confirm successful actions. - Aim for two words. - Use noun + past tense verb format. For example, \\\`Changes saved\\\`. For errors, or information that needs to persist on the page, use a \[banner]\(/docs/api/customer-account-ui-extensions/2025-07/components/feedback/banner) component.

  ```ts
  { show(content: string): void; }
  ```

Examples

### Examples

* #### Displaying a toast

  ##### Description

  Here is an example of using the \`Toast.show\` method to display a message to the customer indicating that their action to select a pickup address was successful.

  ##### React

  ```jsx
  import React, {useState} from 'react';
  import {
    reactExtension,
    useApi,
    Button,
    Select,
    Modal,
  } from '@shopify/ui-extensions-react/customer-account';

  export default reactExtension('customer-account.page.render', () => (
    <Extension />
  ));
  function Extension() {
    const [selectedAddress, setSelectedAddress] = useState();
    const [pickupAddress, setPickupAddress] = useState();
    const {i18n, ui} = useApi<'customer-account.page.render'>();
    return (
      <Modal>
        <Select
          onChange={(value) => {
            setSelectedAddress(value);
          }}
          label="Pickup Address Options"
          value="1"
          options={[
            {
              value: '1',
              label: 'Address 1',
            },
            {
              value: '2',
              label: 'Address 2',
            },
            {
              value: '3',
              label: 'Address 3',
            },
            {
              value: '4',
              label: 'Address 4',
            },
          ]}
        />
        <Button
          onPress={() => {
            setPickupAddress(selectedAddress);
            ui.toast.show('Selection saved');
          }}
        >
          Save
        </Button>
      </Modal>
    );
  }
  ```