diff --git a/apps/ui-library/content/docs/clients/remix.mdx b/apps/ui-library/content/docs/clients/remix.mdx
deleted file mode 100644
index f32a5ff3ee3..00000000000
--- a/apps/ui-library/content/docs/clients/remix.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: Remix
-description: Supabase client for Remix
----
-
-## Installation
-
-<BlockItem name="supabase-client-remix" description="Supabase Client for Remix" />
-
-## Folder structure
-
-<RegistryBlock itemName="supabase-client-remix" />
diff --git a/apps/ui-library/content/docs/clients/nextjs.mdx b/apps/ui-library/content/docs/nextjs/client.mdx
similarity index 100%
rename from apps/ui-library/content/docs/clients/nextjs.mdx
rename to apps/ui-library/content/docs/nextjs/client.mdx
diff --git a/apps/ui-library/content/docs/components/dropzone.mdx b/apps/ui-library/content/docs/nextjs/dropzone.mdx
similarity index 100%
rename from apps/ui-library/content/docs/components/dropzone.mdx
rename to apps/ui-library/content/docs/nextjs/dropzone.mdx
diff --git a/apps/ui-library/content/docs/blocks/password-based-auth-nextjs.mdx b/apps/ui-library/content/docs/nextjs/password-based-auth.mdx
similarity index 100%
rename from apps/ui-library/content/docs/blocks/password-based-auth-nextjs.mdx
rename to apps/ui-library/content/docs/nextjs/password-based-auth.mdx
diff --git a/apps/ui-library/content/docs/components/realtime-cursor.mdx b/apps/ui-library/content/docs/nextjs/realtime-cursor.mdx
similarity index 100%
rename from apps/ui-library/content/docs/components/realtime-cursor.mdx
rename to apps/ui-library/content/docs/nextjs/realtime-cursor.mdx
diff --git a/apps/ui-library/content/docs/react-router/client.mdx b/apps/ui-library/content/docs/react-router/client.mdx
new file mode 100644
index 00000000000..e7c94c44c14
--- /dev/null
+++ b/apps/ui-library/content/docs/react-router/client.mdx
@@ -0,0 +1,12 @@
+---
+title: Supabase Client for React Router
+description: Supabase client for React Router
+---
+
+## Installation
+
+<BlockItem name="supabase-client-react-router" description="Supabase Client for React Router" />
+
+## Folder structure
+
+<RegistryBlock itemName="supabase-client-react-router" />
diff --git a/apps/ui-library/content/docs/react-router/dropzone.mdx b/apps/ui-library/content/docs/react-router/dropzone.mdx
new file mode 100644
index 00000000000..c746c1031aa
--- /dev/null
+++ b/apps/ui-library/content/docs/react-router/dropzone.mdx
@@ -0,0 +1,44 @@
+---
+title: Dropzone (File Upload)
+description: Displays a control for easier uploading of files directly to Supabase Storage
+---
+
+<ComponentPreview
+  name="dropzone-demo"
+  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+/>
+
+## Installation
+
+<BlockItem
+  name="dropzone-react-router"
+  description="Displays a control for easier uploading of files directly to Supabase Storage"
+/>
+
+## Folder structure
+
+<RegistryBlock itemName="dropzone-react-router" />
+
+## Introduction
+
+The File Upload component is designed to allow users to upload files with specific features and restrictions. It supports drag-and-drop functionality, MIME type restrictions, image previews, and configurable limits on file size and number of files.
+
+## Features
+
+1. **Drag-and-Drop**. Support drag-and-drop functionality for adding files.
+
+1. **MIME Type Restriction**. Only allow specific MIME types.
+
+1. **Invalid File Handling**. Allow users to remove invalid files from the list. Display a tooltip with error information for invalid files.
+
+1. **Image Previews**. Display previews for image files.
+
+1. **Error Handling**. Show error messages if the upload fails due to network or server errors.
+
+1. **Success Handling**. Display a success message and clear the file list upon successful upload.
+
+1. **Configurable Limits**. Allow configuration of file size limits and the maximum number of files.
+
+## Usage
+
+## Examples
diff --git a/apps/ui-library/content/docs/react-router/realtime-cursor.mdx b/apps/ui-library/content/docs/react-router/realtime-cursor.mdx
new file mode 100644
index 00000000000..7a7c47490b4
--- /dev/null
+++ b/apps/ui-library/content/docs/react-router/realtime-cursor.mdx
@@ -0,0 +1,22 @@
+---
+title: Realtime Cursor
+description: Real-time cursor sharing for collaborative applications
+---
+
+<ComponentPreview
+  name="realtime-cursor-demo"
+  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+/>
+
+## Installation
+
+<BlockItem
+  name="realtime-cursor-react-router"
+  description="Component which renders realtime cursors from other users in a room."
+/>
+
+## Folder structure
+
+<RegistryBlock itemName="realtime-cursor-react-router" />
+
+## Introduction
diff --git a/apps/ui-library/content/docs/clients/react.mdx b/apps/ui-library/content/docs/react/client.mdx
similarity index 100%
rename from apps/ui-library/content/docs/clients/react.mdx
rename to apps/ui-library/content/docs/react/client.mdx
diff --git a/apps/ui-library/content/docs/react/dropzone.mdx b/apps/ui-library/content/docs/react/dropzone.mdx
new file mode 100644
index 00000000000..2dead7ff238
--- /dev/null
+++ b/apps/ui-library/content/docs/react/dropzone.mdx
@@ -0,0 +1,44 @@
+---
+title: Dropzone (File Upload)
+description: Displays a control for easier uploading of files directly to Supabase Storage
+---
+
+<ComponentPreview
+  name="dropzone-demo"
+  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+/>
+
+## Installation
+
+<BlockItem
+  name="dropzone-react"
+  description="Displays a control for easier uploading of files directly to Supabase Storage"
+/>
+
+## Folder structure
+
+<RegistryBlock itemName="dropzone-react" />
+
+## Introduction
+
+The File Upload component is designed to allow users to upload files with specific features and restrictions. It supports drag-and-drop functionality, MIME type restrictions, image previews, and configurable limits on file size and number of files.
+
+## Features
+
+1. **Drag-and-Drop**. Support drag-and-drop functionality for adding files.
+
+1. **MIME Type Restriction**. Only allow specific MIME types.
+
+1. **Invalid File Handling**. Allow users to remove invalid files from the list. Display a tooltip with error information for invalid files.
+
+1. **Image Previews**. Display previews for image files.
+
+1. **Error Handling**. Show error messages if the upload fails due to network or server errors.
+
+1. **Success Handling**. Display a success message and clear the file list upon successful upload.
+
+1. **Configurable Limits**. Allow configuration of file size limits and the maximum number of files.
+
+## Usage
+
+## Examples
diff --git a/apps/ui-library/content/docs/blocks/password-based-auth-react.mdx b/apps/ui-library/content/docs/react/password-based-auth.mdx
similarity index 100%
rename from apps/ui-library/content/docs/blocks/password-based-auth-react.mdx
rename to apps/ui-library/content/docs/react/password-based-auth.mdx
diff --git a/apps/ui-library/content/docs/react/realtime-cursor.mdx b/apps/ui-library/content/docs/react/realtime-cursor.mdx
new file mode 100644
index 00000000000..a439d167adb
--- /dev/null
+++ b/apps/ui-library/content/docs/react/realtime-cursor.mdx
@@ -0,0 +1,22 @@
+---
+title: Realtime Cursor
+description: Real-time cursor sharing for collaborative applications
+---
+
+<ComponentPreview
+  name="realtime-cursor-demo"
+  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+/>
+
+## Installation
+
+<BlockItem
+  name="realtime-cursor-react"
+  description="Component which renders realtime cursors from other users in a room."
+/>
+
+## Folder structure
+
+<RegistryBlock itemName="realtime-cursor-react" />
+
+## Introduction
diff --git a/apps/ui-library/content/docs/clients/tanstack.mdx b/apps/ui-library/content/docs/tanstack/client.mdx
similarity index 100%
rename from apps/ui-library/content/docs/clients/tanstack.mdx
rename to apps/ui-library/content/docs/tanstack/client.mdx
diff --git a/apps/ui-library/content/docs/tanstack/dropzone.mdx b/apps/ui-library/content/docs/tanstack/dropzone.mdx
new file mode 100644
index 00000000000..e6a42819020
--- /dev/null
+++ b/apps/ui-library/content/docs/tanstack/dropzone.mdx
@@ -0,0 +1,44 @@
+---
+title: Dropzone (File Upload)
+description: Displays a control for easier uploading of files directly to Supabase Storage
+---
+
+<ComponentPreview
+  name="dropzone-demo"
+  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+/>
+
+## Installation
+
+<BlockItem
+  name="dropzone-tanstack"
+  description="Displays a control for easier uploading of files directly to Supabase Storage"
+/>
+
+## Folder structure
+
+<RegistryBlock itemName="dropzone-tanstack" />
+
+## Introduction
+
+The File Upload component is designed to allow users to upload files with specific features and restrictions. It supports drag-and-drop functionality, MIME type restrictions, image previews, and configurable limits on file size and number of files.
+
+## Features
+
+1. **Drag-and-Drop**. Support drag-and-drop functionality for adding files.
+
+1. **MIME Type Restriction**. Only allow specific MIME types.
+
+1. **Invalid File Handling**. Allow users to remove invalid files from the list. Display a tooltip with error information for invalid files.
+
+1. **Image Previews**. Display previews for image files.
+
+1. **Error Handling**. Show error messages if the upload fails due to network or server errors.
+
+1. **Success Handling**. Display a success message and clear the file list upon successful upload.
+
+1. **Configurable Limits**. Allow configuration of file size limits and the maximum number of files.
+
+## Usage
+
+## Examples
diff --git a/apps/ui-library/content/docs/tanstack/realtime-cursor.mdx b/apps/ui-library/content/docs/tanstack/realtime-cursor.mdx
new file mode 100644
index 00000000000..6711ea14b78
--- /dev/null
+++ b/apps/ui-library/content/docs/tanstack/realtime-cursor.mdx
@@ -0,0 +1,22 @@
+---
+title: Realtime Cursor
+description: Real-time cursor sharing for collaborative applications
+---
+
+<ComponentPreview
+  name="realtime-cursor-demo"
+  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+/>
+
+## Installation
+
+<BlockItem
+  name="realtime-cursor-tanstack"
+  description="Component which renders realtime cursors from other users in a room."
+/>
+
+## Folder structure
+
+<RegistryBlock itemName="realtime-cursor-tanstack" />
+
+## Introduction