# UI
The API for interacting with the extension’s UI.
### 

```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>
  );
}

```


## StandardApi
The base API object provided to `purchase` extension targets.
### Docs_Standard_Ui

### ui
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/2024-10/components/overlays/modal), [Sheet](/docs/api/checkout-ui-extensions/2024-10/components/overlays/sheet) and [Popover](/docs/api/checkout-ui-extensions/2024-10/components/overlays/popover).
### Overlay

### close
Closes the overlay with the given ID.
## Related
- [Targets](/docs/api/checkout-ui-extensions/targets)
- [Components](/docs/api/checkout-ui-extensions/components)
- [Configuration](/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)
## Examples
The API for interacting with the extension’s UI.
### 

### 

```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>
  );
}

```

```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);
  },
);

```