# Polaris autocomponents (web components) Polaris web component autocomponents are built using Shopify's [Polaris web components](https://shopify.dev/docs/api/app-home/polaris-web-components) design system and are designed to be used in Shopify apps. Unlike the React-based Polaris autocomponents, these use Shopify's web component system, such as ``, ``, and ``, which are loaded via a ` {children} ); }; ``` **For declarative routing apps using Vite + React Router**, add the script tag to your `web/index.html` file: ```html // in web/index.html ``` ### Step 3: Install type definitions Install the Polaris web component type definitions as a dev dependency: ```bash yarn add @shopify/app-bridge-types @shopify/polaris-types --dev ``` ### Step 4: Update your TypeScript configuration Add `"@shopify/app-bridge-types"` and `"@shopify/polaris-types"` to the `compilerOptions.types` array in your TypeScript config so that the custom `` elements are recognized by TypeScript and your editor. If your project has a `tsconfig.web.json` file, update that file. Otherwise, update `tsconfig.json`. ```json // in tsconfig.web.json (or tsconfig.json if tsconfig.web.json does not exist) { "compilerOptions": { "types": [ // ... other types ... "@shopify/app-bridge-types", "@shopify/polaris-types" // ... other types ... ] } } ``` ### Step 5: Remove the Polaris React provider If your app currently uses the React-based Polaris components, you can remove the `AppProvider` wrapper and related imports. Polaris web components do not require a React provider. They work as soon as the script tag is loaded. Remove the following from your root layout or `main.tsx`: ```tsx // Remove these imports import { AppProvider } from "@shopify/polaris"; import "@shopify/polaris/build/esm/styles.css"; import enTranslations from "@shopify/polaris/locales/en.json"; ``` And remove the `` wrapper from your component tree. Note that this requires you to fully migrate your app from Polaris React to Polaris web components. ## Usage Import Shopify Polaris web component autocomponents from `@gadgetinc/react/auto/polaris-wc`: ```tsx import { AutoForm, AutoTable, AutoInput, AutoSubmit } from "@gadgetinc/react/auto/polaris-wc"; ``` For example, to use the `AutoForm` component: ```tsx import { AutoForm, AutoInput, AutoSubmit } from "@gadgetinc/react/auto/polaris-wc"; import { api } from "../api"; export default function () { return ( ); } ``` For all field types, there are field type-specific input components that have additional props you can use to further customize the inputs. ```tsx import { AutoForm, AutoStringInput, AutoSubmit } from "@gadgetinc/react/auto/polaris-wc"; import { api } from "../api"; export default function () { return ( console.log("focused")} /> ); } ``` ### Custom action Polaris web component modal To render a custom popup when a user selects an action, create a custom action and use it to show a modal: ```tsx import { AutoTable } from "@gadgetinc/react/auto/polaris-wc"; import { api } from "../api"; import { Modal, TitleBar, useAppBridge } from "@shopify/app-bridge-react"; export default function () { const shopify = useAppBridge(); return ( <> { // show the modal when the action is clicked shopify.modal.show("my-modal"); }, }, ]} /> {/** use the Shopify AppBridge modal component */} ); } ```