Added appearance prop samples for hiding unsupported options (#1777)

Co-authored-by: Alex Carpenter <[email protected]>
Co-authored-by: Alexis Aguilar <[email protected]>

docs/references/chrome-extension/sync-host.mdx

@@ -91,6 +91,34 @@ Clerk allows you to sync the authentication state from your web app to your Chro
   }
   ```
 
+  ### Hide unsupported authentication methods
+
+  When using the Sync Host feature, authentication methods that you want to use in your web app [may not be fully supported in the Chrome Extension environment](/docs/references/chrome-extension/overview#authentication-options). To hide unsupported methods in your Chrome Extension, you can use the [`appearance`](https://clerk.com/docs/customization/overview) prop with your extension's `<SignUp>` and `<SignIn>` components as demonstrated in the following examples.
+
+  <CodeBlockTabs options={["<SignUp>", "<SignIn>"]}>
+    ```tsx {{ filename: 'src/popup/pages/sign-up.tsx', mark: [[3, 7]] }}
+    <SignUp
+      appearance={{
+        elements: {
+          socialButtonsRoot: 'plasmo-hidden',
+          dividerRow: 'plasmo-hidden',
+        },
+      }}
+    />
+    ```
+
+    ```tsx {{ filename: 'src/popup/pages/sign-in.tsx', mark: [[3, 7]] }}
+    <SignIn
+      appearance={{
+        elements: {
+          socialButtonsRoot: 'plasmo-hidden',
+          dividerRow: 'plasmo-hidden',
+        },
+      }}
+    />
+    ```
+  </CodeBlockTabs>
+
   ## Configure `host_permissions`
 
   `host_permissions` specifies which hosts, or websites, will have permission to sync auth state with your app. It accepts an array, allowing you to add more than one host.