Assign sdks in frontmatter for docs that should only be visible to a subset of sdks

docs/components/authentication/google-one-tap.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<GoogleOneTap />` component'
 description: Clerk's <GoogleOneTap /> component renders a UI for authenticating users with Google's One Tap API.
+sdk: astro, chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 > [!IMPORTANT]

docs/components/authentication/sign-in.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<SignIn />` component'
 description: Clerk's <SignIn /> component renders a UI for signing in users.
+sdk: astro, chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 ![The \<SignIn /> component renders a UI for signing in users.](/docs/images/ui-components/sign-in.png){{ style: { maxWidth: '460px' } }}

docs/components/authentication/sign-up.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<SignUp />` component'
 description: Clerk's <SignUp /> component renders a UI for signing up users.
+sdk: astro, chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 ![The \<SignUp /> component renders a UI for signing up users.](/docs/images/ui-components/sign-up.png){{ style: { maxWidth: '460px' } }}

docs/components/clerk-provider.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<ClerkProvider>`'
 description: The <ClerkProvider> component provides session and user context to Clerk's hooks and components.
+sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start, js-frontend
 ---
 
 The `<ClerkProvider>` component is required to integrate Clerk into your React application, providing session and user context to Clerk's hooks and components.

docs/components/control/authenticate-with-callback.mdx

@@ -1,6 +1,7 @@
 ---
 title: <code>\<AuthenticateWith<wbr />RedirectCallback /></code>
 description: Clerk's `<AuthenticateWithRedirectCallback />` component is used to implement custom OAuth flows. It handles the OAuth callback and completes the authentication process.
+sdk: astro, chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 The `<AuthenticateWithRedirectCallback />` component is a crucial part of implementing custom OAuth flows in your application. It serves as the callback handler for the authentication process initiated by the `authenticateWithRedirect()` method. Render it on the route specified as the `redirectUrl` in your `authenticateWithRedirect()` call.

docs/components/control/clerk-loaded.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<ClerkLoaded>`'
 description: The `<ClerkLoaded>` component guarantees that the Clerk object has loaded and will be available under `window.Clerk`. This allows you to wrap child components to access the Clerk object without the need to check it exists.
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 The `<ClerkLoaded>` component guarantees that the Clerk object has loaded and will be available under `window.Clerk`. This allows you to wrap child components to access the `Clerk` object without the need to check it exists.

docs/components/control/clerk-loading.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<ClerkLoading>`'
 description: The `<ClerkLoading>` renders its children while Clerk is loading, and is helpful for showing a custom loading state.
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 The `<ClerkLoading>` renders its children while Clerk is loading, and is helpful for showing a custom loading state.

docs/components/control/redirect-to-createorganization.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<RedirectToCreateOrganization />` (deprecated)'
 description: The <RedirectToCreateOrganization /> component will navigate to the user profile URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.
+sdk: chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 > [!WARNING]

docs/components/control/redirect-to-organizationprofile.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<RedirectToOrganizationProfile />` (deprecated)'
 description: The <RedirectToOrganizationProfile /> component will navigate to the organization profile URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.
+sdk: chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 > [!WARNING]

docs/components/control/redirect-to-signin.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<RedirectToSignIn />`'
 description: The <RedirectToSignIn /> component will navigate to the sign in URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.
+sdk: chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 The `<RedirectToSignIn />` component will navigate to the sign in URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.

docs/components/control/redirect-to-signup.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<RedirectToSignUp />`'
 description: The <RedirectToSignUp /> component will navigate to the sign up URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.
+sdk: chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 The `<RedirectToSignUp />` component will navigate to the sign up URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.

docs/components/control/redirect-to-userprofile.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<RedirectToUserProfile />` (deprecated)'
 description: The <RedirectToUserProfile /> component will navigate to the user profile URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.
+sdk: chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 > [!WARNING]

docs/components/control/signed-in.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<SignedIn>`'
 description: Conditionally render content only when a user is signed in.
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 ## Overview

docs/components/control/signed-out.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<SignedOut>`'
 description: Conditionally render content only when a user is signed out.
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 The `<SignedOut>` component offers authentication checks as a cross-cutting concern. Any child nodes wrapped by a `<SignedOut>` component will be rendered only if there's no User signed in to your application.

docs/components/organization/create-organization.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<CreateOrganization />` component'
 description: Clerk's <CreateOrganization /> component is used to render an organization creation UI that allows users to create brand new organizations within your application.
+sdk: chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 ![The \<CreateOrganization /> component renders an organization creation UI that allows users to create brand new organizations within your application.](/docs/images/ui-components/create-organization.png){{ style: { maxWidth: '492px' } }}

docs/components/organization/organization-list.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<OrganizationList />` component'
 description: Clerk's <OrganizationList /> component is used to display organization related memberships, invitations, and suggestions for the user.
+sdk: astro, chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 ![The \<OrganizationList /> component displays organization-related memberships and automatic invitations and suggestions for the user.](/docs/images/ui-components/organization-list.png){{ style: { maxWidth: '460px' } }}

docs/components/organization/organization-profile.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<OrganizationProfile />` component'
 description: Clerk's <OrganizationProfile /> component is used to render a beautiful, full-featured organization management UI that allows users to manage their organization profile and security settings.
+sdk: astro, chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 ![The \<OrganizationProfile /> component allows users to manage their organization membership and security settings.](/docs/images/ui-components/organization-profile.png)

docs/components/organization/organization-switcher.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<OrganizationSwitcher />` component'
 description: Clerk's <OrganizationSwitcher /> component is used to enable the ability to switch between available organizations the user may be part of in your application.
+sdk: astro, chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 ![The \<OrganizationSwitcher /> component allows a user to switch between their account types - their personal account and their joined organizations.](/docs/images/ui-components/organization-switcher.png){{ style: { maxWidth: '436px' } }}

docs/components/overview.mdx

@@ -1,45 +1,93 @@
 ---
 title: Component Reference
 description: A list of Clerk's comprehensive suite of components designed to seamlessly integrate authentication and multi-tenancy into your application.
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 Clerk offers a comprehensive suite of components designed to seamlessly integrate authentication and multi-tenancy into your application. With Clerk components, you can easily customize the appearance of authentication components and pages, manage the entire authentication flow to suit your specific needs, and even build robust SaaS applications.
 
-## UI components
-
-- [`<SignIn />`](/docs/components/authentication/sign-in)
-- [`<SignUp />`](/docs/components/authentication/sign-up)
-- [`<GoogleOneTap />`](/docs/components/authentication/google-one-tap)
-- [`<UserButton />`](/docs/components/user/user-button)
-- [`<UserProfile />`](/docs/components/user/user-profile)
-- [`<CreateOrganization />`](/docs/components/organization/create-organization)
-- [`<OrganizationProfile />`](/docs/components/organization/organization-profile)
-- [`<OrganizationSwitcher />`](/docs/components/organization/organization-switcher)
-- [`<OrganizationList />`](/docs/components/organization/organization-list)
-- [`<Waitlist />`](/docs/components/waitlist)
-
-## Control components
-
-Control components manage authentication-related behaviors in your application. They handle tasks such as controlling content visibility based on user authentication status, managing loading states during authentication processes, and redirecting users to appropriate pages. Control components render at `<Loading />` and `<Loaded />` states for assertions on the [`Clerk` object](/docs/references/javascript/clerk). A common example is the [`<SignedIn>`](/docs/components/control/signed-in) component, which allows you to conditionally render content only when a user is authenticated.
-
-- [`<AuthenticateWithRedirectCallback />`](/docs/components/control/authenticate-with-callback)
-- [`<ClerkLoaded />`](/docs/components/control/clerk-loaded)
-- [`<ClerkLoading />`](/docs/components/control/clerk-loading)
-- [`<Protect />`](/docs/components/protect)
-- [`<RedirectToSignIn />`](/docs/components/control/redirect-to-signin)
-- [`<RedirectToSignUp />`](/docs/components/control/redirect-to-signup)
-- [`<RedirectToUserProfile />`](/docs/components/control/redirect-to-userprofile)
-- [`<RedirectToOrganizationProfile />`](/docs/components/control/redirect-to-organizationprofile)
-- [`<RedirectToCreateOrganization />`](/docs/components/control/redirect-to-createorganization)
-- [`<SignedIn />`](/docs/components/control/signed-in)
-- [`<SignedOut />`](/docs/components/control/signed-out)
-
-## Unstyled components
-
-- [`<SignInButton />`](/docs/components/unstyled/sign-in-button)
-- [`<SignInWithMetamask />`](/docs/components/unstyled/sign-in-with-metamask)
-- [`<SignUpButton />`](/docs/components/unstyled/sign-up-button)
-- [`<SignOutButton />`](/docs/components/unstyled/sign-out-button)
+<If
+  sdk={["chrome-extension", "nextjs", "nuxt", "react", "react-router", "remix", "tanstack-react-start", "vue", "js-frontend"]}
+>
+  ## UI components
+
+  - [`<SignIn />`](/docs/components/authentication/sign-in)
+  - [`<SignUp />`](/docs/components/authentication/sign-up)
+  - [`<GoogleOneTap />`](/docs/components/authentication/google-one-tap)
+  - [`<UserButton />`](/docs/components/user/user-button)
+  - [`<UserProfile />`](/docs/components/user/user-profile)
+  - [`<CreateOrganization />`](/docs/components/organization/create-organization)
+  - [`<OrganizationProfile />`](/docs/components/organization/organization-profile)
+  - [`<OrganizationSwitcher />`](/docs/components/organization/organization-switcher)
+  - [`<OrganizationList />`](/docs/components/organization/organization-list)
+  - [`<Waitlist />`](/docs/components/waitlist)
+
+  ## Control components
+
+  Control components manage authentication-related behaviors in your application. They handle tasks such as controlling content visibility based on user authentication status, managing loading states during authentication processes, and redirecting users to appropriate pages. Control components render at `<Loading />` and `<Loaded />` states for assertions on the [`Clerk` object](/docs/references/javascript/clerk). A common example is the [`<SignedIn>`](/docs/components/control/signed-in) component, which allows you to conditionally render content only when a user is authenticated.
+
+  - [`<AuthenticateWithRedirectCallback />`](/docs/components/control/authenticate-with-callback)
+  - [`<ClerkLoaded />`](/docs/components/control/clerk-loaded)
+  - [`<ClerkLoading />`](/docs/components/control/clerk-loading)
+  - [`<Protect />`](/docs/components/protect)
+  - [`<RedirectToSignIn />`](/docs/components/control/redirect-to-signin)
+  - [`<RedirectToSignUp />`](/docs/components/control/redirect-to-signup)
+  - [`<RedirectToUserProfile />`](/docs/components/control/redirect-to-userprofile)
+  - [`<RedirectToOrganizationProfile />`](/docs/components/control/redirect-to-organizationprofile)
+  - [`<RedirectToCreateOrganization />`](/docs/components/control/redirect-to-createorganization)
+  - [`<SignedIn />`](/docs/components/control/signed-in)
+  - [`<SignedOut />`](/docs/components/control/signed-out)
+
+  ## Unstyled components
+
+  - [`<SignInButton />`](/docs/components/unstyled/sign-in-button)
+  - [`<SignInWithMetamask />`](/docs/components/unstyled/sign-in-with-metamask)
+  - [`<SignUpButton />`](/docs/components/unstyled/sign-up-button)
+  - [`<SignOutButton />`](/docs/components/unstyled/sign-out-button)
+</If>
+
+<If sdk="astro">
+  ## UI components
+
+  - [`<SignIn />`](/docs/components/authentication/sign-in)
+  - [`<SignUp />`](/docs/components/authentication/sign-up)
+  - [`<GoogleOneTap />`](/docs/components/authentication/google-one-tap)
+  - [`<UserButton />`](/docs/components/user/user-button)
+  - [`<UserProfile />`](/docs/components/user/user-profile)
+  - [`<OrganizationProfile />`](/docs/components/organization/organization-profile)
+  - [`<OrganizationSwitcher />`](/docs/components/organization/organization-switcher)
+  - [`<OrganizationList />`](/docs/components/organization/organization-list)
+  - [`<Waitlist />`](/docs/components/waitlist)
+
+  ## Control components
+
+  Control components manage authentication-related behaviors in your application. They handle tasks such as controlling content visibility based on user authentication status, managing loading states during authentication processes, and redirecting users to appropriate pages. Control components render at `<Loading />` and `<Loaded />` states for assertions on the [`Clerk` object](/docs/references/javascript/clerk). A common example is the [`<SignedIn>`](/docs/components/control/signed-in) component, which allows you to conditionally render content only when a user is authenticated.
+
+  - [`<AuthenticateWithRedirectCallback />`](/docs/components/control/authenticate-with-callback)
+  - [`<ClerkLoaded />`](/docs/components/control/clerk-loaded)
+  - [`<ClerkLoading />`](/docs/components/control/clerk-loading)
+  - [`<Protect />`](/docs/components/protect)
+  - [`<SignedIn />`](/docs/components/control/signed-in)
+  - [`<SignedOut />`](/docs/components/control/signed-out)
+
+  ## Unstyled components
+
+  - [`<SignInButton />`](/docs/components/unstyled/sign-in-button)
+  - [`<SignUpButton />`](/docs/components/unstyled/sign-up-button)
+  - [`<SignOutButton />`](/docs/components/unstyled/sign-out-button)
+</If>
+
+<If sdk="expo">
+  ## Control components
+
+  Control components manage authentication-related behaviors in your application. They handle tasks such as controlling content visibility based on user authentication status, managing loading states during authentication processes, and redirecting users to appropriate pages. Control components render at `<Loading />` and `<Loaded />` states for assertions on the [`Clerk` object](/docs/references/javascript/clerk). A common example is the [`<SignedIn>`](/docs/components/control/signed-in) component, which allows you to conditionally render content only when a user is authenticated.
+
+  - [`<ClerkLoaded />`](/docs/components/control/clerk-loaded)
+  - [`<ClerkLoading />`](/docs/components/control/clerk-loading)
+  - [`<Protect />`](/docs/components/protect)
+  - [`<SignedIn />`](/docs/components/control/signed-in)
+  - [`<SignedOut />`](/docs/components/control/signed-out)
+</If>
 
 ## Customization Guides
 

docs/components/pricing-table.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<PricingTable />`'
 description: Clerk's <PricingTable /> component displays a table of Plans and Features that users can subscribe to.
+sdk: astro, chrome-extension, js-frontend, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue
 ---
 
 The `<PricingTable />` component displays a table of Plans and Features that users can subscribe to.

docs/components/protect.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<Protect>`'
 description: The Protect component is used for authorization checks. It only renders its children when the current user has been granted a specific type of access control (role, permission, feature, or plan).
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 The `<Protect>` component protects content or even entire routes by checking if the user has been granted a specific type of access control (role, permission, feature, or plan). You can pass it a `fallback` prop that will be rendered if the user does not have the access control.

docs/components/unstyled/sign-in-button.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<SignInButton>`'
 description: The <SignInButton> component is a button that links to the sign-in page or displays the sign-in modal.
+sdk: astro, chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 The `<SignInButton>` component is a button that links to the sign-in page or displays the sign-in modal.

docs/components/unstyled/sign-in-with-metamask.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<SignInWithMetamaskButton>`'
 description: The `<SignInWithMetamaskButton>` component is used to complete a one-click, cryptographically-secure sign-in flow using MetaMask.
+sdk: chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 The `<SignInWithMetamaskButton>` component is used to complete a one-click, cryptographically-secure sign-in flow using MetaMask.

docs/components/unstyled/sign-out-button.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<SignOutButton>`'
 description: The `<SignOutButton>` component is a button that signs a user out.
+sdk: astro, chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 The `<SignOutButton>` component is a button that signs a user out. By default, it is a `<button>` tag that says **Sign Out**, but it is completely customizable by passing children.

docs/components/unstyled/sign-up-button.mdx

@@ -1,6 +1,7 @@
 ---
 title: '`<SignUpButton>`'
 description: The <SignUpButton> component is a button that links to the sign-up page or displays the sign-up modal.
+sdk: astro, chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend
 ---
 
 The `<SignUpButton>` component is a button that links to the sign-up page or displays the sign-up modal.