---
title: Device API
description: >-
  The Device API allows the UI Extension to retrieve device information
  including the device name and ID.
api_version: 2025-04
api_name: pos-ui-extensions
source_url:
  html: 'https://shopify.dev/docs/api/pos-ui-extensions/2025-04/apis/device-api'
  md: 'https://shopify.dev/docs/api/pos-ui-extensions/2025-04/apis/device-api.md'
---

# Device APIAPIs

The Device API allows the UI Extension to retrieve device information including the device name and ID.

## DeviceApi

* getDeviceId

  () => Promise\<string>

  required

  The string ID of the device

* isTablet

  () => Promise\<boolean>

  required

  Whether the device is a tablet

* name

  string

  required

  The name of the device

## Examples

Examples of using the Device API.

Retrieve name of the device.

Retrieve the ID of the device.

Check if device is a tablet.

### Examples

* #### Retrieve name of the device.

  ##### React

  ```tsx
  import React, { useState } from 'react';
  import {
    Tile,
    useApi,
    reactExtension,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile
        title='My App'
        subtitle={api.device.name}
        enabled
      />
    );
  };

  export default reactExtension('pos.home.tile.render', () => <SmartGridTile />);
  ```

  ##### TS

  ```ts
  import {
    Tile,
    Screen,
    Navigator,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension('pos.home.tile.render', (root, api) => {
    const tile = root.createComponent(Tile, {
      title: 'My App',
      subtitle: api.device.name,
      enabled: true,
    });

    root.append(tile);
  });
  ```

* #### Retrieve the ID of the device.

  ##### React

  ```tsx
  import React, { useState } from 'react';
  import {
    Tile,
    useApi,
    reactExtension,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile
        title='My App'
        subtitle={api.device.getDeviceId()}
        enabled
      />
    );
  };

  export default reactExtension('pos.home.tile.render', () => <SmartGridTile />);
  ```

  ##### TS

  ```ts
  import {
    Tile,
    Screen,
    Navigator,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension('pos.home.tile.render', (root, api) => {
    const tile = root.createComponent(Tile, {
      title: 'My App',
      subtitle: api.device.getDeviceId(),
      enabled: true,
    });

    root.append(tile);
  });
  ```

* #### Check if device is a tablet.

  ##### React

  ```tsx
  import React, { useState } from 'react';
  import {
    Tile,
    useApi,
    reactExtension,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridTile = () => {
    const api = useApi<'pos.home.tile.render'>();

    return (
      <Tile
        title='My App'
        enabled={api.device.isTablet()}
      />
    );
  };

  export default reactExtension('pos.home.tile.render', () => <SmartGridTile />);
  ```

  ##### TS

  ```ts
  import {
    Tile,
    Screen,
    Navigator,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension('pos.home.tile.render', (root, api) => {
    const tile = root.createComponent(Tile, {
      title: 'My App',
      enabled: api.device.isTablet(),
    });

    root.append(tile);
  });
  ```