--- title: InlineStack description: >- The InlineStack component arranges its children horizontally (along the inline axis) with configurable spacing. Use it to place elements side by side, such as buttons in a row, badges next to text, or icon-label pairs. api_version: 2025-07 api_name: admin-extensions source_url: html: >- https://shopify.dev/docs/api/admin-extensions/2025-07/ui-components/layout-and-structure/inlinestack md: >- https://shopify.dev/docs/api/admin-extensions/2025-07/ui-components/layout-and-structure/inlinestack.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/admin-extensions/latest/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/admin/upgrading-to-2025-10) to upgrade your extension. # InlineStack The InlineStack component arranges its children horizontally (along the inline axis) with configurable spacing. Use it to place elements side by side, such as buttons in a row, badges next to text, or icon-label pairs. For vertical arrangement, use [BlockStack](https://shopify.dev/docs/api/admin-extensions/2025-07/ui-components/layout-and-structure/blockstack). ### Support Targets (46) ### Supported targets * [admin.​abandoned-checkout-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/abandoned-checkouts#abandoned-checkout-details-action-) * [admin.​abandoned-checkout-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/abandoned-checkouts#abandoned-checkout-details-block-) * [admin.​catalog-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/catalogs#catalog-details-action-) * [admin.​catalog-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/catalogs#catalog-details-block-) * [admin.​collection-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/collections#collection-details-action-target) * [admin.​collection-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/collections#collection-details-block-target) * [admin.​collection-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/collections#collection-index-targets) * [admin.​company-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/companies#company-details-action-) * [admin.​company-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/companies#company-details-block-) * [admin.​company-location-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/companies#company-location-details-block-) * [admin.​customer-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/customers#customer-details-action-) * [admin.​customer-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/customers#customer-details-block-) * [admin.​customer-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/customers#customer-index-targets) * [admin.​customer-index.​selection-action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/customers#customer-index-selection-action-) * [admin.​customer-segment-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/customers#customer-segment-targets) * [admin.​discount-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/discounts#discount-details-action-) * [admin.​discount-details.​function-settings.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/function-settings#discount-details-function-settings-) * [admin.​discount-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/discounts#discount-index-targets) * [admin.​draft-order-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/draft-orders#draft-order-details-action-) * [admin.​draft-order-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/draft-orders#draft-order-details-block-) * [admin.​draft-order-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/draft-orders#draft-order-index-targets) * [admin.​draft-order-index.​selection-action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/draft-orders#draft-order-index-selection-action-) * [admin.​gift-card-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/gift-cards#gift-card-details-action-) * [admin.​gift-card-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/gift-cards#gift-card-details-block-) * [admin.​order-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/orders#order-details-action-) * [admin.​order-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/orders#order-details-block-) * [admin.​order-details.​print-action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/orders#order-details-print-action-) * [admin.​order-fulfilled-card.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/orders#order-fulfilled-card-targets) * [admin.​order-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/orders#order-index-targets) * [admin.​order-index.​selection-action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/orders#order-index-selection-action-) * [admin.​order-index.​selection-print-action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/orders#order-index-selection-print-action-) * [admin.​product-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/products#product-details-action-) * [admin.​product-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/products#product-details-block-) * [admin.​product-details.​configuration.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/products#product-details-configuration-) * [admin.​product-details.​print-action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/products#product-details-print-action-) * [admin.​product-details.​reorder.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/products#product-details-reorder-) * [admin.​product-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/products#product-index-targets) * [admin.​product-index.​selection-action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/products#product-index-selection-action-) * [admin.​product-index.​selection-print-action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/products#product-index-selection-print-action-) * [admin.​product-purchase-option.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/products#product-purchase-option-action-) * [admin.​product-variant-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/product-variants#product-variant-details-action-) * [admin.​product-variant-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/product-variants#product-variant-details-block-) * [admin.​product-variant-details.​configuration.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/product-variants#product-variant-details-configuration-) * [admin.​product-variant-purchase-option.​action.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/product-variants#product-variant-purchase-option-action-) * [admin.​settings.​order-routing-rule.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/function-settings#order-routing-rule-function-settings-) * [admin.​settings.​validation.​render](https://shopify.dev/docs/api/admin-extensions/2025-07/targets/function-settings#validation-function-settings-) #### Use cases * **Horizontal layouts:** Arrange buttons, badges, or controls in horizontal rows. * **Action groups:** Group related buttons or links together horizontally. * **Form rows:** Create form rows with labels and inputs side by side. * **Responsive alignment:** Align content horizontally with proper spacing and alignment. *** ## Properties Props for the InlineStack component, a horizontal layout container that arranges children in a row along the inline axis. Inherits accessibility, sizing, padding, and gap props from shared utilities. * **accessibilityLabel** **string** A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. When set, any children or `label` supplied won't be announced to screen readers. * **accessibilityRole** **AccessibilityRole** **Default: 'generic'** The semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page. * **blockAlignment** **CrossAxisAlignment** **Default: 'start'** The alignment of children along the block (vertical) axis within the stack. Use this to control how children are vertically aligned in a horizontal stack layout. * **blockGap** **SpacingKeyword | boolean** The spacing between children along the block axis (top-to-bottom in horizontal writing modes). This is an alias for `rowGap`. When set to `true`, applies a default block gap appropriate for the component. * **blockSize** **number | \`${number}%\`** The block size (height in horizontal writing modes) of the element. * `number`: The size in pixels. * `` `${number}%` ``: The size as a percentage of the parent container's block size. Learn more about the [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size) property. * **columnGap** **SpacingKeyword | boolean** The spacing between columns (children placed along the inline axis). When set to `true`, applies a default column gap appropriate for the component. Learn more about the [column-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) property. * **gap** **MaybeTwoBoxEdgesShorthandProperty\** The spacing between children in both axes. Accepts a single value for uniform spacing, or two values separated by a space for independent block-axis and inline-axis spacing (such as `"base small"`). When set to `true`, applies a default gap appropriate for the component. Learn more about the [gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) property. * **id** **string** A unique identifier for the element. * **inlineAlignment** **MainAxisAlignment** **Default: 'start'** The alignment of children along the inline (horizontal) axis within the stack. Use this to control how children are horizontally distributed in a horizontal stack layout. * **inlineGap** **SpacingKeyword | boolean** The spacing between children along the inline axis (left-to-right in horizontal writing modes). This is an alias for `columnGap`. When set to `true`, applies a default inline gap appropriate for the component. * **inlineSize** **number | \`${number}%\`** The inline size (width in horizontal writing modes) of the element. * `number`: The size in pixels. * `` `${number}%` ``: The size as a percentage of the parent container's inline size. Learn more about the [inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size) property. * **maxBlockSize** **number | \`${number}%\`** The maximum block size (maximum height in horizontal writing modes). The element won't grow taller than this value even if its content is longer. * `number`: The size in pixels. * `` `${number}%` ``: The size as a percentage of the parent container's block size. Learn more about the [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size) property. * **maxInlineSize** **number | \`${number}%\`** The maximum inline size (maximum width in horizontal writing modes). The element won't grow wider than this value. * `number`: The size in pixels. * `` `${number}%` ``: The size as a percentage of the parent container's inline size. Learn more about the [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size) property. * **minBlockSize** **number | \`${number}%\`** The minimum block size (minimum height in horizontal writing modes). The element won't shrink smaller than this value even if its content is shorter. * `number`: The size in pixels. * `` `${number}%` ``: The size as a percentage of the parent container's block size. Learn more about the [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size) property. * **minInlineSize** **number | \`${number}%\`** The minimum inline size (minimum width in horizontal writing modes). The element won't shrink narrower than this value. * `number`: The size in pixels. * `` `${number}%` ``: The size as a percentage of the parent container's inline size. Learn more about the [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size) property. * **padding** **MaybeAllBoxEdgesShorthandProperty\** The padding on all edges of the element, using a shorthand syntax. You can specify one to four values following the [CSS shorthand convention](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box). When set to `true`, applies a default padding appropriate for the component. * **paddingBlock** **MaybeTwoBoxEdgesShorthandProperty\** The padding on the block-start and block-end edges. When set to `true`, applies a default block padding appropriate for the component. Learn more about the [padding-block](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block) property. * **paddingBlockEnd** **SpacingKeyword | boolean** The padding on the block-end edge (the bottom edge in horizontal writing modes). When set to `true`, applies a default padding appropriate for the component. Learn more about the [padding-block-end](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-end) property. * **paddingBlockStart** **SpacingKeyword | boolean** The padding on the block-start edge (the top edge in horizontal writing modes). When set to `true`, applies a default padding appropriate for the component. Learn more about the [padding-block-start](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-start) property. * **paddingInline** **MaybeTwoBoxEdgesShorthandProperty\** The padding on the inline-start and inline-end edges. When set to `true`, applies a default inline padding appropriate for the component. Learn more about the [padding-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline) property. * **paddingInlineEnd** **SpacingKeyword | boolean** The padding on the inline-end edge (the right edge in left-to-right writing modes). When set to `true`, applies a default padding appropriate for the component. Learn more about the [padding-inline-end](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end) property. * **paddingInlineStart** **SpacingKeyword | boolean** The padding on the inline-start edge (the left edge in left-to-right writing modes). When set to `true`, applies a default padding appropriate for the component. Learn more about the [padding-inline-start](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start) property. * **rowGap** **SpacingKeyword | boolean** The spacing between rows (children stacked along the block axis). When set to `true`, applies a default row gap appropriate for the component. Learn more about the [row-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) property. ### AccessibilityRole The set of accessibility roles that can be applied to layout components to convey semantic meaning to assistive technologies. Each role maps to a corresponding HTML element or ARIA role in web-based hosts. - \`main\`: The primary content of the page. - \`header\`: A header section of the page. - \`footer\`: A section for copyright information, navigation links, and privacy statements. - \`section\`: A generic section; should have a heading or accessible label. - \`aside\`: A supporting section related to the main content. - \`navigation\`: A major group of navigation links. - \`ordered-list\`: A list of ordered items. - \`list-item\`: An item inside a list. - \`list-item-separator\`: A divider that separates items in a list. - \`unordered-list\`: A list of unordered items. - \`separator\`: A divider separating sections of content. - \`status\`: A live region with advisory information that isn't urgent enough to be an alert. - \`alert\`: Important, usually time-sensitive information. - \`generic\`: A nameless container with no semantic meaning on its own. ```ts 'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' ``` ### CrossAxisAlignment Controls how items are aligned along the container's cross axis (perpendicular to the main stacking direction). - \`start\`: Items are aligned to the start of the container's cross axis. - \`center\`: Items are centered along the container's cross axis. - \`end\`: Items are aligned to the end of the container's cross axis. - \`baseline\`: Items are aligned so their text baselines line up with each other. Learn more about the \[align-items]\(https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) property. ```ts 'start' | 'center' | 'end' | 'baseline' ``` ### SpacingKeyword A keyword that maps to a predefined spacing value from the Shopify admin design system. Use these instead of pixel values to ensure consistent spacing throughout the UI. - \`none\`: No spacing (0px). - \`small\`: A compact amount of spacing, suitable for tight layouts. - \`base\`: The default spacing, appropriate for most layouts. - \`large\`: A generous amount of spacing, used to create visual separation. ```ts 'none' | 'small' | 'base' | 'large' ``` ### MaybeTwoBoxEdgesShorthandProperty A shorthand type that accepts one or two spacing values, representing the start and end edges of a single axis (block or inline). - One value (such as \`base\`): Applied to both the start and end edges. - Two values (such as \`base none\`): The first is applied to the start edge, the second to the end edge. ```ts T | `${T} ${T}` ``` ### MainAxisAlignment Controls how items are distributed along the container's main axis (the primary stacking direction). - \`start\`: Items are packed toward the start of the main axis. - \`center\`: Items are centered along the main axis. - \`end\`: Items are packed toward the end of the main axis. - \`space-between\`: Items are distributed evenly. The first item is flush with the start edge, the last with the end edge. - \`space-around\`: Items are distributed evenly with half-size spaces on both ends. - \`space-evenly\`: Items are distributed so that spacing between any two adjacent items (and edges) is equal. Learn more about the \[justify-content]\(https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) property. ```ts 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' ``` ### MaybeAllBoxEdgesShorthandProperty A shorthand type that accepts one to four spacing values following the CSS box-edge shorthand convention (block-start, inline-end, block-end, inline-start). - One value (such as \`base\`): Applied to all four edges. - Two values (such as \`base none\`): The first is applied to block-start and block-end, the second to inline-start and inline-end. - Three values (such as \`base none large\`): The first is block-start, the second is inline-start and inline-end, the third is block-end. - Four values (such as \`base none large small\`): Applied to block-start, inline-end, block-end, and inline-start respectively. ```ts T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}` ``` *** ## Examples ### Arrange metadata in rows Arrange metadata labels, values, and badges in a horizontal row. This example uses `InlineStack` with the `gap` prop to space product IDs, SKUs, weights, and a status [Badge](https://shopify.dev/docs/api/admin-extensions/2025-07/ui-components/feedback-and-status-indicators/badge) side by side. ## Arrange metadata in rows ![Arrange metadata labels, values, and badges in a horizontal row. This example uses \`InlineStack\` with the \`gap\` prop to space product IDs, SKUs, weights, and a status \[Badge\](/docs/api/admin-extensions/2025-07/ui-components/feedback-and-status-indicators/badge) side by side.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/admin-extensions/2025-07/inlinestack-default-rX-cB3Ns.png) ## Arrange metadata in rows ##### React ```tsx import {reactExtension, useApi, InlineStack, Text, Badge, BlockStack} from '@shopify/ui-extensions-react/admin'; function App() { const {data} = useApi('admin.product-details.block.render'); const productId = data.selected[0]?.id; return ( Product: {productId || 'Unknown'} Active SKU: WH-1234 Weight: 2.5 kg ); } export default reactExtension( 'admin.product-details.block.render', () => , ); ``` ##### TS ```ts import {extension, InlineStack, Text, Badge, BlockStack} from '@shopify/ui-extensions/admin'; export default extension( 'admin.product-details.block.render', (root, api) => { const {data} = api; const productId = data.selected[0]?.id; const stack = root.createComponent(BlockStack, {gap: true}); const row = root.createComponent(InlineStack, {gap: true}); const label = root.createComponent(Text, {fontWeight: 'bold'}, 'Product:'); const id = root.createComponent(Text, {}, productId || 'Unknown'); const badge = root.createComponent(Badge, {tone: 'success'}, 'Active'); row.appendChild(label); row.appendChild(id); row.appendChild(badge); const metaRow = root.createComponent(InlineStack, {gap: true}); const skuLabel = root.createComponent(Text, {fontWeight: 'bold'}, 'SKU:'); const skuValue = root.createComponent(Text, {}, 'WH-1234'); const weightLabel = root.createComponent(Text, {fontWeight: 'bold'}, 'Weight:'); const weightValue = root.createComponent(Text, {}, '2.5 kg'); metaRow.appendChild(skuLabel); metaRow.appendChild(skuValue); metaRow.appendChild(weightLabel); metaRow.appendChild(weightValue); stack.appendChild(row); stack.appendChild(metaRow); root.appendChild(stack); }, ); ``` ### Right-align action buttons Right-align action buttons using `inlineAlignment="end"`. This example positions cancel and confirm [Button](https://shopify.dev/docs/api/admin-extensions/2025-07/ui-components/actions/button) components at the trailing edge of an [action modal](https://shopify.dev/docs/api/admin-extensions/2025-07/ui-components/settings-and-templates/adminaction), following standard dialog patterns. ## Right-align action buttons ##### React ```tsx import {reactExtension, useApi, InlineStack, Button, Text, BlockStack} from '@shopify/ui-extensions-react/admin'; function App() { const {data, close} = useApi('admin.product-details.action.render'); const productId = data.selected[0]?.id; return ( Confirm action Sync product {productId} to all warehouse locations? ); } export default reactExtension( 'admin.product-details.action.render', () => , ); ``` ##### TS ```ts import {extension, InlineStack, Button, Text, BlockStack} from '@shopify/ui-extensions/admin'; export default extension( 'admin.product-details.action.render', (root, api) => { const {data, close} = api; const productId = data.selected[0]?.id; const stack = root.createComponent(BlockStack, {gap: true}); const heading = root.createComponent(Text, {fontWeight: 'bold'}, 'Confirm action'); const message = root.createComponent(Text, {}, `Sync product ${productId} to all warehouse locations?`); const actions = root.createComponent(InlineStack, { gap: true, inlineAlignment: 'end', }); const cancelButton = root.createComponent( Button, {variant: 'tertiary', onPress: () => close()}, 'Cancel', ); const confirmButton = root.createComponent( Button, { variant: 'primary', onPress: async () => { await fetch('/api/products/sync-all', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({productId}), }); close(); }, }, 'Sync now', ); actions.appendChild(cancelButton); actions.appendChild(confirmButton); stack.appendChild(heading); stack.appendChild(message); stack.appendChild(actions); root.appendChild(stack); }, ); ``` ### Center-align icon and text pairs Vertically center [Icon](https://shopify.dev/docs/api/admin-extensions/2025-07/ui-components/media-and-visuals/icon) and text pairs using `blockAlignment="center"`. This example places order and inventory icons inline with their stat labels, so they stay aligned regardless of icon and text height differences. ## Center-align icon and text pairs ##### React ```tsx import {reactExtension, InlineStack, Icon, Text, BlockStack} from '@shopify/ui-extensions-react/admin'; function App() { return ( Quick stats 142 orders this month 89 units in stock ); } export default reactExtension( 'admin.product-details.block.render', () => , ); ``` ##### TS ```ts import {extension, InlineStack, Icon, Text, BlockStack} from '@shopify/ui-extensions/admin'; export default extension( 'admin.product-details.block.render', (root) => { const stack = root.createComponent(BlockStack, {gap: true}); const heading = root.createComponent(Text, {fontWeight: 'bold'}, 'Quick stats'); const stat1 = root.createComponent(InlineStack, { gap: true, blockAlignment: 'center', }); const icon1 = root.createComponent(Icon, {name: 'OrdersMajor', accessibilityLabel: 'Orders'}); const text1 = root.createComponent(Text, {}, '142 orders this month'); stat1.appendChild(icon1); stat1.appendChild(text1); const stat2 = root.createComponent(InlineStack, { gap: true, blockAlignment: 'center', }); const icon2 = root.createComponent(Icon, {name: 'InventoryMajor', accessibilityLabel: 'Inventory'}); const text2 = root.createComponent(Text, {}, '89 units in stock'); stat2.appendChild(icon2); stat2.appendChild(text2); stack.appendChild(heading); stack.appendChild(stat1); stack.appendChild(stat2); root.appendChild(stack); }, ); ``` *** ## Best practices * **Use for horizontal grouping:** InlineStack is ideal for placing buttons, badges, icons, or other small elements in a row. For vertical stacking, use [BlockStack](https://shopify.dev/docs/api/admin-extensions/2025-07/ui-components/layout-and-structure/blockstack) instead. *** ## Limitations * InlineStack doesn't support explicit column counts or grid-like layouts. For more complex grid arrangements, nest [BlockStack](https://shopify.dev/docs/api/admin-extensions/2025-07/ui-components/layout-and-structure/blockstack) and InlineStack components together. * InlineStack doesn't render any visible background, border, or shadow. It's purely a layout container. For visual containment, wrap it in a [Box](https://shopify.dev/docs/api/admin-extensions/2025-07/ui-components/layout-and-structure/box) or [Section](https://shopify.dev/docs/api/admin-extensions/2025-07/ui-components/layout-and-structure/section). * Children that are wider than the container will overflow. InlineStack doesn't automatically resize children to fit. ***