Choose a version:

BlockStack

This structures layout elements along the vertical axis of the page. It's useful for vertical alignment.

Anchor to blockstackpropsBlockStackProps

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 will not be announced to screen readers.

accessibilityRole

Default: 'generic'

Sets 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

Default: 'start'

Position children along the cross axis

blockGap

| boolean

Adjust spacing between elements in the block axis.

Alias for rowGap

blockSize

number | `${number}%`

Adjust the block size.

number: size in pixels.
`${number}%`: size in percentages of the available space.

gap

< | boolean>

Adjust spacing between children

string

A unique identifier for the element.

inlineAlignment

Default: 'start'

/** Position children along the main axis

inlineSize

number | `${number}%`

Adjust the inline size.

number: size in pixels.
`${number}%`: size in percentages of the available space.

maxBlockSize

number | `${number}%`

Adjust the maximum block size.

number: size in pixels.
`${number}%`: size in percentages of the available space.

maxInlineSize

number | `${number}%`

Adjust the maximum inline size.

number: size in pixels.
`${number}%`: size in percentages of the available space.

minBlockSize

number | `${number}%`

Adjust the minimum block size.

number: size in pixels.
`${number}%`: size in percentages of the available space.

minInlineSize

number | `${number}%`

Adjust the minimum inline size.

number: size in pixels.
`${number}%`: size in percentages of the available space.

padding

< | boolean>

Adjust the padding.

To shorten the code, it is possible to specify all the padding for all edges of the box in one property.

base means block-start, inline-end, block-end and inline-start paddings are base.
base none means block-start and block-end paddings are base, inline-start and inline-end paddings are none.
base none large means block-start padding is base, inline-end padding is none, block-end padding is large and inline-start padding is none.
base none large small means block-start padding is base, inline-end padding is none, block-end padding is large and inline-start padding is small.
true applies a default padding that is appropriate for the component.

Learn more about the 1-to-4-value syntax at https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box

paddingBlock

< | boolean>

Adjust the block-padding.

base none means block-start padding is base, block-end padding is none.

paddingBlockEnd

| boolean

Adjust the block-end padding.

paddingBlockStart

| boolean

Adjust the block-start padding.

paddingInline

< | boolean>

Adjust the inline padding.

base none means inline-start padding is base, inline-end padding is none.

paddingInlineEnd

| boolean

Adjust the inline-end padding.

paddingInlineStart

| boolean

Adjust the inline-start padding.

rowGap

| boolean

Adjust spacing between children in the block axis

Was this section helpful?

Laying out elements in a column

import React from 'react';

import {

render,

BlockStack,

} from '@shopify/ui-extensions-react/admin';

render('Playground', () => <App />);

function App() {

return (

<>Child 1</>

<>Child 2</>

<>Child 3</>

<>Child 4</>

</BlockStack>

);

}

Preview

Anchor to relatedRelated

InlineStack