diff --git a/apps/docs/content/_partials/uiLibCta.mdx b/apps/docs/content/_partials/uiLibCta.mdx new file mode 100644 index 00000000000..e5f61f46613 --- /dev/null +++ b/apps/docs/content/_partials/uiLibCta.mdx @@ -0,0 +1,7 @@ + + +UI components built on shadcn/ui that connect to Supabase via a single command. + + + + diff --git a/apps/docs/content/guides/auth/quickstarts/nextjs.mdx b/apps/docs/content/guides/auth/quickstarts/nextjs.mdx index 7df9374334b..ba866f6c8a0 100644 --- a/apps/docs/content/guides/auth/quickstarts/nextjs.mdx +++ b/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" /> diff --git a/apps/docs/content/guides/auth/quickstarts/react.mdx b/apps/docs/content/guides/auth/quickstarts/react.mdx index 2f1b94c74fd..243d2c0d8ab 100644 --- a/apps/docs/content/guides/auth/quickstarts/react.mdx +++ b/apps/docs/content/guides/auth/quickstarts/react.mdx @@ -29,17 +29,10 @@ hideToc: true - 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. - - - ```bash name=Terminal - npm create vite@latest my-app -- --template react - ``` - - @@ -64,6 +57,8 @@ hideToc: true + <$Partial path="uiLibCta.mdx" /> + In `App.jsx`, create a Supabase client using your Project URL and key. <$Partial path="api_settings_steps.mdx" /> diff --git a/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx index 64d58d9dee4..b2e7ac73674 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx +++ b/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/) - + <$Partial path="uiLibCta.mdx" /> + + diff --git a/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx index d9a6a20cd74..4a0c47a1e2b 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx @@ -17,7 +17,9 @@ hideToc: true - Create a Nuxt app using the `npx nuxi` command. + - Create a Nuxt app using the `npx nuxi` command. + + <$Partial path="uiLibCta.mdx" /> diff --git a/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx index d9bf9f3d138..ffafeb5391d 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx @@ -17,7 +17,9 @@ hideToc: true - 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" /> diff --git a/apps/docs/content/guides/getting-started/quickstarts/vue.mdx b/apps/docs/content/guides/getting-started/quickstarts/vue.mdx index 715acdd2eaf..0c73a9f5f65 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/vue.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/vue.mdx @@ -17,7 +17,9 @@ hideToc: true - Create a Vue app using the `npm init` command. + - Create a Vue app using the `npm init` command. + + <$Partial path="uiLibCta.mdx" /> diff --git a/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx b/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx index 4fe57e4e3aa..77ea987cade 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx +++ b/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) diff --git a/apps/docs/content/guides/getting-started/tutorials/with-nuxt-3.mdx b/apps/docs/content/guides/getting-started/tutorials/with-nuxt-3.mdx index e9e2205e105..d4d1c793444 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-nuxt-3.mdx +++ b/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) diff --git a/apps/docs/content/guides/getting-started/tutorials/with-react.mdx b/apps/docs/content/guides/getting-started/tutorials/with-react.mdx index 6710edba74b..a877837bfa8 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-react.mdx +++ b/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) diff --git a/apps/docs/content/guides/getting-started/tutorials/with-vue-3.mdx b/apps/docs/content/guides/getting-started/tutorials/with-vue-3.mdx index 72d9408a27a..1d5185fd931 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-vue-3.mdx +++ b/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)