Shopify Polaris is a design system that helps create a cohesive and accessible user interface for all Shopify applications, whether they are mobile or web-based. As the demand for development has increased for Shopify apps, the Polaris Web Components Module has become a strong choice for developers who wish to build their apps using the Remix Framework.
In this blog post, we will learn how to use Polaris web components in the Shopify Remix app.
You can now use Polaris web components for better design instead of depricated polaris react components.
Steps to Use Polaris Web Components in Shopify Remix App:
Step 1: Add the library to the root.jsx
To use a web component, you need to add its library to the 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, for 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-section heading="Heading page">
<s-paragraph>Now you can use polaris web components.</s-paragraph>
</s-section>
</>
);
}
export const action = async ({ request }) => {
return null;
};Conclusion:
In conclusion, Polaris web components are a newly updated version of react components of polaris and they 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 is the difference between Polaris React and Polaris Web Components?
The React components are built on React only; the Web Components are built on the Web Component standard and are framework independent. The Web Components can be used with Frameworks like Remix, Vue, or simply with plain JavaScript.
2. Can I use Polaris Web Components with server-side rendering?
Yes, the Web Components are designed to work with Server-Side Rendering (SSR) and are built for a Server-first architecture like that of Remix.
3. Do I need App Bridge to use Polaris Web Components?
App Bridge is not required for UI components, but it is recommended for navigation, authentication, and Shopify admin interactions.
4. Are Polaris Web Components accessible?
Yes, they follow Shopify’s accessibility standards, including proper ARIA roles and keyboard navigation.
5. Can I mix Polaris Web Components with custom CSS?
Yes, but it’s recommended to rely on Polaris design tokens to maintain visual consistency.
6. Are Polaris Web Components officially supported by Shopify?
Yes, Polaris Web Components are maintained by Shopify and are designed for modern Shopify app development.
