Building modern Shopify apps requires a seamless user experience inside the Shopify admin. With Polaris App Bridge Web Components, developers can now create powerful embedded apps more cleanly and flexibly—especially when working with a Shopify Remix App.
In this blog post, we will learn how to use Polaris App Bridge Web Components in the Shopify Remix App. You can now use Polaris App Bridge Web Components for better design instead of deprecated Polaris React Components.
Steps to Use Polaris App Bridge Web Components in Shopify Remix App:
Step 1: Add the library in root.jsx
For using a web component, you need to add its library in root.jsx. Also need to add Polaris app bridge library inside root.jsx.
Here is a code sample for root.jsx:
import {
Links,
Meta,
Scripts,
} from "@remix-run/react";
export default function App() {
return (
<html>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script> {/* need to add this line */}
<script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script> {/* need to add this line */}
<Meta />
<Links />
<title>Test app</title>
</head>
<body></body>
</html>
);
}After adding the library to the root.jsx you can easily use the Polaris web component in your Remix app.
Step 2: Use the component in files
Now you can easily use the web components in any file when required. Here is a simple code sample.
Title bar example
import { json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
import { useCallback, useEffect, useState } from "react";
export async function loader() {
return null;
}
export default function Index() {
return (
<>
<s-page heading="Page Title">
<s-button slot="primary-action" onclick="shopify.toast.show('Save')">Save</s-button>
<s-button slot="secondary-actions" onclick="shopify.toast.show('Close')">Close</s-button>
<s-button slot="secondary-actions" onclick="shopify.toast.show('Cancel')">Cancel</s-button>
</s-page>
</>
);
}
export const action = async ({ request }) => {
return null;
};App window example
import { json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
import { useCallback, useEffect, useState } from "react";
export async function loader() {
return null;
}
export default function Index() {
return (
<>
<s-page heading="Page Title">
<s-app-window id="app-window" src="/app-window-content.html"></s-app-window>
<s-button command="--show" commandFor="app-window">Open App Window</s-button>
</s-page>
</>
);
}
export const action = async ({ request }) => {
return null;
};Conclusion:
In conclusion, the Polaris app bridge web components have a newly updated version of React components of Polaris, and it will deprecate the Polaris React component in the future. So moving to a web component is the smart move for future updates.
FAQ
1. What are Polaris App Bridge Web Components?
They are Shopify’s framework-agnostic UI components that integrate directly with App Bridge, allowing developers to build embedded Shopify admin apps without relying fully on React Polaris.
2. Do I need React Polaris if I use Web Components?
No. Web Components work independently of React. However, you can mix them if needed.
3. Are Polaris Web Components recommended for new Shopify apps?
Yes. Shopify encourages using Web Components for better performance and simpler embedded app development.
