Reorder the pages for all frameworks.

apps/ui-library/content/docs/clients/remix.mdx

@@ -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" />

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" />

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

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

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

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

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

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