Difference between Shopify App Bridge and Polaris

Technical Q&A

Topic summary

Core Question:
Developers are confused about when to use Shopify App Bridge versus Polaris, particularly when both offer similar components like Loading.

Key Distinction:

  • Polaris = Design system and UI component library for making apps look like Shopify (buttons, cards, forms, tables)
  • App Bridge = JavaScript library for making apps work with Shopify by enabling communication between embedded apps and the Shopify admin environment

Practical Usage:

  • Use Polaris for visual consistency with Shopify’s admin interface
  • Use App Bridge for functionality like opening resource pickers, navigation, or interacting with the host environment
  • Both are typically used together in embedded apps to create seamless merchant experiences

Status: Question answered with code examples provided for both libraries.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

I’m using React to develop an App, and I’m unsure about the difference between Shopify App Bridge and Polaris.

For example, both Shopify App Bridge and Polaris provide Loading component, and I’m not sure which one to use.

Is there a difference?

2 Likes
2

Was wondering the same thing. Can someone from Shopify clear this out?

3

Hi D tehrani.

In short:

  • Polaris is for making your app look like Shopify.
  • App Bridge is for making your app work with Shopify.

They are often used together to create a seamless experience for merchants using embedded apps.

A more detailed explanation:

Polaris is Shopify’s design system and component library. It provides pre-built UI components (buttons, cards, forms, etc.) that match the look and feel of the Shopify admin.

Example: You want to add a button or a data table inside your app’s UI that looks like it belongs in Shopify.

import { Button, Card } from '@shopify/polaris';

function MyAppPage() {
  return (
    
  );
}

App Bridge is a JavaScript library that allows your embedded Shopify app (running in an iframe / WebView within the Shopify admin) to communicate and interact with the Shopify host environment.

Example: Your app needs to open Shopify’s product picker.

import { createApp } from '@shopify/app-bridge';
import { ResourcePicker } from '@shopify/app-bridge/actions';

const app = createApp({
  apiKey: 'YOUR_APP_API_KEY',
  host: new URLSearchParams(location.search).get("host"),
});

const productPicker = ResourcePicker.create(app, {
  resourceType: ResourcePicker.ResourceType.Product,
  options: { selectMultiple: false }
});

// To open the picker
productPicker.dispatch(ResourcePicker.Action.OPEN);