--- title: BlockSpacer description: >- BlockSpacer is used to create empty block space, typically when variable spacing is needed between multiple elements. Note that you should favor BlockStack when spacing between all elements is the same. api_version: 2025-07 api_name: customer-account-ui-extensions source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blockspacer md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blockspacer.md --- Migrate to Polaris Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension. # Block​Spacer BlockSpacer is used to create empty block space, typically when variable spacing is needed between multiple elements. Note that you should favor BlockStack when spacing between all elements is the same. ### Support Targets (25) ### Supported targets * Customer​Account::Kitchen​Sink * customer-account.​footer.​render-after * customer-account.​order-index.​announcement.​render * customer-account.​order-index.​block.​render * customer-account.​order-status.​announcement.​render * customer-account.​order-status.​block.​render * customer-account.​order-status.​cart-line-item.​render-after * customer-account.​order-status.​cart-line-list.​render-after * customer-account.​order-status.​customer-information.​render-after * customer-account.​order-status.​fulfillment-details.​render-after * customer-account.​order-status.​payment-details.​render-after * customer-account.​order-status.​return-details.​render-after * customer-account.​order-status.​unfulfilled-items.​render-after * customer-account.​order.​action.​menu-item.​render * customer-account.​order.​action.​render * customer-account.​order.​page.​render * customer-account.​page.​render * customer-account.​profile.​addresses.​render-after * customer-account.​profile.​announcement.​render * customer-account.​profile.​block.​render * customer-account.​profile.​company-details.​render-after * customer-account.​profile.​company-location-addresses.​render-after * customer-account.​profile.​company-location-payment.​render-after * customer-account.​profile.​company-location-staff.​render-after * customer-account.​profile.​payment.​render-after ## BlockSpacerProps * **id** **string** A unique identifier for the component. * **spacing** **MaybeResponsiveConditionalStyle\** **Default: 'base'** Adjust size of the spacer ### MaybeResponsiveConditionalStyle A type that represents a value that can be a conditional style. The conditions are based on the viewport size. We highly recommend using the \`Style\` helper which simplifies the creation of conditional styles. ```ts T | ConditionalStyle ``` ### ConditionalStyle A conditional style definition that maps one or more conditions to different values. The \`default\` value is used as a fallback when none of the conditions in \`conditionals\` are satisfied. * conditionals An array of conditional values. ```ts ConditionalValue[] ``` * default The default value applied when none of the conditional values specified in \`conditionals\` are met. ```ts T ``` ### ConditionalValue A single conditional branch that pairs a set of conditions with the value to apply when those conditions are met. * conditions The conditions that must be met for the value to be applied. At least one condition must be specified. ```ts AcceptedConditions ``` * value The value that will be applied if the conditions are met. ```ts T ``` ### ViewportSizeCondition A condition that targets layouts based on the inline size (width in horizontal writing modes) of the viewport. * viewportInlineSize The minimum viewport inline size that the condition must match. ```ts { min: T; } ``` ### Spacing A keyword that maps to a predefined spacing value from the design system. Use these instead of pixel values to ensure consistent spacing throughout the UI. - \`none\`: No spacing (0px). - \`extraTight\`: The smallest amount of spacing. - \`tight\`: A compact amount of spacing, suitable for tight layouts. - \`base\`: The default spacing, appropriate for most layouts. - \`loose\`: A generous amount of spacing, used to create visual separation. - \`extraLoose\`: The largest amount of spacing. ```ts 'none' | 'extraTight' | 'tight' | 'base' | 'loose' | 'extraLoose' ``` ## StyleHelper Style is a helper for authoring conditional values for prop styles. Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way. * **default** **\(defaultValue: T) => StylesConditionalStyle\** **required** Sets an optional default value to use when no other condition is met. * **when** **\(conditions: StylesConditions, value: T) => StylesConditionalStyle\** **required** Adjusts the style based on different conditions. All conditions, expressed as a literal object, must be met for the associated value to be applied. The `when` method can be chained together to build more complex styles. ### StylesConditionalStyle * conditionals An array of conditional values. ```ts StylesConditionalValue[] ``` * default The default value applied when none of the conditional values specified in \`conditionals\` are met. ```ts T ``` ### StylesConditionalValue * conditions The conditions that must be met for the value to be applied. At least one condition must be specified. ```ts AcceptedConditions ``` * value The value that will be applied if the conditions are met. ```ts T ``` ### StylesBaseConditions * focus ```ts true ``` * hover ```ts true ``` * resolution ```ts 1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4 ``` * viewportInlineSize ```ts { min: ViewportInlineSize; } ``` ### ViewportInlineSize ```ts 'extraSmall' | 'small' | 'medium' | 'large' ``` ### StylesConditions * focus ```ts true ``` * hover ```ts true ``` * viewportInlineSize ```ts { min: ViewportInlineSize; } ``` Examples ## Preview ![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/blockspacer-default-ycbBn7A0.png) ### Examples * #### Basic BlockSpacer ##### React ```tsx import { reactExtension, BlockSpacer, View, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.page.render', () => , ); function Extension() { return ( <> View View ); } ``` ##### JS ```js import {extension, BlockSpacer, View} from '@shopify/ui-extensions/customer-account'; export default extension('customer-account.page.render', (root) => { const blockSpacer = root.createComponent(View, undefined, [ root.createComponent(View, {border: 'base', padding: 'base'}, 'View'), root.createComponent(BlockSpacer, {spacing: 'loose'}), root.createComponent(View, {border: 'base', padding: 'base'}, 'View'), ]); root.appendChild(blockSpacer); }); ```