diff --git a/apps/docs/content/guides/getting-started/quickstarts/react-router.mdx b/apps/docs/content/guides/getting-started/quickstarts/react-router.mdx
new file mode 100644
index 00000000000..059dfa4f477
--- /dev/null
+++ b/apps/docs/content/guides/getting-started/quickstarts/react-router.mdx
@@ -0,0 +1,243 @@
+---
+title: 'Use Supabase with React Router'
+subtitle: 'Learn how to create a Supabase project, add some sample data, and query from a React Router app.'
+breadcrumb: 'Framework Quickstarts'
+hideToc: true
+---
+
+
+
+
+
+
+
+ Go to [database.new](https://database.new) and create a new Supabase project.
+
+ When your project is up and running, go to the [Table Editor](https://supabase.com/dashboard/project/_/editor), create a new table and insert some data.
+
+ Alternatively, you can run the following snippet in your project's [SQL Editor](https://supabase.com/dashboard/project/_/sql/new). This will create a `notes` table with some sample data.
+
+
+
+
+
+ ```sql SQL_EDITOR
+ -- Create the table
+ create table notes (
+ id bigint primary key generated always as identity,
+ title text not null
+ );
+
+ -- Insert some sample data into the table
+ insert into notes (title)
+ values
+ ('Today I created a Supabase project.'),
+ ('I added some data and queried it from React Router.'),
+ ('It was awesome!');
+
+ alter table notes enable row level security;
+ ```
+
+
+
+
+
+ Make the data in your table publicly readable by adding an RLS policy:
+
+
+
+
+
+ ```sql SQL_EDITOR
+ create policy "public can read notes"
+ on public.notes
+ for select to anon
+ using (true);
+ ```
+
+
+
+
+
+
+
+
+
+ Use the `create-React Router` command with our official template, to create a React Router app pre-configured with:
+ - [Cookie-based Auth](https://supabase.com/docs/guides/auth/server-side)
+ - [TypeScript](https://www.typescriptlang.org/)
+ - [Tailwind CSS](https://tailwindcss.com/)
+
+
+
+
+
+ ```bash Terminal
+ !!!!!change this url before going live!!!!!
+ npx create-React Router@latest --template https://github.com/supabase-community???/React Router-quickstart
+ ```
+
+
+
+
+
+
+
+
+ Rename `.env.example` to `.env.local` and populate with your Supabase connection variables:
+
+
+
+
+
+
+
+
+ ```text .env.local
+ SUPABASE_URL=
+ SUPABASE_ANON_KEY=
+ ```
+
+
+
+
+
+
+
+
+ Create a new file at `app/routes/notes.tsx` and populate with the following.
+
+ This will select all the rows from the `notes` table in Supabase and render them on the page.
+
+
+
+
+
+
+
+ ```ts app/routes/notes.tsx
+
+import { useFetcher } from 'react-router'
+import { createClient } from '~/lib/supabase.server'
+import { useRef, useEffect } from 'react'
+import type { Route } from './+types/notes'
+
+export async function loader({ request }: Route.LoaderArgs) {
+ const { supabase } = createClient(request)
+
+const { data: notes } = await supabase.from('notes').select()
+
+return {
+notes,
+}
+}
+
+export async function action({ request }: Route.ActionArgs) {
+ const { supabase } = createClient(request)
+ const formData = await request.formData()
+ const title = formData.get('title')
+
+if (typeof title !== 'string' || !title) {
+return { error: 'Title is required' }
+}
+
+await supabase.from('notes').insert({ title })
+return { success: true }
+}
+
+type ActionResponse = { success: boolean } | { error: string }
+
+export default function Page({ loaderData }: Route.ComponentProps) {
+ const { notes } = loaderData
+ const fetcher = useFetcher()
+ const formRef = useRef(null)
+
+// Reset form when submission is successful
+useEffect(() => {
+if (fetcher.state === 'idle' && !('error' in (fetcher.data || {}))) {
+formRef.current?.reset()
+}
+}, [fetcher])
+
+return (
+
+
+
+
Notes
+
+
+
+
+
+
+
+
{JSON.stringify(notes, null, 2)}
+
+
+
+)
+}
+
+````
+
+```ts app/lib/supabase.server.ts
+
+import { createServerClient, parseCookieHeader, serializeCookieHeader } from "@supabase/ssr"
+
+export function createClient(request: Request) {
+ const headers = new Headers()
+
+ const supabase = createServerClient(process.env.SUPABASE_URL!, process.env.SUPABASE_ANON_KEY!, {
+ cookies: {
+ getAll() {
+ return parseCookieHeader(request.headers.get('Cookie') ?? '')
+ },
+ setAll(cookiesToSet) {
+ cookiesToSet.forEach(({ name, value, options }) =>
+ headers.append('Set-Cookie', serializeCookieHeader(name, value, options))
+ )
+ },
+ },
+ })
+
+ return { supabase, headers }
+}
+
+````
+
+
+
+
+
+
+
+
+
+
+ Run the development server, go to http://localhost:5174/notes in a browser and you should see the list of notes.
+
+
+
+
+
+ ```bash Terminal
+ npm run dev
+ ```
+
+
+
+
+
+
+
+## Next steps
+
+- Set up [Auth](/docs/guides/auth) for your app
+- [Insert more data](/docs/guides/database/import-data) into your database
+- Upload and serve static files using [Storage](/docs/guides/storage)
+
+```
+
+```
diff --git a/apps/docs/public/img/icons/react-router-icon-light.svg b/apps/docs/public/img/icons/react-router-icon-light.svg
new file mode 100644
index 00000000000..0fc93ed8618
--- /dev/null
+++ b/apps/docs/public/img/icons/react-router-icon-light.svg
@@ -0,0 +1,10 @@
+
+
+
\ No newline at end of file
diff --git a/apps/docs/public/img/icons/react-router-icon.svg b/apps/docs/public/img/icons/react-router-icon.svg
new file mode 100644
index 00000000000..6f8a9a2eaa7
--- /dev/null
+++ b/apps/docs/public/img/icons/react-router-icon.svg
@@ -0,0 +1,4 @@
+