UI lib/component docs (#34515)

* Update usage sections

* Small style tweaks

* Update docs, tan capital S stack everywhere

* Fix the colors of the linkedcard.

* MInor fixes for all doc pages.

* Updates

* Spacing

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>

apps/ui-library/app/(app)/layout.tsx

@@ -19,7 +19,7 @@ export default function AppLayout({ children }: AppLayoutProps) {
           {/* {children} */}
           <div className="border-b">
             <div className="flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
-              <aside className="fixed z-30 top-0 hidden h-screen w-full shrink-0 md:sticky md:block bg-black/10 border-r border-muted/50">
+              <aside className="fixed z-30 top-0 hidden h-screen w-full shrink-0 md:sticky md:block bg-black/5 border-r border-muted/50">
                 <ScrollArea className="h-full">
                   <SideNavigation />
                 </ScrollArea>

apps/ui-library/components/mdx-components.tsx

@@ -94,10 +94,10 @@ const components = {
     />
   ),
   ul: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
-    <ul className={cn('my-6 ml-6 list-disc', className)} {...props} />
+    <ul className={cn('my-6 ml-6 list-disc text-foreground-light', className)} {...props} />
   ),
   ol: ({ className, ...props }: React.HTMLAttributes<HTMLOListElement>) => (
-    <ol className={cn('my-6 ml-6 list-decimal', className)} {...props} />
+    <ol className={cn('my-6 ml-6 list-decimal text-foreground-light', className)} {...props} />
   ),
   li: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
     <li className={cn('mt-2', className)} {...props} />
@@ -257,7 +257,7 @@ const components = {
   LinkedCard: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
     <Link
       className={cn(
-        'flex w-full flex-col items-center rounded-xl border bg-card p-6 text-card-foreground shadow transition-colors hover:bg-muted/50 sm:p-10',
+        'flex w-full flex-col items-center rounded-xl border bg-surface-100 text-card-background p-6 shadow transition-colors hover:bg-muted/50 sm:p-10',
         className
       )}
       {...props}

apps/ui-library/components/side-navigation.tsx

@@ -95,7 +95,7 @@ function SideNavigation() {
         {/* <TopNavigationSearch /> */}
         <CommandMenu />
       </div>
-      <div className="pb-6">
+      <div className="pb-6 space-y-0.5">
         <div className="font-mono uppercase text-xs text-foreground-lighter/75 mb-2 px-6 tracking-widest">
           {gettingStarted.title}
         </div>

apps/ui-library/config/docs.ts

@@ -45,7 +45,7 @@ export const aiEditorsRules: SidebarNavGroup = {
 export const frameworkTitles: Record<string, string> = {
   nextjs: 'Next.js',
   'react-router': 'React Router',
-  tanstack: 'Tanstack Start',
+  tanstack: 'TanStack Start',
   react: 'React SPA',
 }
 

apps/ui-library/content/docs/nextjs/current-user-avatar.mdx

@@ -16,9 +16,32 @@ description: Supabase Auth-aware avatar
 
 <RegistryBlock itemName="current-user-avatar-nextjs" />
 
-## Usage
+## Introduction
 
 The `CurrentUserAvatar` component connects to Supabase Auth to fetch the user data and show an avatar. It uses the `user_metadata`
-property which gets populated automatically by Supabase Auth if the user logged in via a provider. If the user doesn't have a profile image, it renders their initials. If the user is logged out, it renders a `?`.
+property which gets populated automatically by Supabase Auth if the user logged in via a provider. If the user doesn't have a profile image, it renders their initials. If the user is logged out, it renders a `?` as a fallback, which you can change.
 
-The `CurrentUserAvatar` component integrates with Supabase Auth to display user avatars dynamically. It automatically retrieves the profile image from the `user_metadata` field, which Supabase Auth populates when using provider-based authentication. The component also fallbacks to `?` if the user is unauthenticated.
+## Usage
+
+The `CurrentUserAvatar` component is designed to be used anywhere in your app. Add the `<CurrentUserAvatar />` component to your page and it will render the avatar of the current user, with a fallback.
+
+```tsx
+'use client'
+
+import { CurrentUserAvatar } from '@/components/current-user-avatar'
+
+const CurrentUserAvatarDemo = () => {
+  return (
+    <Header className="flex items-center justify-between">
+      <h1>Lumon Industries</h1>
+      <CurrentUserAvatar />
+    </Header>
+  )
+}
+
+export default CurrentUserAvatarDemo
+```
+
+## Props
+
+This component doesn't accept any props. If you wish to change the fallback, you can do so by changing the `CurrentUserAvatar` component directly.

apps/ui-library/content/docs/nextjs/dropzone.mdx

@@ -25,7 +25,7 @@ Uploading files should be easy—this component handles the tricky parts for you
 
 The File Upload component makes it easy to add file uploads to your app, with built-in support for drag-and-drop, file type restrictions, image previews, and configurable limits on file size and number of files. All the essentials, ready to go.
 
-## Features
+**Features**
 
 - Drag-and-drop support
 - Multiple file uploads
@@ -40,6 +40,38 @@ The File Upload component makes it easy to add file uploads to your app, with bu
 - Simply add this `<Dropzone />` component to your page and it will handle the rest.
 - For control over file upload, you can pass in a `props` object to the component.
 
+```tsx
+'use client'
+
+import {
+  Dropzone,
+  DropzoneContent,
+  DropzoneEmptyState,
+} from '@/components/dropzone'
+import { useSupabaseUpload } from '@/hooks/use-supabase-upload'
+
+const FileUploadDemo = () => {
+  const props = useSupabaseUpload({
+    bucketName: 'test',
+    path: 'test',
+    allowedMimeTypes: ['image/*'],
+    maxFiles: 2,
+    maxFileSize: 1000 * 1000 * 10, // 10MB,
+  })
+
+  return (
+    <div className="w-[500px]">
+      <Dropzone {...props}>
+        <DropzoneEmptyState />
+        <DropzoneContent />
+      </Dropzone>
+    </div>
+  )
+}
+
+export FileUploadDemo
+```
+
 ## Props
 
 | Prop               | Type       | Default | Description                                          |

apps/ui-library/content/docs/nextjs/password-based-auth.mdx

@@ -70,7 +70,7 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=
 ### Setting up routes and redirect URLs
 
 1. Set the site URL in the [URL Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) settings in the Supabase Dashboard.
-1. Set up the Next.js route users will visit to reset or update their password. First, update the `forgot-password-form.tsx` component with your `forgot-password` route. You'll need to tell Supabase to allow this route as the redirect URL. Go to the [URL Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) settings and add that route to the list of Redirect URLs. It should look something like: `http://example.com/auth/forgot-password`.
+1. Set up the Next.js route that users will visit to reset or update their password. Go to the [URL Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) settings and add the `forgot-password` route to the list of Redirect URLs. It should look something like: `http://example.com/auth/forgot-password`.
 
 1. Update the redirect paths in the `login-form.tsx` and `update-password-form.tsx` components to point to the logged-in routes in your app.
 

apps/ui-library/content/docs/nextjs/realtime-avatar-stack.mdx

@@ -18,4 +18,23 @@ description: Avatar stack in realtime
 
 ## Usage
 
-The `RealtimeAvatarStack` renders stacked avatars which are connected to Supabase Realtime. Specifically, it uses the Presence feature. You can use this to show currently online users in a chatroom, game session or collaborative app.
+The `RealtimeAvatarStack` component renders stacked avatars which are connected to Supabase Realtime. It uses the Presence feature of Supabase Realtime. You can use this to show currently online users in a chatroom, game session or collaborative app.
+
+```tsx
+import { RealtimeAvatarStack } from '@/components/realtime-avatar-stack'
+
+export default function Page() {
+  return (
+    <Header className="flex items-center justify-between">
+      <h1>Lumon Industries</h1>
+      <RealtimeAvatarStack roomName="break_room" />
+    </Header>
+  )
+}
+```
+
+## Props
+
+| Prop       | Type     | Default | Description                                          |
+| ---------- | -------- | ------- | ---------------------------------------------------- |
+| `roomName` | `string` | `null`  | The name of the Supabase Realtime room to connect to |

apps/ui-library/content/docs/nextjs/realtime-cursor.mdx

@@ -4,10 +4,8 @@ description: Real-time cursor sharing for collaborative applications
 ---
 
 <div className="flex flex-row -space-x-px w-full">
-
-<BlockPreview name="realtime-cursor" isPair />
-<BlockPreview name="realtime-cursor" isPair />
-
+  <BlockPreview name="realtime-cursor" isPair />
+  <BlockPreview name="realtime-cursor" isPair />
 </div>
 
 ## Installation
@@ -25,11 +23,7 @@ description: Real-time cursor sharing for collaborative applications
 
 The Realtime Cursors component lets users share their cursor position with others in the same room—perfect for real-time collaboration. It handles all the setup and boilerplate for you, so you can add it to your app with minimal effort.
 
-## Usage
-
-The Realtime Cursor component is designed to be used in a room. It can be used to build real-time collaborative applications. Add the `<RealtimeCursors />` component to your page and it will render realtime cursors from other users in the room.
-
-## Features
+**Features**
 
 - Broadcast cursor position to other users in the same room
 - Customizable cursor appearance
@@ -37,6 +31,23 @@ The Realtime Cursor component is designed to be used in a room. It can be used t
 - Low-latency updates using Supabase Realtime
 - Room-based isolation for scoped collaboration
 
+## Usage
+
+The Realtime Cursor component is designed to be used in a room. It can be used to build real-time collaborative applications. Add the `<RealtimeCursors />` component to your page and it will render realtime cursors from other users in the room.
+
+```tsx
+'use client'
+import { RealtimeCursors } from '@/components/realtime-cursors'
+
+export default function Page() {
+  return (
+    <div className="w-full min-h-screen">
+      <RealtimeCursors roomName="macrodata_refinement_office" username="Mark Scout" />
+    </div>
+  )
+}
+```
+
 ## Props
 
 | Prop       | Type     | Description                                                |

apps/ui-library/content/docs/react-router/client.mdx

@@ -11,5 +11,21 @@ description: Supabase client for React Router
 
 <RegistryBlock itemName="supabase-client-react-router" />
 
-This block provides Supabase clients designed for use with SSR by storing JWT tokens in cookies. If you're
-developing a React SPA, use the [React SPA client](/ui/docs/react-router/client) instead.
+## Usage
+
+This block installs Supabase clients for connecting your React Router project to Supabase. They're designed for use in both server-side loaders and actions, as well as client-side components.
+
+If you've already set up Supabase clients in your project, you can just continue using them.
+
+### Getting started
+
+First, add a `.env` file to your project with the following environment variables:
+
+```env
+VITE_SUPABASE_URL=
+VITE_SUPABASE_ANON_KEY=
+```
+
+- If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).
+
+- If you're using a local instance of supabase, you can find these values by running `supabase start` or `supabase status` (if you already have it running).

apps/ui-library/content/docs/react-router/current-user-avatar.mdx

@@ -16,9 +16,30 @@ description: Supabase Auth-aware avatar
 
 <RegistryBlock itemName="current-user-avatar-react-router" />
 
-## Usage
+## Introduction
 
 The `CurrentUserAvatar` component connects to Supabase Auth to fetch the user data and show an avatar. It uses the `user_metadata`
-property which gets populated automatically by Supabase Auth if the user logged in via a provider. If the user doesn't have a profile image, it renders their initials. If the user is logged out, it renders a `?`.
+property which gets populated automatically by Supabase Auth if the user logged in via a provider. If the user doesn't have a profile image, it renders their initials. If the user is logged out, it renders a `?` as a fallback, which you can change.
 
-The `CurrentUserAvatar` component integrates with Supabase Auth to display user avatars dynamically. It automatically retrieves the profile image from the `user_metadata` field, which Supabase Auth populates when using provider-based authentication. The component also fallbacks to `?` if the user is unauthenticated.
+## Usage
+
+The `CurrentUserAvatar` component is designed to be used anywhere in your app. Add the `<CurrentUserAvatar />` component to your page and it will render the avatar of the current user, with a fallback.
+
+```tsx
+import { CurrentUserAvatar } from '@/components/current-user-avatar'
+
+const CurrentUserAvatarDemo = () => {
+  return (
+    <Header className="flex items-center justify-between">
+      <h1>Lumon Industries</h1>
+      <CurrentUserAvatar />
+    </Header>
+  )
+}
+
+export default CurrentUserAvatarDemo
+```
+
+## Props
+
+This component doesn't accept any props. If you wish to change the fallback, you can do so by changing the `CurrentUserAvatar` component directly.

apps/ui-library/content/docs/react-router/dropzone.mdx

@@ -21,24 +21,61 @@ description: Displays a control for easier uploading of files directly to Supaba
 
 ## 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.
+Uploading files should be easy—this component handles the tricky parts for you.
 
-## Features
+The File Upload component makes it easy to add file uploads to your app, with built-in support for drag-and-drop, file type restrictions, image previews, and configurable limits on file size and number of files. All the essentials, ready to go.
 
-1. **Drag-and-Drop**. Support drag-and-drop functionality for adding files.
+**Features**
 
-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.
+- Drag-and-drop support
+- Multiple file uploads
+- File size and count limits
+- Image previews for supported file types
+- MIME type restrictions
+- Invalid file handling
+- Success and error states with clear feedback
 
 ## Usage
 
-## Examples
+- Simply add this `<Dropzone />` component to your page and it will handle the rest.
+- For control over file upload, you can pass in a `props` object to the component.
+
+```tsx
+import {
+  Dropzone,
+  DropzoneContent,
+  DropzoneEmptyState,
+} from '@/components/dropzone'
+import { useSupabaseUpload } from '@/hooks/use-supabase-upload'
+
+const FileUploadDemo = () => {
+  const props = useSupabaseUpload({
+    bucketName: 'test',
+    path: 'test',
+    allowedMimeTypes: ['image/*'],
+    maxFiles: 2,
+    maxFileSize: 1000 * 1000 * 10, // 10MB,
+  })
+
+  return (
+    <div className="w-[500px]">
+      <Dropzone {...props}>
+        <DropzoneEmptyState />
+        <DropzoneContent />
+      </Dropzone>
+    </div>
+  )
+}
+
+export FileUploadDemo
+```
+
+## Props
+
+| Prop               | Type       | Default | Description                                          |
+| ------------------ | ---------- | ------- | ---------------------------------------------------- |
+| `bucketName`       | `string`   | `null`  | The name of the Supabase Storage bucket to upload to |
+| `path`             | `string`   | `null`  | The path or subfolder to upload the file to          |
+| `allowedMimeTypes` | `string[]` | `[]`    | The MIME types to allow for upload                   |
+| `maxFiles`         | `number`   | `1`     | Maximum number of files to upload                    |
+| `maxFileSize`      | `number`   | `1000`  | Maximum file size in bytes                           |

apps/ui-library/content/docs/react-router/password-based-auth.mdx

@@ -70,6 +70,6 @@ VITE_SUPABASE_ANON_KEY=
 ### Setting up routes and redirect URLs
 
 1. Set the site URL in the [URL Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) settings in the Supabase Dashboard.
-1. Set up the route users will visit to reset or update their password. First, update the `forgot-password.tsx` component with your `update-password` route. You'll need to tell Supabase to allow this route as the redirect URL. Go to the [URL Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) settings and add that route to the list of Redirect URLs. It should look something like: `http://example.com/update-password`.
+1. Set up the route users will visit to reset or update their password. Go to the [URL Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) settings and add the `forgot-password` route to the list of Redirect URLs. It should look something like: `http://example.com/auth/forgot-password`.
 
 1. Update the redirect paths in the `login.tsx` and `update-password.tsx` components to point to the logged-in routes in your app.

apps/ui-library/content/docs/react-router/realtime-avatar-stack.mdx

@@ -18,4 +18,23 @@ description: Avatar stack in realtime
 
 ## Usage
 
-The `RealtimeAvatarStack` renders stacked avatars which are connected to Supabase Realtime. Specifically, it uses the Presence feature. You can use this to show currently online users in a chatroom, game session or collaborative app.
+The `RealtimeAvatarStack` component renders stacked avatars which are connected to Supabase Realtime. It uses the Presence feature of Supabase Realtime. You can use this to show currently online users in a chatroom, game session or collaborative app.
+
+```tsx
+import { RealtimeAvatarStack } from '@/components/realtime-avatar-stack'
+
+export default function Page() {
+  return (
+    <Header className="flex items-center justify-between">
+      <h1>Lumon Industries</h1>
+      <RealtimeAvatarStack roomName="break_room" />
+    </Header>
+  )
+}
+```
+
+## Props
+
+| Prop       | Type     | Default | Description                                          |
+| ---------- | -------- | ------- | ---------------------------------------------------- |
+| `roomName` | `string` | `null`  | The name of the Supabase Realtime room to connect to |

apps/ui-library/content/docs/react-router/realtime-cursor.mdx

@@ -3,16 +3,16 @@ 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.'."
-/>
+<div className="flex flex-row -space-x-px w-full">
+  <BlockPreview name="realtime-cursor" isPair />
+  <BlockPreview name="realtime-cursor" isPair />
+</div>
 
 ## Installation
 
 <BlockItem
   name="realtime-cursor-react-router"
-  description="Component which renders realtime cursors from other users in a room."
+  description="Renders realtime cursors from other users in a room."
 />
 
 ## Folder structure
@@ -20,3 +20,36 @@ description: Real-time cursor sharing for collaborative applications
 <RegistryBlock itemName="realtime-cursor-react-router" />
 
 ## Introduction
+
+The Realtime Cursors component lets users share their cursor position with others in the same room—perfect for real-time collaboration. It handles all the setup and boilerplate for you, so you can add it to your app with minimal effort.
+
+**Features**
+
+- Broadcast cursor position to other users in the same room
+- Customizable cursor appearance
+- Presence detection (automatically joins/leaves users)
+- Low-latency updates using Supabase Realtime
+- Room-based isolation for scoped collaboration
+
+## Usage
+
+The Realtime Cursor component is designed to be used in a room. It can be used to build real-time collaborative applications. Add the `<RealtimeCursors />` component to your page and it will render realtime cursors from other users in the room.
+
+```tsx
+import { RealtimeCursors } from '@/components/realtime-cursors'
+
+export default function Page() {
+  return (
+    <div className="w-full min-h-screen">
+      <RealtimeCursors roomName="macrodata_refinement_office" username="Mark Scout" />
+    </div>
+  )
+}
+```
+
+## Props
+
+| Prop       | Type     | Description                                                |
+| ---------- | -------- | ---------------------------------------------------------- |
+| `roomName` | `string` | Unique identifier for the shared room or session.          |
+| `username` | `string` | Name of the current user; used to track and label cursors. |

apps/ui-library/content/docs/react/client.mdx

@@ -10,3 +10,22 @@ description: Supabase client for React Single Page Applications
 ## Folder structure
 
 <RegistryBlock itemName="supabase-client-react" />
+
+## Usage
+
+This block installs a Supabase client for connecting your React project to Supabase. It's designed for use in client-side components.
+
+If you've already set up a Supabase client in your project, you can just continue using that existing setup.
+
+### Getting started
+
+First, add a `.env` file to your project with the following environment variables:
+
+```env
+VITE_SUPABASE_URL=
+VITE_SUPABASE_ANON_KEY=
+```
+
+- If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).
+
+- If you're using a local instance of Supabase, you can find these values by running `supabase start` or `supabase status` (if you already have it running).

apps/ui-library/content/docs/react/current-user-avatar.mdx

@@ -13,9 +13,30 @@ description: Supabase Auth-aware avatar
 
 <RegistryBlock itemName="current-user-avatar-react" />
 
-## Usage
+## Introduction
 
 The `CurrentUserAvatar` component connects to Supabase Auth to fetch the user data and show an avatar. It uses the `user_metadata`
-property which gets populated automatically by Supabase Auth if the user logged in via a provider. If the user doesn't have a profile image, it renders their initials. If the user is logged out, it renders a `?`.
+property which gets populated automatically by Supabase Auth if the user logged in via a provider. If the user doesn't have a profile image, it renders their initials. If the user is logged out, it renders a `?` as a fallback, which you can change.
 
-The `CurrentUserAvatar` component integrates with Supabase Auth to display user avatars dynamically. It automatically retrieves the profile image from the `user_metadata` field, which Supabase Auth populates when using provider-based authentication. The component also fallbacks to `?` if the user is unauthenticated.
+## Usage
+
+The `CurrentUserAvatar` component is designed to be used anywhere in your app. Add the `<CurrentUserAvatar />` component to your page and it will render the avatar of the current user, with a fallback.
+
+```tsx
+import { CurrentUserAvatar } from '@/components/current-user-avatar'
+
+const CurrentUserAvatarDemo = () => {
+  return (
+    <Header className="flex items-center justify-between">
+      <h1>Lumon Industries</h1>
+      <CurrentUserAvatar />
+    </Header>
+  )
+}
+
+export default CurrentUserAvatarDemo
+```
+
+## Props
+
+This component doesn't accept any props. If you wish to change the fallback, you can do so by changing the `CurrentUserAvatar` component directly.

apps/ui-library/content/docs/react/dropzone.mdx

@@ -21,24 +21,61 @@ description: Displays a control for easier uploading of files directly to Supaba
 
 ## 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.
+Uploading files should be easy—this component handles the tricky parts for you.
 
-## Features
+The File Upload component makes it easy to add file uploads to your app, with built-in support for drag-and-drop, file type restrictions, image previews, and configurable limits on file size and number of files. All the essentials, ready to go.
 
-1. **Drag-and-Drop**. Support drag-and-drop functionality for adding files.
+**Features**
 
-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.
+- Drag-and-drop support
+- Multiple file uploads
+- File size and count limits
+- Image previews for supported file types
+- MIME type restrictions
+- Invalid file handling
+- Success and error states with clear feedback
 
 ## Usage
 
-## Examples
+- Simply add this `<Dropzone />` component to your page and it will handle the rest.
+- For control over file upload, you can pass in a `props` object to the component.
+
+```tsx
+import {
+  Dropzone,
+  DropzoneContent,
+  DropzoneEmptyState,
+} from '@/components/dropzone'
+import { useSupabaseUpload } from '@/hooks/use-supabase-upload'
+
+const FileUploadDemo = () => {
+  const props = useSupabaseUpload({
+    bucketName: 'test',
+    path: 'test',
+    allowedMimeTypes: ['image/*'],
+    maxFiles: 2,
+    maxFileSize: 1000 * 1000 * 10, // 10MB,
+  })
+
+  return (
+    <div className="w-[500px]">
+      <Dropzone {...props}>
+        <DropzoneEmptyState />
+        <DropzoneContent />
+      </Dropzone>
+    </div>
+  )
+}
+
+export FileUploadDemo
+```
+
+## Props
+
+| Prop               | Type       | Default | Description                                          |
+| ------------------ | ---------- | ------- | ---------------------------------------------------- |
+| `bucketName`       | `string`   | `null`  | The name of the Supabase Storage bucket to upload to |
+| `path`             | `string`   | `null`  | The path or subfolder to upload the file to          |
+| `allowedMimeTypes` | `string[]` | `[]`    | The MIME types to allow for upload                   |
+| `maxFiles`         | `number`   | `1`     | Maximum number of files to upload                    |
+| `maxFileSize`      | `number`   | `1000`  | Maximum file size in bytes                           |

apps/ui-library/content/docs/react/password-based-auth.mdx

@@ -3,6 +3,8 @@ title: Password-based Authentication
 description: Password-based authentication block for React Single Page Applications
 ---
 
+<BlockPreview name="password-based-auth/sign-up" />
+
 ## Installation
 
 <BlockItem
@@ -16,38 +18,24 @@ description: Password-based authentication block for React Single Page Applicati
 
 ## Usage
 
-This block inserts components for login, sign-up, forgot-password and update-password flows in your projects. In general, you
-would do the following steps:
+Once you install the block in your React project, you'll get all the necessary pages and components to set up a password-based authentication flow.
 
-1. Create routes using your framework of choice for the 4 flows
-2. Import the block components into the routes
-3. Add a authenticated route /info which should render the current user info.
-4. Add the following code in the authenticated route to redirect to login if the user is unauthenticated.
+### Getting started
 
-````ts
-  useEffect(() => {
-    const checkAuth = async () => {
-      const client = createClient();
-      const { error } = await client.auth.getUser();
+First, add a `.env` file to your project with the following environment variables:
 
-      if (error) {
-        location.href = "/login";
-      }
-    };
-    checkAuth();
-  }, []);
+```env
+VITE_SUPABASE_URL=
+VITE_SUPABASE_ANON_KEY=
 ```
 
-4. Update the redirect upon successful login in `login-form.tsx` and `update-password.tsx` to `/info`.
-5. Test the rest of the flows.
+- If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).
 
-There few more steps to finish the installation:
+- If you're using a local instance of supabase, you can find these values by running `supabase start` or `supabase status` (if you already have it running).
 
-1. Set the `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` environment variables in your `.env` file in your project.
-1. Add an [email template for sign-up](https://supabase.com/dashboard/project/uznvnxvfhkixgqetwekc/auth/templates) to the Supabase project. For detailed instructions on how to configure your email
-   templates, including the use of variables like `{{ .SiteURL }}`,`{{ .TokenHash }}`, and `{{ .RedirectTo }}`, refer to our [Email Templates guide](/docs/email-templates).
+### Adding email templates
 
-   Your signup email template should contain the following HTML:
+1. Add an [email template for sign-up](https://supabase.com/dashboard/project/_/auth/templates) to the Supabase project. Your signup email template should contain at least the following HTML:
 
    ```html
    <h2>Confirm your signup</h2>
@@ -59,8 +47,74 @@ There few more steps to finish the installation:
        >Confirm your email</a
      >
    </p>
-````
+   ```
 
-1. Set the site URL in the [Supabase dashboard](https://supabase.com/dashboard/project/_/auth/url-configuration).
-1. Set the forgot-password route in `forgot-password-form.tsx` component. The route needs to be configured as a redirect URL in the [Supabase dashboard](https://supabase.com/dashboard/project/_/auth/url-configuration).
-1. Update the redirect paths in the `login-form.tsx` and `update-password-form.tsx` components to point to the logged-in routes in your app.
+   For detailed instructions on how to configure your email templates, including the use of variables like `{{ .SiteURL }}`,`{{ .TokenHash }}`, and `{{ .RedirectTo }}`, refer to our [Email Templates guide](https://supabase.com/docs/email-templates).
+
+1. Add an [email template for reset password](https://supabase.com/dashboard/project/_/auth/templates) to the Supabase project. Your reset password email template should contain at least the following HTML:
+
+   ```html
+   <h2>Reset Password</h2>
+
+   <p>Follow this link to reset the password for your user:</p>
+   <p>
+     <a
+       href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next={{ .RedirectTo }}"
+       >Reset Password</a
+     >
+   </p>
+   ```
+
+### Setting up routes and redirect URLs
+
+1. Set the site URL in the [URL Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) settings in the Supabase Dashboard.
+1. Set up the route users will visit to reset or update their password. Go to the [URL Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) settings and add the `forgot-password` route to the list of Redirect URLs. It should look something like: `http://example.com/auth/forgot-password`.
+1. Update the redirect paths in the `login.tsx` and `update-password.tsx` components to point to the logged-in routes in your app.
+
+1. Add the following code in the authenticated route to redirect to login if the user is unauthenticated.
+
+## Examples
+
+### Redirect to `/login` page if the user is unauthenticated
+
+```ts
+import { useEffect } from "react"
+import { createClient } from "@supabase/supabase-js"
+
+export default function AuthenticatedRoute() {
+  useEffect(() => {
+    const checkAuth = async () => {
+      const client = createClient()
+      const { error } = await client.auth.getUser()
+
+      if (error) {
+        location.href = "/login"
+      }
+    }
+    checkAuth()
+  }, [])
+
+  return <div>Authenticated page</div>;
+}
+```
+
+### Redirect to `/profile` page if the user is authenticated
+
+```ts
+import { useEffect } from "react";
+import { createClient } from "@supabase/supabase-js"
+
+export default function AuthenticatedRoute() {
+  useEffect(() => {
+    const checkAuth = async () => {
+      const client = createClient()
+      const { user } = await client.auth.getUser()
+
+      user ? location.href = "/profile" : location.href = "/login"
+    }
+    checkAuth()
+  }, [])
+
+  return <div>Profile page</div>
+}
+```

apps/ui-library/content/docs/react/realtime-avatar-stack.mdx

@@ -18,4 +18,23 @@ description: Avatar stack in realtime
 
 ## Usage
 
-The `RealtimeAvatarStack` renders stacked avatars which are connected to Supabase Realtime. Specifically, it uses the Presence feature. You can use this to show currently online users in a chatroom, game session or collaborative app.
+The `RealtimeAvatarStack` component renders stacked avatars which are connected to Supabase Realtime. It uses the Presence feature of Supabase Realtime. You can use this to show currently online users in a chatroom, game session or collaborative app.
+
+```tsx
+import { RealtimeAvatarStack } from '@/components/realtime-avatar-stack'
+
+export default function Page() {
+  return (
+    <Header className="flex items-center justify-between">
+      <h1>Lumon Industries</h1>
+      <RealtimeAvatarStack roomName="break_room" />
+    </Header>
+  )
+}
+```
+
+## Props
+
+| Prop       | Type     | Default | Description                                          |
+| ---------- | -------- | ------- | ---------------------------------------------------- |
+| `roomName` | `string` | `null`  | The name of the Supabase Realtime room to connect to |

apps/ui-library/content/docs/react/realtime-cursor.mdx

@@ -3,16 +3,16 @@ 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.'."
-/>
+<div className="flex flex-row -space-x-px w-full">
+  <BlockPreview name="realtime-cursor" isPair />
+  <BlockPreview name="realtime-cursor" isPair />
+</div>
 
 ## Installation
 
 <BlockItem
   name="realtime-cursor-react"
-  description="Component which renders realtime cursors from other users in a room."
+  description="Renders realtime cursors from other users in a room."
 />
 
 ## Folder structure
@@ -20,3 +20,36 @@ description: Real-time cursor sharing for collaborative applications
 <RegistryBlock itemName="realtime-cursor-react" />
 
 ## Introduction
+
+The Realtime Cursors component lets users share their cursor position with others in the same room—perfect for real-time collaboration. It handles all the setup and boilerplate for you, so you can add it to your app with minimal effort.
+
+**Features**
+
+- Broadcast cursor position to other users in the same room
+- Customizable cursor appearance
+- Presence detection (automatically joins/leaves users)
+- Low-latency updates using Supabase Realtime
+- Room-based isolation for scoped collaboration
+
+## Usage
+
+The Realtime Cursor component is designed to be used in a room. It can be used to build real-time collaborative applications. Add the `<RealtimeCursors />` component to your page and it will render realtime cursors from other users in the room.
+
+```tsx
+import { RealtimeCursors } from '@/components/realtime-cursors'
+
+export default function Page() {
+  return (
+    <div className="w-full min-h-screen">
+      <RealtimeCursors roomName="macrodata_refinement_office" username="Mark Scout" />
+    </div>
+  )
+}
+```
+
+## Props
+
+| Prop       | Type     | Description                                                |
+| ---------- | -------- | ---------------------------------------------------------- |
+| `roomName` | `string` | Unique identifier for the shared room or session.          |
+| `username` | `string` | Name of the current user; used to track and label cursors. |

apps/ui-library/content/docs/tanstack/client.mdx

@@ -1,21 +1,31 @@
 ---
-title: Tanstack Start
-description: Supabase client for Tanstack Start
+title: TanStack Start
+description: Supabase client for TanStack Start
 ---
 
 ## Installation
 
-<BlockItem name="supabase-client-tanstack" description="Supabase Client for Tanstack Start" />
-
-The easiest way to use Tanstack Start with Supabase is to follow the following steps:
-
-1. Follow the [official guide](https://ui.shadcn.com/docs/installation/tanstack) for adding shadcn/ui to Tanstack Start
-2. Install this block to get the Supabase clients
-3. Add VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY to your .env file
+<BlockItem name="supabase-client-tanstack" description="Supabase Client for TanStack Start" />
 
 ## Folder structure
 
 <RegistryBlock itemName="supabase-client-tanstack" />
 
-This block provides Supabase clients designed for use with SSR by storing JWT tokens in cookies. If you're
-developing a React SPA, use the [React SPA client](/ui/docs/react-router/client) instead.
+## Usage
+
+This block installs Supabase clients for connecting your TanStack Start project to Supabase. They're designed for use in both server-side loaders and actions, as well as client-side components.
+
+If you've already set up a Supabase client in your project, you can just continue using that existing setup.
+
+### Getting started
+
+First, add a `.env` file to your project with the following environment variables:
+
+```env
+VITE_SUPABASE_URL=
+VITE_SUPABASE_ANON_KEY=
+```
+
+- If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).
+
+- If you're using a local instance of Supabase, you can find these values by running `supabase start` or `supabase status` (if you already have it running).

apps/ui-library/content/docs/tanstack/current-user-avatar.mdx

@@ -16,9 +16,30 @@ description: Supabase Auth-aware avatar
 
 <RegistryBlock itemName="current-user-avatar-tanstack" />
 
-## Usage
+## Introduction
 
 The `CurrentUserAvatar` component connects to Supabase Auth to fetch the user data and show an avatar. It uses the `user_metadata`
-property which gets populated automatically by Supabase Auth if the user logged in via a provider. If the user doesn't have a profile image, it renders their initials. If the user is logged out, it renders a `?`.
+property which gets populated automatically by Supabase Auth if the user logged in via a provider. If the user doesn't have a profile image, it renders their initials. If the user is logged out, it renders a `?` as a fallback, which you can change.
 
-The `CurrentUserAvatar` component integrates with Supabase Auth to display user avatars dynamically. It automatically retrieves the profile image from the `user_metadata` field, which Supabase Auth populates when using provider-based authentication. The component also fallbacks to `?` if the user is unauthenticated.
+## Usage
+
+The `CurrentUserAvatar` component is designed to be used anywhere in your app. Add the `<CurrentUserAvatar />` component to your page and it will render the avatar of the current user, with a fallback.
+
+```tsx
+import { CurrentUserAvatar } from '@/components/current-user-avatar'
+
+const CurrentUserAvatarDemo = () => {
+  return (
+    <Header className="flex items-center justify-between">
+      <h1>Lumon Industries</h1>
+      <CurrentUserAvatar />
+    </Header>
+  )
+}
+
+export default CurrentUserAvatarDemo
+```
+
+## Props
+
+This component doesn't accept any props. If you wish to change the fallback, you can do so by changing the `CurrentUserAvatar` component directly.

apps/ui-library/content/docs/tanstack/dropzone.mdx

@@ -21,24 +21,61 @@ description: Displays a control for easier uploading of files directly to Supaba
 
 ## 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.
+Uploading files should be easy—this component handles the tricky parts for you.
 
-## Features
+The File Upload component makes it easy to add file uploads to your app, with built-in support for drag-and-drop, file type restrictions, image previews, and configurable limits on file size and number of files. All the essentials, ready to go.
 
-1. **Drag-and-Drop**. Support drag-and-drop functionality for adding files.
+**Features**
 
-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.
+- Drag-and-drop support
+- Multiple file uploads
+- File size and count limits
+- Image previews for supported file types
+- MIME type restrictions
+- Invalid file handling
+- Success and error states with clear feedback
 
 ## Usage
 
-## Examples
+- Simply add this `<Dropzone />` component to your page and it will handle the rest.
+- For control over file upload, you can pass in a `props` object to the component.
+
+```tsx
+import {
+  Dropzone,
+  DropzoneContent,
+  DropzoneEmptyState,
+} from '@/components/dropzone'
+import { useSupabaseUpload } from '@/hooks/use-supabase-upload'
+
+const FileUploadDemo = () => {
+  const props = useSupabaseUpload({
+    bucketName: 'test',
+    path: 'test',
+    allowedMimeTypes: ['image/*'],
+    maxFiles: 2,
+    maxFileSize: 1000 * 1000 * 10, // 10MB,
+  })
+
+  return (
+    <div className="w-[500px]">
+      <Dropzone {...props}>
+        <DropzoneEmptyState />
+        <DropzoneContent />
+      </Dropzone>
+    </div>
+  )
+}
+
+export FileUploadDemo
+```
+
+## Props
+
+| Prop               | Type       | Default | Description                                          |
+| ------------------ | ---------- | ------- | ---------------------------------------------------- |
+| `bucketName`       | `string`   | `null`  | The name of the Supabase Storage bucket to upload to |
+| `path`             | `string`   | `null`  | The path or subfolder to upload the file to          |
+| `allowedMimeTypes` | `string[]` | `[]`    | The MIME types to allow for upload                   |
+| `maxFiles`         | `number`   | `1`     | Maximum number of files to upload                    |
+| `maxFileSize`      | `number`   | `1000`  | Maximum file size in bytes                           |

apps/ui-library/content/docs/tanstack/password-based-auth.mdx

@@ -1,16 +1,70 @@
 ---
-title: Tanstack Start
-description: Supabase client for Tanstack Start
+title: TanStack Start
+description: Supabase client for TanStack Start
 ---
 
+<BlockPreview name="password-based-auth/sign-up" />
+
 ## Installation
 
-<BlockItem name="password-based-auth-tanstack" description="Supabase Client for Tanstack Start" />
-
-1. Follow the steps in /ui/docs/tanstack/password-based-auth to setup your repo.
-
-2. Try to access the /info route, you should be redirected to login screen. If you create an account and login and try accessing the /info page, you should see your email.
+<BlockItem name="password-based-auth-tanstack" description="Supabase Client for TanStack Start" />
 
 ## Folder structure
 
 <RegistryBlock itemName="password-based-auth-tanstack" />
+
+## Usage
+
+Once you install the block in your TanStack Start project, you'll get all the necessary pages and components to set up a password-based authentication flow.
+
+### Getting started
+
+First, add a `.env` file to your project with the following environment variables:
+
+```env
+VITE_SUPABASE_URL=
+VITE_SUPABASE_ANON_KEY=
+```
+
+- If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).
+
+- If you're using a local instance of supabase, you can find these values by running `supabase start` or `supabase status` (if you already have it running).
+
+### Adding email templates
+
+1. Add an [email template for sign-up](https://supabase.com/dashboard/project/_/auth/templates) to the Supabase project. Your signup email template should contain at least the following HTML:
+
+   ```html
+   <h2>Confirm your signup</h2>
+
+   <p>Follow this link to confirm your user:</p>
+   <p>
+     <a
+       href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email&next={{ .RedirectTo }}"
+       >Confirm your email</a
+     >
+   </p>
+   ```
+
+   For detailed instructions on how to configure your email templates, including the use of variables like `{{ .SiteURL }}`,`{{ .TokenHash }}`, and `{{ .RedirectTo }}`, refer to our [Email Templates guide](https://supabase.com/docs/email-templates).
+
+1. Add an [email template for reset password](https://supabase.com/dashboard/project/_/auth/templates) to the Supabase project. Your reset password email template should contain at least the following HTML:
+
+   ```html
+   <h2>Reset Password</h2>
+
+   <p>Follow this link to reset the password for your user:</p>
+   <p>
+     <a
+       href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next={{ .RedirectTo }}"
+       >Reset Password</a
+     >
+   </p>
+   ```
+
+### Setting up routes and redirect URLs
+
+1. Set the site URL in the [URL Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) settings in the Supabase Dashboard.
+1. Set up the route users will visit to reset or update their password. Go to the [URL Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) settings and add the `forgot-password` route to the list of Redirect URLs. It should look something like: `http://example.com/auth/forgot-password`.
+
+1. Update the redirect paths in the `login.tsx` and `update-password.tsx` components to point to the logged-in routes in your app.

apps/ui-library/content/docs/tanstack/realtime-avatar-stack.mdx

@@ -18,4 +18,23 @@ description: Avatar stack in realtime
 
 ## Usage
 
-The `RealtimeAvatarStack` renders stacked avatars which are connected to Supabase Realtime. Specifically, it uses the Presence feature. You can use this to show currently online users in a chatroom, game session or collaborative app.
+The `RealtimeAvatarStack` component renders stacked avatars which are connected to Supabase Realtime. It uses the Presence feature of Supabase Realtime. You can use this to show currently online users in a chatroom, game session or collaborative app.
+
+```tsx
+import { RealtimeAvatarStack } from '@/components/realtime-avatar-stack'
+
+export default function Page() {
+  return (
+    <Header className="flex items-center justify-between">
+      <h1>Lumon Industries</h1>
+      <RealtimeAvatarStack roomName="break_room" />
+    </Header>
+  )
+}
+```
+
+## Props
+
+| Prop       | Type     | Default | Description                                          |
+| ---------- | -------- | ------- | ---------------------------------------------------- |
+| `roomName` | `string` | `null`  | The name of the Supabase Realtime room to connect to |

apps/ui-library/content/docs/tanstack/realtime-cursor.mdx

@@ -3,16 +3,16 @@ 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.'."
-/>
+<div className="flex flex-row -space-x-px w-full">
+  <BlockPreview name="realtime-cursor" isPair />
+  <BlockPreview name="realtime-cursor" isPair />
+</div>
 
 ## Installation
 
 <BlockItem
   name="realtime-cursor-tanstack"
-  description="Component which renders realtime cursors from other users in a room."
+  description="Renders realtime cursors from other users in a room."
 />
 
 ## Folder structure
@@ -20,3 +20,36 @@ description: Real-time cursor sharing for collaborative applications
 <RegistryBlock itemName="realtime-cursor-tanstack" />
 
 ## Introduction
+
+The Realtime Cursors component lets users share their cursor position with others in the same room—perfect for real-time collaboration. It handles all the setup and boilerplate for you, so you can add it to your app with minimal effort.
+
+**Features**
+
+- Broadcast cursor position to other users in the same room
+- Customizable cursor appearance
+- Presence detection (automatically joins/leaves users)
+- Low-latency updates using Supabase Realtime
+- Room-based isolation for scoped collaboration
+
+## Usage
+
+The Realtime Cursor component is designed to be used in a room. It can be used to build real-time collaborative applications. Add the `<RealtimeCursors />` component to your page and it will render realtime cursors from other users in the room.
+
+```tsx
+import { RealtimeCursors } from '@/components/realtime-cursors'
+
+export default function Page() {
+  return (
+    <div className="w-full min-h-screen">
+      <RealtimeCursors roomName="macrodata_refinement_office" username="Mark Scout" />
+    </div>
+  )
+}
+```
+
+## Props
+
+| Prop       | Type     | Description                                                |
+| ---------- | -------- | ---------------------------------------------------------- |
+| `roomName` | `string` | Unique identifier for the shared room or session.          |
+| `username` | `string` | Name of the current user; used to track and label cursors. |

apps/ui-library/public/llms.txt

@@ -49,14 +49,14 @@ Library of components for your project. The components integrate with Supabase a
     - Avatar stack in realtime
 - [Realtime Cursor](https://supabase.com/ui/docs/react/realtime-cursor)
     - Real-time cursor sharing for collaborative applications
-- [Tanstack Start](https://supabase.com/ui/docs/tanstack/client)
-    - Supabase client for Tanstack Start
+- [TanStack Start](https://supabase.com/ui/docs/tanstack/client)
+    - Supabase client for TanStack Start
 - [Current User Avatar](https://supabase.com/ui/docs/tanstack/current-user-avatar)
     - Supabase Auth-aware avatar
 - [Dropzone (File Upload)](https://supabase.com/ui/docs/tanstack/dropzone)
     - Displays a control for easier uploading of files directly to Supabase Storage
-- [Tanstack Start](https://supabase.com/ui/docs/tanstack/password-based-auth)
-    - Supabase client for Tanstack Start
+- [TanStack Start](https://supabase.com/ui/docs/tanstack/password-based-auth)
+    - Supabase client for TanStack Start
 - [Realtime Avatar Stack](https://supabase.com/ui/docs/tanstack/realtime-avatar-stack)
     - Avatar stack in realtime
 - [Realtime Cursor](https://supabase.com/ui/docs/tanstack/realtime-cursor)

apps/ui-library/registry.json

@@ -854,7 +854,7 @@
       "$schema": "https://ui.shadcn.com/schema/registry-item.json",
       "name": "supabase-client-tanstack",
       "type": "registry:lib",
-      "title": "Supabase Client for Tanstack Start",
+      "title": "Supabase Client for TanStack Start",
       "description": "",
       "registryDependencies": [],
       "dependencies": ["@supabase/ssr@latest", "@supabase/supabase-js@latest"],

apps/ui-library/registry/default/clients/tanstack/registry-item.json

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "supabase-client-tanstack",
   "type": "registry:lib",
-  "title": "Supabase Client for Tanstack Start",
+  "title": "Supabase Client for TanStack Start",
   "description": "",
   "registryDependencies": [],
   "dependencies": ["@supabase/ssr@latest", "@supabase/supabase-js@latest"],