--- title: Upgrading to 2025-10 description: This guide describes how to upgrade your customer account UI extension to API version `2025-10` and adopt [Polaris](/beta/next-gen-dev-platform/polaris) web components. api_version: 2025-10 api_name: customer-account-ui-extensions source_url: html: https://shopify.dev/docs/api/customer-account-ui-extensions/latest/upgrading-to-2025-10 md: https://shopify.dev/docs/api/customer-account-ui-extensions/latest/upgrading-to-2025-10.md --- # Upgrading to 2025-10 This guide describes how to upgrade your customer account UI extension to API version `2025-10` and adopt [Polaris](https://shopify.dev/beta/next-gen-dev-platform/polaris) web components. *** ## Update API version Set the API version to `2025-10` in `shopify.extension.toml` to use Polaris web components. ### Examples * #### shopify.extension.toml ##### shopify.extension.toml ```toml api_version = "2025-10" [[extensions]] name = "your-extension" handle = "your-extension" type = "ui_extension" # Contents of your existing file... ``` ## Adjust package dependencies As of `2025-10`, Shopify recommends Preact for UI extensions. Update the dependencies in your `package.json` file and re-install. New dependencies with Preact Previous dependencies with React Previous dependencies with JavaScript ### Examples * #### New dependencies with Preact ##### package.json ```json { "dependencies": { "preact": "^10.10.x", "@preact/signals": "^2.3.x", "@shopify/ui-extensions": "2025.10.x" } } ``` ## TypeScript Configuration Get full IntelliSense and auto-complete support by adding a config file for your extension at `extensions/{extension-name}/tsconfig.json`. You do **not** need to change your app's root `tsconfig.json` file. New tsconfig.json Old tsconfig.json ### Examples * #### New tsconfig.json ##### tsconfig.json ```json { "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact", "target": "ES2020", "checkJs": true, "allowJs": true, "moduleResolution": "node", "esModuleInterop": true } } ``` ## Upgrade the Shopifiy CLI The new CLI adds supoort for building 2025-10 extensions. The `shopify app dev` command runs your app and also generates a `shopify.d.ts` file in your extension directory, adding support for the new global `shopify` object. ### Examples * #### Support new global shopify object ##### CLI ```bash # Upgrade to latest version of the CLI npm install -g @shopify/cli # Run the app to generate the type definition file shopify app dev ``` ## Optional ESLint configuration If your app is using ESLint, update your configuration to include the new global `shopify` object. ### Examples * #### .eslintrc.cjs ##### Default ```js module.exports = { globals: { shopify: 'readonly', }, }; ``` ## Migrate API calls Instead of accessing APIs from a callback parameter or React hook, access them from the global `shopify` object. Here's an example of migrating the Cart Line Target API call. New API calls in Preact Previous API calls in React Previous API calls in JavaScript ### Examples * #### New API calls in Preact ##### Preact ```tsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; export default function extension() { render(, document.body); } function Extension() { return ( Line item title: {shopify.target.value.merchandise.title} ); } ``` ## Migrate to Polaris web components Polaris web components are exposed as custom HTML elements. Update your React or JavaScript components to custom elements. New components in Preact Previous components in React Previous components in JavaScript ### Examples * #### New components in Preact ##### Preact ```tsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; export default function extension() { render(, document.body); } function Extension() { return ( Save ); } ``` ## Mapping Legacy components to Polaris web | **Legacy Component** | **Polaris Web Component** | **Migration Notes** | | - | - | - | | `Avatar` | [Avatar](https://shopify.dev/api/customer-account-ui-extensions/polaris-web-components/media/avatar) | Available today | | | [ButtonGroup](https://shopify.dev/api/customer-account-ui-extensions/polaris-web-components/actions/buttongroup) | Available today | | `Card` | [Section](https://shopify.dev/api/customer-account-ui-extensions/polaris-web-components/structure/section) | Available today | | `CustomerAccountAction` | [CustomerAccountAction](https://shopify.dev/api/customer-account-ui-extensions/polaris-web-components/actions/customeraccountaction) | Available today | | `ImageGroup` | [ImageGroup](https://shopify.dev/api/customer-account-ui-extensions/polaris-web-components/media/imagegroup) | Available today | | `Menu` | [Menu](https://shopify.dev/api/customer-account-ui-extensions/polaris-web-components/actions/menu) | Available today | | `Page` | [Page](https://shopify.dev/api/customer-account-ui-extensions/polaris-web-components/structure/page) | Available today | | `ResourceItem` | | Removed. Use [Section](https://shopify.dev/api/customer-account-ui-extensions/polaris-web-components/structure/section) | ## Additional components In addition to the components above, you can also use Polaris web components in the Checkout library to build customer account UI extensions. [More Polaris web components - Checkout components](https://shopify.dev/docs/api/checkout-ui-extensions/polaris-web-components)