Using both Polaris web components Polaris React

Using Polaris web components and Polaris React

We are excited about the development experience of Polaris web components provides.

And we encourage you to migrate your applications as you can. If you have feedback regarding needed components please create a post in the developer community forums.

If you would like to gradually migrate your application you can use both versions of Polaris in one app.

An example set up in Typescript could look like

Example set up

//app.tsx
 import type { HeadersFunction, LoaderFunctionArgs } from "react-router";
 import { Link, Outlet, useLoaderData, useRouteError } from "react-router";
 import { boundary } from "@shopify/shopify-app-react-router/server";
 import { AppProvider } from "@shopify/shopify-app-react-router/react";
+import { AppProvider as PolarisAppProvider } from "@shopify/polaris";
+import type {
+  LinkLikeComponent,
+  LinkLikeComponentProps,
+} from '@shopify/polaris/build/ts/src/utilities/link';
+import englishI18n from '@shopify/polaris/locales/en.json' with {type: 'json'};
+import React from "react";
+import polarisStyles from "@shopify/polaris/build/esm/styles.css?url";
 
 import { authenticate } from "../shopify.server";
 
+export const links = () => [{ rel: "stylesheet", href: polarisStyles }];
+
+// PolarisLink adapter using imported types
+const PolarisLink = React.forwardRef<HTMLAnchorElement, LinkLikeComponentProps>(
+  ({ url, children, external, ...rest }, ref) => {
+    if (external) {
+      return <a href={url} ref={ref} {...rest}>{children}</a>;
+    }
+    return <Link to={url} ref={ref} {...rest}>{children}</Link>;
+  }
+) as LinkLikeComponent;
+PolarisLink.displayName = 'PolarisLink';
+
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   await authenticate.admin(request);
 
   return { apiKey: process.env.SHOPIFY_API_KEY || "" };
 };
 
 export default function App() {
   const { apiKey } = useLoaderData<typeof loader>();
 
   return (
     <AppProvider embedded apiKey={apiKey}>
+      <PolarisAppProvider i18n={englishI18n} linkComponent={PolarisLink}>
         <ui-nav-menu>
           <Link to="/app" rel="home">
             Home
           </Link>
           <Link to="/app/additional">Additional page</Link>
         </ui-nav-menu>
         <Outlet />
+      </PolarisAppProvider>
     </AppProvider>
   );
 }
 
 // Shopify needs React Router to catch some thrown responses, so that their headers are included in the response.
 export function ErrorBoundary() {
   return boundary.error(useRouteError());
 }
 
 export const headers: HeadersFunction = (headersArgs) => {
   return boundary.headers(headersArgs);
 };

With this set up you can use both Polaris React and Polaris web components within your routes.

      <s-section heading="Polaris React Components Integration">
        <s-paragraph>
          The table below demonstrates using Polaris React components
          (IndexTable) alongside Polaris web components in the same app.
        </s-paragraph>
      </s-section>
      {/* Polaris React Components */}
      <Box paddingBlockStart="400">
        <Card>
          <IndexTableExample />
        </Card>
      </Box>