app bridge vs polaroid

3 0 0

What is the difference and what should I use?


My understanding - both are for admin frontend development. Bridge - is plain js based, while polaroid is react.

I should use one of them depending on js or react preference and should not/should use both at once?


Any other ideas or missed here?

Replies 3 (3)

Shopify Staff
58 13 28

Hi kkriv,

You can use both App Bridge and Polaris at the same time. Polaris allows you to create UI elements inside your app iframe while App Bridge provides a way to render UI in Shopify Admin outside of your app. For example, when rendering a Banner inside your app you should use Polaris. For components that gets rendered outside your app iframe such as Modal, Toast and Title Bar, you would use App Bridge.

Currently, Polaris also provides access to App Bridge components but this is being deprecated in future release:

App Bridge is a vanilla JS library but it has React components released in a separate package:

If your app is a React app, you should use Polaris (@shopify/polaris) alongside App Bridge React (@shopify/app-bridge-react).


Trish | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

11 0 6

hi @Trish_Ta , why Modal, Toast, TitleBar are outside of my app?

I thought they are part of the app, no?

Shopify Partner
12 0 1

This just made it a whole lot more confusing. Isn't all components of our Shopify app supposed to be on an iframe? or do I have the wrong understanding. Hope you solve this. soon.