docs: Add CTAs for ui lib (#40354)

* Add CTAs for ui lib

* Add cta to auth guides

* Revert quickstart change and add cta

* Refactor attempt

* Add new CTA partial

* Add react quickstart

* Add ui lib cta to other user management guides

---------

Co-authored-by: Chris Chinchilla <chris.ward@supabase.io>
Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com>

apps/docs/content/_partials/uiLibCta.mdx

@@ -0,0 +1,7 @@
+<Admonition type="tip" title="Explore drop-in UI components for your Supabase app.">
+
+UI components built on shadcn/ui that connect to Supabase via a single command.
+
+<Button type="primary">Explore Components</Button>
+
+</Admonition>

apps/docs/content/guides/auth/quickstarts/nextjs.mdx

@@ -35,7 +35,7 @@ hideToc: true
     - [TypeScript](https://www.typescriptlang.org/)
     - [Tailwind CSS](https://tailwindcss.com/)
 
-    [See GitHub repo](https://github.com/vercel/next.js/tree/canary/examples/with-supabase)
+    <$Partial path="uiLibCta.mdx" />
 
     </StepHikeCompact.Details>
 

apps/docs/content/guides/auth/quickstarts/react.mdx

@@ -29,17 +29,10 @@ hideToc: true
   <StepHikeCompact.Step step={2}>
   <StepHikeCompact.Details title="Create a React app">
 
-    Create a React app using [Vite](https://vitejs.dev/).
+    Select React from the [list of UI Library quickstarts](/ui/docs/getting-started/quickstart) and follow the instructions to create a new project.
 
   </StepHikeCompact.Details>
 
-  <StepHikeCompact.Code>
-
-    ```bash name=Terminal
-    npm create vite@latest my-app -- --template react
-    ```
-
-  </StepHikeCompact.Code>
 </StepHikeCompact.Step>
 
   <StepHikeCompact.Step step={3}>
@@ -64,6 +57,8 @@ hideToc: true
   <StepHikeCompact.Step step={4}>
     <StepHikeCompact.Details title="Set up your login component">
 
+    <$Partial path="uiLibCta.mdx" />
+
     In `App.jsx`, create a Supabase client using your Project URL and key.
 
     <$Partial path="api_settings_steps.mdx" />

apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx

@@ -22,7 +22,9 @@ hideToc: true
     - [TypeScript](https://www.typescriptlang.org/)
     - [Tailwind CSS](https://tailwindcss.com/)
 
-    </StepHikeCompact.Details>
+    <$Partial path="uiLibCta.mdx" />
+
+</StepHikeCompact.Details>
 
     <StepHikeCompact.Code>
 

apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx

@@ -17,7 +17,9 @@ hideToc: true
 
     <StepHikeCompact.Details title="Create a Nuxt app">
 
-    Create a Nuxt app using the `npx nuxi` command.
+    - Create a Nuxt app using the `npx nuxi` command.
+
+    <$Partial path="uiLibCta.mdx" />
 
     </StepHikeCompact.Details>
 

apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx

@@ -17,7 +17,9 @@ hideToc: true
 
     <StepHikeCompact.Details title="Create a React app">
 
-    Create a React app using a [Vite](https://vitejs.dev/guide/) template.
+    - Create a React app using a [Vite](https://vitejs.dev/guide/) template.
+
+    <$Partial path="uiLibCta.mdx" />
 
     </StepHikeCompact.Details>
 

apps/docs/content/guides/getting-started/quickstarts/vue.mdx

@@ -17,7 +17,9 @@ hideToc: true
 
     <StepHikeCompact.Details title="Create a Vue app">
 
-    Create a Vue app using the `npm init` command.
+    - Create a Vue app using the `npm init` command.
+
+    <$Partial path="uiLibCta.mdx" />
 
     </StepHikeCompact.Details>
 

apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx

@@ -3,6 +3,7 @@ title: 'Build a User Management App with Next.js'
 description: 'Learn how to use Supabase in your Next.js App.'
 ---
 
+<$Partial path="uiLibCta.mdx" />
 <$Partial path="quickstart_intro.mdx" />
 
 ![Supabase User Management example](/docs/img/user-management-demo.png)

apps/docs/content/guides/getting-started/tutorials/with-nuxt-3.mdx

@@ -3,6 +3,7 @@ title: 'Build a User Management App with Nuxt 3'
 description: 'Learn how to use Supabase in your Nuxt 3 App.'
 ---
 
+<$Partial path="uiLibCta.mdx" />
 <$Partial path="quickstart_intro.mdx" />
 
 ![Supabase User Management example](/docs/img/user-management-demo.png)

apps/docs/content/guides/getting-started/tutorials/with-react.mdx

@@ -3,6 +3,7 @@ title: 'Build a User Management App with React'
 description: 'Learn how to use Supabase in your React App.'
 ---
 
+<$Partial path="uiLibCta.mdx" />
 <$Partial path="quickstart_intro.mdx" />
 
 ![Supabase User Management example](/docs/img/user-management-demo.png)

apps/docs/content/guides/getting-started/tutorials/with-vue-3.mdx

@@ -3,6 +3,7 @@ title: 'Build a User Management App with Vue 3'
 description: 'Learn how to use Supabase in your Vue 3 App.'
 ---
 
+<$Partial path="uiLibCta.mdx" />
 <$Partial path="quickstart_intro.mdx" />
 
 ![Supabase User Management example](/docs/img/user-management-demo.png)