---
title: UI
description: The API for interacting with the extension’s UI.
api_version: 2025-07
api_name: checkout-ui-extensions
source_url:
  html: 'https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/apis/ui'
  md: 'https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/apis/ui.md'
---

# UI

The API for interacting with the extension’s UI.

## StandardApi

The base API object provided to `purchase` extension targets.

* ui

  Ui

  required

  Methods to interact with the extension’s UI.

### Ui

* overlay

  Allows the extension to close an overlay programmatically. Supported overlay components are \[Modal]\(/docs/api/checkout-ui-extensions/2025-07/components/overlays/modal), \[Sheet]\(/docs/api/checkout-ui-extensions/2025-07/components/overlays/sheet) and \[Popover]\(/docs/api/checkout-ui-extensions/2025-07/components/overlays/popover).

  ```ts
  Overlay
  ```

```ts
export interface Ui {
  /**
   * Allows the extension to close an overlay programmatically.
   *
   * Supported overlay components are [Modal](/docs/api/checkout-ui-extensions/2025-07/components/overlays/modal), [Sheet](/docs/api/checkout-ui-extensions/2025-07/components/overlays/sheet) and [Popover](/docs/api/checkout-ui-extensions/2025-07/components/overlays/popover).
   */
  overlay: Overlay;
}
```

### Overlay

* close

  Closes the overlay with the given ID.

  ```ts
  (overlayId: string) => void
  ```

```ts
interface Overlay {
  /**
   * Closes the overlay with the given ID.
   */
  close(overlayId: string): void;
}
```

### Examples

* ####

  ##### React

  ```jsx
  import {
    reactExtension,
    useApi,
    Button,
    Link,
    Modal,
    TextBlock,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );

  function Extension() {
    const {ui} = useApi();

    return (
      <Link
        overlay={
          <Modal
            id="my-modal"
            padding
            title="Return policy"
          >
            <TextBlock>
              We have a 30-day return policy.
            </TextBlock>
            <Button
              onPress={() =>
                ui.overlay.close('my-modal')
              }
            >
              Close
            </Button>
          </Modal>
        }
      >
        Return policy
      </Link>
    );
  }
  ```

## Examples

Examples

### Examples

* ####

  ##### React

  ```jsx
  import {
    reactExtension,
    useApi,
    Button,
    Link,
    Modal,
    TextBlock,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );

  function Extension() {
    const {ui} = useApi();

    return (
      <Link
        overlay={
          <Modal
            id="my-modal"
            padding
            title="Return policy"
          >
            <TextBlock>
              We have a 30-day return policy.
            </TextBlock>
            <Button
              onPress={() =>
                ui.overlay.close('my-modal')
              }
            >
              Close
            </Button>
          </Modal>
        }
      >
        Return policy
      </Link>
    );
  }
  ```

  ##### JavaScript

  ```js
  import {
    extension,
    Button,
    Link,
    Modal,
    TextBlock,
  } from '@shopify/ui-extensions/checkout';

  export default extension(
    'purchase.checkout.block.render',
    (root, {ui}) => {
      const modalFragment = root.createFragment();
      const modal = root.createComponent(
        Modal,
        {
          id: 'my-modal',
          padding: true,
          title: 'Return policy',
        },
        root.createComponent(
          TextBlock,
          {},
          'We have a 30-day return policy.',
        ),
        root.createComponent(
          Button,
          {
            onPress: () =>
              ui.overlay.close('my-modal'),
          },
          'Close',
        ),
      );
      modalFragment.appendChild(modal);

      const link = root.createComponent(
        Link,
        {
          overlay: modalFragment,
        },
        'Return policy',
      );

      root.appendChild(link);
    },
  );
  ```

## Related

[Reference - Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)

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

[Reference - Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)

[Learn - Tutorials](https://shopify.dev/apps/checkout)