# 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.

```tsx
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();
});

```

## AdminBlockProps

### AdminBlockProps

### summary

value: `string`

The summary to display when the app block is collapsed.

### title

value: `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.

## Related

- [Adminaction](https://shopify.dev/docs/api/admin-extensions/components/other/adminaction)