Admin UI Extensions is a library that enables developers to write custom JavaScript to be sent to and rendered within the Shopify Admin UI on Web, Android, and iOS. It makes use of Shopify's [remote-ui](https://github.com/Shopify/remote-ui) library, which
Admin UI Extensions is a library that enables developers to write custom JavaScript to be sent to and rendered within the Shopify Admin UI on Web, Android, and iOS. It makes use of Shopify's remote-ui library, which exposes the methods to create a RemoteRoot -- a root node that communicates operations (adding or removing children, changing properties of components, etc.) through a MessageChannel to the Shopify app.
There are two ways to use Admin UI Extensions components in your extension - vanilla JS and React.
With the vanilla JS approach, adding a button looks like the following:
``js
import {extend, Button} from '@shopify/admin-ui-extensions';
extend('Playground', (root) => {
const button = root.createComponent(Button, {
title: 'Press Me',
primary: true,
onPress: () => console.log('Pressed'),
disabled: false,
});
root.appendChild(button);
root.mount();
});
``
You can find more component usage examples alongside each component in packages/admin-ui-extensions/src/components
To use the React implementation, check out packages/admin-ui-extensions-react.