Choose a version:

AdminBlock

This component is similar to the AdminBlock, providing a deeper integration with the container your UI is rendered into. However, this only applies to Block Extensions which render inline on a resource page.

Anchor to adminblockpropsAdminBlockProps

Anchor to title title string: The title to display at the top of the app block. If not provided, the name of the extension will be used. Titles longer than 40 characters will be truncated.
Anchor to summary summary string: The summary to display when the app block is collapsed.

Deprecated
App blocks no longer have a collapsed state, so this prop is no longer supported.

AdminBlockProps

title
The title to display at the top of the app block. If not provided, the name of the extension will be used. Titles longer than 40 characters will be truncated.
```
string
```
summary
The summary to display when the app block is collapsed.
```
string
```

export interface AdminBlockProps {
  /**
   * The title to display at the top of the app block. If not provided, the name of the extension will be used. Titles longer than 40 characters will be truncated.
   */
  title?: string;

  /**
   * The summary to display when the app block is collapsed.
   *
   * @deprecated App blocks no longer have a collapsed state, so this prop is no longer supported.
   */
  summary?: string;
}

Was this section helpful?

Simple AdminBlock implementation

import React from 'react';

import {reactExtension, AdminBlock} from '@shopify/ui-extensions-react/admin';

function App() {

return (

Block content

</AdminBlock>

);

}

export default reactExtension('Playground', () => <App />);

examples

Simple AdminBlock implementation

React

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

function App() {
  return (
    <AdminBlock title="My App Block">
      Block content
    </AdminBlock>
  );
}

export default reactExtension('Playground', () => <App />);

JS

import {extension, AdminBlock, Button} from '@shopify/ui-extensions/admin';

export default extension('Playground', (root) => {
  const adminBlock = root.createComponent(AdminBlock, {
    title: 'My App Block',
  }, '5 items active');

  root.appendChild(adminBlock);
  root.mount();
});

Preview

Anchor to relatedRelated

Adminaction