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.

AdminBlock

Requires the Block Extension API, Product Details Configuration API, or Product Variant Details Configuration API.

The AdminBlock component enables admin block extensions to appear inline on resource pages. Use AdminBlock to create embedded extension experiences that feel native to the Shopify admin interface. The Shopify admin handles height management, expansion controls, and content overflow for the block.

Learn how to build an admin block extension.

Support
Targets (46)

Supported targets

Anchor to PropertiesProperties

Props for the AdminBlock component, used by Admin Block extensions to configure the title and collapsed summary of an app block rendered on a resource page in the Shopify admin.

Anchor to collapsedSummary
collapsedSummary
string

A short summary displayed when the app block is collapsed. Use this to give merchants a preview of the block's content without expanding it. Summaries longer than 30 characters will be truncated.

Anchor to title
title
string

The title displayed at the top of the app block. If not provided, then the extension's name is used instead. Use this to give the block a contextual heading. Titles longer than 40 characters will be truncated.

Anchor to ExamplesExamples

Anchor to Display warehouse status blockDisplay warehouse status block

Show a warehouse connection status, sync timestamp, and inventory count in a product details block. This example renders an AdminBlock titled 'Warehouse integration' with a success tone Badge and status lines inside a BlockStack.

Display warehouse status block

Show a warehouse connection status, sync timestamp, and inventory count in a product details block. This example renders an `AdminBlock` titled 'Warehouse integration' with a `success` tone [Badge](/docs/api/admin-extensions/2025-07/ui-components/feedback-and-status-indicators/badge) and status lines inside a [BlockStack](/docs/api/admin-extensions/2025-07/ui-components/layout-and-structure/blockstack).

Display warehouse status block

import React from 'react';
import {reactExtension, AdminBlock, Text, Badge, InlineStack, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

return (
<AdminBlock title="Warehouse integration">
<BlockStack gap>
<InlineStack gap>
<Text>Sync status:</Text>
<Badge tone="success">Connected</Badge>
</InlineStack>
<Text>Last synced 5 minutes ago</Text>
<Text>Warehouse inventory: 247 units across 3 locations</Text>
</BlockStack>
</AdminBlock>
);
}

export default reactExtension(
'admin.product-details.block.render',
() => <App />,
);
import {extension, AdminBlock, Text, Badge, InlineStack, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.block.render',
(root) => {

const content = root.createComponent(BlockStack, {gap: true});

const statusRow = root.createComponent(InlineStack, {gap: true});
const statusLabel = root.createComponent(Text, {}, 'Sync status:');
const statusBadge = root.createComponent(Badge, {tone: 'success'}, 'Connected');
statusRow.appendChild(statusLabel);
statusRow.appendChild(statusBadge);

const lastSync = root.createComponent(Text, {}, 'Last synced 5 minutes ago');
const inventory = root.createComponent(Text, {}, 'Warehouse inventory: 247 units across 3 locations');

content.appendChild(statusRow);
content.appendChild(lastSync);
content.appendChild(inventory);

const block = root.createComponent(AdminBlock, {
title: 'Warehouse integration',
});
block.appendChild(content);
root.appendChild(block);
},
);

Anchor to Load data into block extensionLoad data into block extension

Fetch product data from the GraphQL Admin API and display it inside the block after loading. This example shows a ProgressIndicator while the query runs, then replaces it with the product title, variant count, and inventory total.

Load data into block extension

import React, {useState, useEffect} from 'react';
import {reactExtension, useApi, AdminBlock, Text, ProgressIndicator, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {
const {data, query} = useApi('admin.product-details.block.render');
const productId = data.selected[0]?.id;
const [product, setProduct] = useState(null);
const [loading, setLoading] = useState(true);

useEffect(() => {
query(
`query Product($id: ID!) {
product(id: $id) { title totalInventory totalVariants }
}`,
{variables: {id: productId}},
).then((result) => {
setProduct(result?.data?.product);
setLoading(false);
});
}, [productId, query]);

return (
<AdminBlock title="Product analytics">
<BlockStack gap>
{loading ? (
<ProgressIndicator size="small-200" accessibilityLabel="Loading analytics" />
) : product ? (
<>
<Text fontWeight="bold">{product.title}</Text>
<Text>Variants: {product.totalVariants}</Text>
<Text>Total inventory: {product.totalInventory}</Text>
</>
) : null}
</BlockStack>
</AdminBlock>
);
}

export default reactExtension(
'admin.product-details.block.render',
() => <App />,
);
import {extension, AdminBlock, Text, ProgressIndicator, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.block.render',
async (root, api) => {
const {data, query} = api;
const productId = data.selected[0]?.id;

const content = root.createComponent(BlockStack, {gap: true});
const loader = root.createComponent(ProgressIndicator, {
size: 'small-200',
accessibilityLabel: 'Loading analytics',
});
content.appendChild(loader);

const block = root.createComponent(AdminBlock, {
title: 'Product analytics',
});
block.appendChild(content);
root.appendChild(block);

const result = await query(
`query Product($id: ID!) {
product(id: $id) { title totalInventory totalVariants }
}`,
{variables: {id: productId}},
);

content.removeChild(loader);

const product = result?.data?.product;
if (product) {
const title = root.createComponent(Text, {fontWeight: 'bold'}, product.title);
const variants = root.createComponent(Text, {}, `Variants: ${product.totalVariants}`);
const inventory = root.createComponent(Text, {}, `Total inventory: ${product.totalInventory}`);
content.appendChild(title);
content.appendChild(variants);
content.appendChild(inventory);
}
},
);

Anchor to Organize block with sectionsOrganize block with sections

Organize block content into themed groups using Section components with headings. This example splits product specifications into compliance and shipping sections separated by a Divider.

Organize block with sections

import React from 'react';
import {reactExtension, AdminBlock, Section, Text, Divider, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

return (
<AdminBlock title="Product specifications">
<BlockStack gap>
<Section heading="Compliance">
<Text>CE Marking — Approved</Text>
<Text>EU distribution cleared</Text>
</Section>
<Divider />
<Section heading="Shipping">
<Text>Weight: 2.5 kg</Text>
<Text>Dimensions: 30 × 20 × 15 cm</Text>
</Section>
</BlockStack>
</AdminBlock>
);
}

export default reactExtension(
'admin.product-details.block.render',
() => <App />,
);
import {extension, AdminBlock, Section, Text, Divider, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.block.render',
(root) => {

const content = root.createComponent(BlockStack, {gap: true});

const complianceSection = root.createComponent(Section, {heading: 'Compliance'});
const cert = root.createComponent(Text, {}, 'CE Marking — Approved');
const region = root.createComponent(Text, {}, 'EU distribution cleared');
complianceSection.appendChild(cert);
complianceSection.appendChild(region);

const divider = root.createComponent(Divider);

const shippingSection = root.createComponent(Section, {heading: 'Shipping'});
const weight = root.createComponent(Text, {}, 'Weight: 2.5 kg');
const dimensions = root.createComponent(Text, {}, 'Dimensions: 30 × 20 × 15 cm');
shippingSection.appendChild(weight);
shippingSection.appendChild(dimensions);

content.appendChild(complianceSection);
content.appendChild(divider);
content.appendChild(shippingSection);

const block = root.createComponent(AdminBlock, {
title: 'Product specifications',
});
block.appendChild(content);
root.appendChild(block);
},
);

Anchor to Best practicesBest practices

  • Keep content concise: Blocks share space with other admin UI on resource pages. Focus on the most relevant information and avoid overwhelming the page.
  • Design for both expanded and collapsed states: Merchants might interact with the block in either state. Provide meaningful content in the collapsed summary so they can quickly scan the information.
  • Provide meaningful collapsed state content: Show the most important piece of information (like a status or key value) in the collapsed summary so merchants can decide whether to expand the block.

Anchor to LimitationsLimitations

  • The block's visual style and position on the resource page are determined by the merchant's configuration and can't be controlled programmatically.
  • This component doesn't control whether the block starts expanded or collapsed. The initial state is managed by the Shopify admin and might vary by context.
Was this page helpful?