@shopify/ui-extensions 2025.7.2 → 2025.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/ui-extensions",
-  "version": "2025.7.2",
+  "version": "2025.8.0",
   "scripts": {
     "docs:admin": "bash ./docs/surfaces/admin/build-docs.sh",
     "docs:admin:dev": "nodemon --watch src/surfaces/admin -e ts,tsx,json --exec 'yarn docs:admin'",
@@ -77,6 +77,11 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org/"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Shopify/ui-extensions.git",
+    "directory": "packages/ui-extensions"
+  },
   "files": [
     "build",
     "src",

package/src/surfaces/admin/api/action/action.doc.ts

@@ -13,8 +13,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'ActionExtensionApi',
     },
   ],
-  category: 'API',
-  subCategory: 'Target APIs',
+  category: 'Target APIs',
+  subCategory: 'Core APIs',
   related: [],
 };
 

package/src/surfaces/admin/api/block/block.doc.ts

@@ -13,8 +13,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'BlockExtensionApi',
     },
   ],
-  category: 'API',
-  subCategory: 'Target APIs',
+  category: 'Target APIs',
+  subCategory: 'Core APIs',
   related: [],
 };
 

package/src/surfaces/admin/api/checkout-rules/validation-settings.doc.ts

@@ -18,8 +18,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'ValidationData',
     },
   ],
-  category: 'API',
-  subCategory: 'Target APIs',
+  category: 'Target APIs',
+  subCategory: 'Contextual APIs',
   related: [],
 };
 

package/src/surfaces/admin/api/customer-segment-template/customer-segment-template.doc.ts

@@ -1,7 +1,7 @@
 import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
-  name: 'CustomerSegmentTemplate Extension API',
+  name: 'Customer Segment Template Extension API',
   description:
     'This API is available to all customer segment template extension types.',
   isVisualComponent: false,
@@ -13,8 +13,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'CustomerSegmentTemplateApi',
     },
   ],
-  category: 'API',
-  subCategory: 'Target APIs',
+  category: 'Target APIs',
+  subCategory: 'Contextual APIs',
   related: [],
 };
 

package/src/surfaces/admin/api/discount-function-settings/discount-function-settings.doc.ts

@@ -19,8 +19,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'DiscountFunctionSettingsData',
     },
   ],
-  category: 'API',
-  subCategory: 'Target APIs',
+  category: 'Target APIs',
+  subCategory: 'Contextual APIs',
   related: [],
 };
 

package/src/surfaces/admin/api/order-routing-rule/order-routing-rule.doc.ts

@@ -0,0 +1,21 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Order Routing Rule API',
+  description:
+    'This API is available to extensions that render in the order routing settings using the `admin.settings.order-routing-rule.render` target.',
+  isVisualComponent: false,
+  type: 'API',
+  definitions: [
+    {
+      title: 'OrderRoutingRuleApi',
+      description: '',
+      type: 'OrderRoutingRuleApi',
+    },
+  ],
+  category: 'Target APIs',
+  subCategory: 'Contextual APIs',
+  related: [],
+};
+
+export default data;

package/src/surfaces/admin/api/picker/picker.doc.ts

@@ -1,14 +1,15 @@
 import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
-  name: 'Picker',
+  name: 'Picker API',
   overviewPreviewDescription: 'Opens a Picker in your app',
   description: `The Picker API provides a search-based interface to help users find and select one or more resources that you provide, such as product reviews, email templates, or subscription options, and then returns the selected resource ids to your extension.
 
 > Tip:
 > If you are picking products, product variants, or collections, you should use the [Resource Picker](resource-picker) API instead.`,
   isVisualComponent: true,
-  category: 'API',
+  category: 'Target APIs',
+  subCategory: 'Utility APIs',
   thumbnail: 'picker.png',
   requires:
     'an Admin [block](/docs/api/admin-extensions/unstable/extension-targets#block-locations), [action](/docs/api/admin-extensions/unstable/extension-targets#action-locations), or [print](/docs/api/admin-extensions/unstable/extension-targets#print-locations) extension.',
@@ -102,7 +103,7 @@ const data: ReferenceEntityTemplateSchema = {
   },
   related: [
     {
-      name: 'Resource Picker',
+      name: 'Resource Picker API',
       subtitle: 'APIs',
       url: 'resource-picker',
       type: 'pickaxe-3',

package/src/surfaces/admin/api/print-action/print-action.doc.ts

@@ -13,8 +13,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'PrintActionExtensionApi',
     },
   ],
-  category: 'API',
-  subCategory: 'Target APIs',
+  category: 'Target APIs',
+  subCategory: 'Core APIs',
   related: [],
 };
 

package/src/surfaces/admin/api/product-configuration/product-details-configuration.doc.ts

@@ -0,0 +1,21 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Product Details Configuration API',
+  description:
+    'This API is available to product configuration extensions that render on the product details page. See the [tutorial](/docs/apps/selling-strategies/bundles/product-config) for more information.',
+  isVisualComponent: false,
+  type: 'API',
+  definitions: [
+    {
+      title: 'ProductDetailsConfigurationApi',
+      description: '',
+      type: 'ProductDetailsConfigurationApi',
+    },
+  ],
+  category: 'Target APIs',
+  subCategory: 'Contextual APIs',
+  related: [],
+};
+
+export default data;

package/src/surfaces/admin/api/product-configuration/product-variant-details-configuration.doc.ts

@@ -0,0 +1,21 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Product Variant Details Configuration API',
+  description:
+    'This API is available to product configuration extensions that render on the product variant details page. See the [tutorial](/docs/apps/selling-strategies/bundles/product-config) for more information.',
+  isVisualComponent: false,
+  type: 'API',
+  definitions: [
+    {
+      title: 'ProductVariantDetailsConfigurationApi',
+      description: '',
+      type: 'ProductVariantDetailsConfigurationApi',
+    },
+  ],
+  category: 'Target APIs',
+  subCategory: 'Contextual APIs',
+  related: [],
+};
+
+export default data;

package/src/surfaces/admin/api/purchase-options-card-action/purchase-options-card-action.doc.ts

@@ -0,0 +1,21 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Purchase Options Card Configuration API',
+  description:
+    'This API is available to action extensions that render in the purchase options card on product and product variant details pages when selling plan groups are present.',
+  isVisualComponent: false,
+  type: 'API',
+  definitions: [
+    {
+      title: 'PurchaseOptionsCardConfigurationApi',
+      description: '',
+      type: 'PurchaseOptionsCardConfigurationApi',
+    },
+  ],
+  category: 'Target APIs',
+  subCategory: 'Contextual APIs',
+  related: [],
+};
+
+export default data;

package/src/surfaces/admin/api/resource-picker/resource-picker.doc.ts

@@ -1,7 +1,7 @@
 import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
-  name: 'Resource Picker',
+  name: 'Resource Picker API',
   overviewPreviewDescription: 'Opens a Resource Picker in your app',
   description: `The Resource Picker API provides a search-based interface to help users find and select one or more products, collections, or product variants, and then returns the selected resources to your app. Both the app and the user must have the necessary permissions to access the resources selected.
 
@@ -9,7 +9,8 @@ const data: ReferenceEntityTemplateSchema = {
 > If you are picking app resources such as product reviews, email templates, or subscription options, you should use the [Picker](picker) API instead.
 `,
   isVisualComponent: true,
-  category: 'API',
+  category: 'Target APIs',
+  subCategory: 'Utility APIs',
   thumbnail: 'resource-picker.png',
   requires:
     'an Admin [block](/docs/api/admin-extensions/unstable/extension-targets#block-locations), [action](/docs/api/admin-extensions/unstable/extension-targets#action-locations), or [print](/docs/api/admin-extensions/unstable/extension-targets#print-locations) extension.',
@@ -152,7 +153,7 @@ const data: ReferenceEntityTemplateSchema = {
   ],
   related: [
     {
-      name: 'Picker',
+      name: 'Picker API',
       subtitle: 'APIs',
       url: 'picker',
       type: 'pickaxe-3',

package/src/surfaces/admin/api/should-render/should-render.doc.ts

@@ -1,7 +1,7 @@
 import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
-  name: 'ShouldRender API',
+  name: 'Should Render API',
   description:
     'This API controls the render state of an admin action extension. Learn more in the <a href="https://shopify.dev/docs/apps/build/admin/actions-blocks/hide-extensions?extension=react#hide-an-admin-action">admin extensions tutorial</a>.',
   isVisualComponent: false,
@@ -13,8 +13,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'ShouldRenderApi',
     },
   ],
-  category: 'API',
-  subCategory: 'Target APIs',
+  category: 'Target APIs',
+  subCategory: 'Utility APIs',
   related: [],
 };
 

package/src/surfaces/admin/api/standard/standard.doc.ts

@@ -12,8 +12,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'StandardApi',
     },
   ],
-  category: 'API',
-  subCategory: 'Target APIs',
+  category: 'Target APIs',
+  subCategory: 'Core APIs',
   related: [],
 };
 

package/src/surfaces/admin/components/AdminAction/AdminAction.doc.ts

@@ -15,8 +15,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'AdminActionProps',
     },
   ],
-  category: 'Components',
-  subCategory: 'Other',
+  category: 'UI components',
+  subCategory: 'Settings and templates',
   defaultExample: {
     image: 'adminaction-default.png',
     codeblock: {

package/src/surfaces/admin/components/AdminBlock/AdminBlock.doc.ts

@@ -15,8 +15,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'AdminBlockProps',
     },
   ],
-  category: 'Components',
-  subCategory: 'Other',
+  category: 'UI components',
+  subCategory: 'Settings and templates',
   defaultExample: {
     image: 'adminblock-default.png',
     codeblock: {

package/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.doc.ts

@@ -15,8 +15,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'AdminPrintActionProps',
     },
   ],
-  category: 'Components',
-  subCategory: 'Other',
+  category: 'UI components',
+  subCategory: 'Settings and templates',
   defaultExample: {
     image: 'adminprintaction-default.png',
     codeblock: {

package/src/surfaces/admin/components/Badge/Badge.doc.ts

@@ -15,8 +15,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'BadgeProps',
     },
   ],
-  category: 'Components',
-  subCategory: 'Titles and text',
+  category: 'UI components',
+  subCategory: 'Feedback and status indicators',
   defaultExample: {
     image: 'badge-default.png',
     codeblock: {

package/src/surfaces/admin/components/Banner/Banner.doc.ts

@@ -15,8 +15,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'BannerProps',
     },
   ],
-  category: 'Components',
-  subCategory: 'Titles and text',
+  category: 'UI components',
+  subCategory: 'Feedback and status indicators',
   defaultExample: {
     image: 'banner-default.png',
     codeblock: {

package/src/surfaces/admin/components/BlockStack/BlockStack.doc.ts

@@ -15,8 +15,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'BlockStackProps',
     },
   ],
-  category: 'Components',
-  subCategory: 'Structure',
+  category: 'UI components',
+  subCategory: 'Layout and structure',
   defaultExample: {
     image: 'blockstack-default.png',
     codeblock: {

package/src/surfaces/admin/components/Box/Box.doc.ts

@@ -15,8 +15,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'BoxProps',
     },
   ],
-  category: 'Components',
-  subCategory: 'Structure',
+  category: 'UI components',
+  subCategory: 'Layout and structure',
   defaultExample: {
     image: 'box-default.png',
     codeblock: {

package/src/surfaces/admin/components/Button/Button.doc.ts

@@ -15,7 +15,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'ButtonProps',
     },
   ],
-  category: 'Components',
+  category: 'UI components',
   subCategory: 'Actions',
   defaultExample: {
     image: 'button-default.png',

package/src/surfaces/admin/components/Checkbox/Checkbox.doc.ts

@@ -15,7 +15,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'CheckboxProps',
     },
   ],
-  category: 'Components',
+  category: 'UI components',
   subCategory: 'Forms',
   defaultExample: {
     image: 'checkbox-default.png',

package/src/surfaces/admin/components/ChoiceList/ChoiceList.doc.ts

@@ -15,7 +15,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'ChoiceListProps',
     },
   ],
-  category: 'Components',
+  category: 'UI components',
   subCategory: 'Forms',
   defaultExample: {
     image: 'choicelist-default.png',

package/src/surfaces/admin/components/ColorPicker/ColorPicker.doc.ts

@@ -14,7 +14,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'ColorPickerProps',
     },
   ],
-  category: 'Components',
+  category: 'UI components',
   subCategory: 'Forms',
   defaultExample: {
     image: 'colorpicker-default.png',

package/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.doc.ts

@@ -16,8 +16,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'CustomerSegmentTemplateProps',
     },
   ],
-  category: 'Components',
-  subCategory: 'Other',
+  category: 'UI components',
+  subCategory: 'Settings and templates',
   defaultExample: {
     image: 'customersegmenttemplate-default',
     codeblock: {

package/src/surfaces/admin/components/DateField/DateField.doc.ts

@@ -15,7 +15,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'DateFieldProps',
     },
   ],
-  category: 'Components',
+  category: 'UI components',
   subCategory: 'Forms',
   defaultExample: {
     image: 'datefield-default.png',

package/src/surfaces/admin/components/DatePicker/DatePicker.doc.ts

@@ -15,7 +15,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'DatePickerProps',
     },
   ],
-  category: 'Components',
+  category: 'UI components',
   subCategory: 'Forms',
   defaultExample: {
     image: 'datepicker-default.png',

package/src/surfaces/admin/components/Divider/Divider.doc.ts

@@ -15,8 +15,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'DividerProps',
     },
   ],
-  category: 'Components',
-  subCategory: 'Structure',
+  category: 'UI components',
+  subCategory: 'Layout and structure',
   defaultExample: {
     image: 'divider-default.png',
     codeblock: {

package/src/surfaces/admin/components/EmailField/EmailField.doc.ts

@@ -14,7 +14,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'EmailFieldProps',
     },
   ],
-  category: 'Components',
+  category: 'UI components',
   subCategory: 'Forms',
   defaultExample: {
     image: 'emailfield-default.png',

package/src/surfaces/admin/components/Form/Form.doc.ts

@@ -15,7 +15,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'FormProps',
     },
   ],
-  category: 'Components',
+  category: 'UI components',
   subCategory: 'Forms',
   defaultExample: {
     image: 'form-default.png',

package/src/surfaces/admin/components/FunctionSettings/FunctionSettings.doc.ts

@@ -15,7 +15,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'FunctionSettingsProps',
     },
   ],
-  category: 'Components',
+  category: 'UI components',
   subCategory: 'Forms',
   defaultExample: {
     image: 'form-default.png',

package/src/surfaces/admin/components/Heading/Heading.doc.ts

@@ -15,8 +15,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'HeadingProps',
     },
   ],
-  category: 'Components',
-  subCategory: 'Titles and text',
+  category: 'UI components',
+  subCategory: 'Typography and content',
   defaultExample: {
     image: 'heading-default.png',
     codeblock: {

package/src/surfaces/admin/components/HeadingGroup/HeadingGroup.doc.ts

@@ -8,8 +8,8 @@ const data: ReferenceEntityTemplateSchema = {
   thumbnail: 'headinggroup-thumbnail.png',
   isVisualComponent: true,
   type: '',
-  category: 'Components',
-  subCategory: 'Titles and text',
+  category: 'UI components',
+  subCategory: 'Typography and content',
   defaultExample: {
     image: 'headinggroup-default.png',
     codeblock: {

package/src/surfaces/admin/components/Icon/Icon.doc.ts

@@ -20,8 +20,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'IconName',
     },
   ],
-  category: 'Components',
-  subCategory: 'Media',
+  category: 'UI components',
+  subCategory: 'Media and visuals',
   defaultExample: {
     image: 'icon-default.png',
     codeblock: {

package/src/surfaces/admin/components/Image/Image.doc.ts

@@ -14,8 +14,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'ImageProps',
     },
   ],
-  category: 'Components',
-  subCategory: 'Media',
+  category: 'UI components',
+  subCategory: 'Media and visuals',
   defaultExample: {
     image: 'image-default.png',
     codeblock: {

package/src/surfaces/admin/components/InlineStack/InlineStack.doc.ts

@@ -15,8 +15,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'InlineStackProps',
     },
   ],
-  category: 'Components',
-  subCategory: 'Structure',
+  category: 'UI components',
+  subCategory: 'Layout and structure',
   defaultExample: {
     image: 'inlinestack-default.png',
     codeblock: {

package/src/surfaces/admin/components/Link/Link.doc.ts

@@ -15,7 +15,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'LinkProps',
     },
   ],
-  category: 'Components',
+  category: 'UI components',
   subCategory: 'Actions',
   defaultExample: {
     image: 'link-default.png',

package/src/surfaces/admin/components/MoneyField/MoneyField.doc.ts

@@ -15,7 +15,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'MoneyFieldProps',
     },
   ],
-  category: 'Components',
+  category: 'UI components',
   subCategory: 'Forms',
   defaultExample: {
     image: 'moneyfield-default.png',

package/src/surfaces/admin/components/NumberField/NumberField.doc.ts

@@ -15,7 +15,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'NumberFieldProps',
     },
   ],
-  category: 'Components',
+  category: 'UI components',
   subCategory: 'Forms',
   defaultExample: {
     image: 'numberfield-default.png',

package/src/surfaces/admin/components/Paragraph/Paragraph.doc.ts

@@ -15,8 +15,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'ParagraphProps',
     },
   ],
-  category: 'Components',
-  subCategory: 'Titles and text',
+  category: 'UI components',
+  subCategory: 'Typography and content',
   defaultExample: {
     image: 'paragraph-default.png',
     codeblock: {

package/src/surfaces/admin/components/PasswordField/PasswordField.doc.ts

@@ -15,7 +15,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'PasswordFieldProps',
     },
   ],
-  category: 'Components',
+  category: 'UI components',
   subCategory: 'Forms',
   defaultExample: {
     image: 'passwordfield-default.png',

package/src/surfaces/admin/components/Pressable/Pressable.doc.ts

@@ -15,7 +15,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'PressableProps',
     },
   ],
-  category: 'Components',
+  category: 'UI components',
   subCategory: 'Actions',
   defaultExample: {
     image: 'pressable-default.png',

package/src/surfaces/admin/components/ProgressIndicator/ProgressIndicator.doc.ts

@@ -15,8 +15,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'ProgressIndicatorProps',
     },
   ],
-  category: 'Components',
-  subCategory: 'Media',
+  category: 'UI components',
+  subCategory: 'Feedback and status indicators',
   defaultExample: {
     image: 'progressindicator-default.png',
     codeblock: {

package/src/surfaces/admin/components/Section/Section.doc.ts

@@ -15,8 +15,8 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'SectionProps',
     },
   ],
-  category: 'Components',
-  subCategory: 'Structure',
+  category: 'UI components',
+  subCategory: 'Layout and structure',
   defaultExample: {
     image: 'section-default.png',
     codeblock: {

package/src/surfaces/admin/components/Select/Select.doc.ts

@@ -15,7 +15,7 @@ const data: ReferenceEntityTemplateSchema = {
       type: 'SelectProps',
     },
   ],
-  category: 'Components',
+  category: 'UI components',
   subCategory: 'Forms',
   defaultExample: {
     image: 'select-default.png',