Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

View

The View component provides a generic, flexible container for custom designs and layouts. Use View to apply styling like backgrounds, padding, borders, or positioning, or to preserve the natural size of content within layout components that would otherwise stretch their children.

View supports styling properties including background, borders, padding, opacity, and positioning for precise visual control. For structured content grouping with headings, use a Card instead.

Support
Targets (25)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the View component.

Anchor to accessibilityLabel
accessibilityLabel
string

A label announced by assistive technologies that describes the purpose or contents of the element. Only set this when the element's visible content doesn't provide enough context on its own.

Anchor to accessibilityRole
accessibilityRole

The semantic meaning of the component's content. When set, assistive technologies use this role to help users navigate the page. Accepts a single role or a tuple of two roles (for example, ['listItem', 'separator']).

Anchor to accessibilityVisibility
accessibilityVisibility

Controls the visibility of the element to assistive technologies. Set to 'hidden' to hide the element from assistive technologies while keeping it visually visible.

Anchor to background
background
<>
Default: 'transparent'

The background color of the element, set using a design-system keyword.

Anchor to blockAlignment
blockAlignment
< Extract<, 'start' | 'center' | 'end'> >

The alignment of children along the block (cross) axis.

Anchor to border
border
<<>>

The border style of the element. Accepts a single value for all four edges, or a shorthand tuple for per-edge control:

  • 'base': Applies base to all edges.
  • ['base', 'none']: Block edges get base, inline edges get none.
  • ['base', 'none', 'dotted', 'base']: Values apply to block-start, inline-end, block-end, and inline-start respectively.
Anchor to borderWidth
borderWidth
< <> >

The border width of the element. Accepts a single value for all four edges, or a shorthand tuple for per-edge control:

  • 'base': Applies base to all edges.
  • ['base', 'medium']: Block edges get base, inline edges get medium.
  • ['base', 'medium', 'medium', 'base']: Values apply to block-start, inline-end, block-end, and inline-start respectively.
Anchor to cornerRadius
cornerRadius
< <> >

The corner radius of the element. Accepts a single value for all four corners, or a shorthand tuple for per-corner control using logical (writing-mode-aware) corners:

  • 'base': All four corners get base radius.
  • ['base', 'none']: StartStart/EndEnd get base, StartEnd/EndStart get none. In left-to-right mode, StartStart and EndEnd are the top-left and bottom-right corners.
  • ['base', 'none', 'small', 'base']: Values apply to StartStart, StartEnd, EndEnd, and EndStart respectively.

A borderRadius alias is available. When both are set, cornerRadius takes precedence.

Anchor to display
display
<>
Default: 'auto'

The display mode of the component. Learn more about display.

Anchor to id
id
string

A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.

Anchor to inlineAlignment
inlineAlignment
<>

The alignment of children along the inline (main) axis.

Anchor to inlineSize
inlineSize
<'fill'>

The inline size of the View.

  • fill: Takes all the available space.
Anchor to maxBlockSize
maxBlockSize
< number | `${number}%` | 'fill' >

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.
  • 'fill': Takes all the available space.

Learn more about the max-block-size property.

Anchor to maxInlineSize
maxInlineSize
< number | `${number}%` | 'fill' >

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.
  • 'fill': Takes all the available space.

Learn more about the max-inline-size property.

Anchor to minBlockSize
minBlockSize
< number | `${number}%` | 'fill' >

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.
  • 'fill': Takes all the available space.

Learn more about the min-block-size property.

Anchor to minInlineSize
minInlineSize
< number | `${number}%` | 'fill' >

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.
  • 'fill': Takes all the available space.

Learn more about the min-inline-size property.

Anchor to opacity
opacity

The opacity of the View, applied to the background and all children. Use carefully as reduced opacity can decrease contrast ratios, resulting in inaccessible text.

Anchor to overflow
overflow
'hidden' | 'visible'
Default: 'visible'

The overflow behavior of the element.

  • hidden: Content that extends beyond the container is clipped and not scrollable.
  • visible: Content that extends beyond the container is visible.
Anchor to padding
padding
<<>>

The padding on all edges of the element, using a shorthand syntax. You can specify one, two, or four values following the CSS shorthand convention.

  • T: A single value applied uniformly to all edges.
  • [T, T]: The first value applies to block-start and block-end, the second to inline-start and inline-end.
  • [T, T, T, T]: Values apply to block-start, inline-end, block-end, and inline-start respectively.
Anchor to position
position
<>

Changes how the View is positioned. When setting position, set each axis only once.

<View position={{blockStart, inlineEnd}} /> // Allowed; sets the `block` and `inline` axes once each <div class="hydrate" data-language="" data-content="" data-markdown="remove"></div><pre class="hidden"><code class="language-"></code></pre> <View position={{inlineStart, blockEnd}} /> // Allowed; sets the `inline` and `block` axes once each <div class="hydrate" data-language="" data-content="" data-markdown="remove"></div><pre class="hidden"><code class="language-"></code></pre> <View position={{blockStart, blockEnd}} /> // Not allowed; sets the `block` axis twice <div class="hydrate" data-language="" data-content="" data-markdown="remove"></div><pre class="hidden"><code class="language-"></code></pre> <View position={{inlineStart, inlineEnd}} /> // Not allowed; sets the `inline` axis twice

Anchor to translate
translate
<>

A two-dimensional translation of the View along the block and inline axes.

Anchor to visibility
visibility

Controls the visual visibility of the element. Set to 'hidden' to visually hide the element while keeping it accessible to assistive technologies.

Anchor to borderRadius
borderRadius
< <> >

The corner radius of the element. Accepts a single value for all four corners, or a shorthand tuple for per-corner control:

  • 'base': All four corners get base radius.
  • ['base', 'none']: StartStart/EndEnd get base, StartEnd/EndStart get none.
  • ['base', 'none', 'small', 'base']: Values apply to StartStart, StartEnd, EndEnd, and EndStart respectively.
Deprecated

Use cornerRadius instead.

Anchor to ExamplesExamples

Anchor to Wrap content in a View containerWrap content in a View container

Use View to preserve the natural size of its contents inside a layout component. This example wraps a child element to prevent it from stretching to fill available space.

Wrap content in a View container

A View component preserving the natural size of its contents.

Wrap content in a View container

import {
reactExtension,
View,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.page.render',
() => <Extension />,
);

function Extension() {
return (
<View padding="base" border="base">
View
</View>
);
}
import {extension, View} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
const view = root.createComponent(
View,
{border: 'base', padding: 'base'},
'View',
);

root.appendChild(view);
});

Anchor to Best practicesBest practices

  • Use View for styling, not layout: View applies visual properties like backgrounds, borders, and padding. For arranging elements, use BlockStack, InlineStack, or Grid.
  • Preserve natural sizing: Use View inside layout components to prevent children from stretching. View contents maintain their natural dimensions.
  • Set accessibility roles for semantic meaning: Use accessibilityRole to provide landmark information for assistive technologies when the View represents a meaningful page section.
  • Prefer semantic components when available: Use Card for content groups or Divider for visual separation before reaching for View.

Anchor to LimitationsLimitations

  • View doesn't provide flex or grid layout capabilities. Arranging children requires nesting layout components inside it.
  • Custom colors aren't supported. Background and border colors are limited to the predefined design token set.
  • The position prop supports relative, absolute, and sticky. fixed positioning isn't available.
Was this page helpful?