chore(library): update routes, redirects, and naming (#48668)

Our UI Library registry is expanding to include blocks that go beyond UI and in some cases focus purely on back-end. This PR is a precursor to adding more back-end related blocks. This PR includes the `ui-library -> library` rename plus redirects and small UI copy updates. Since this is a rename we'll need to update Vercel configuration. ## Vercel rollout Keep the Library project Root Directory as `apps/ui-library` 1. In the **Library** Vercel project, set: `NEXT_PUBLIC_BASE_PATH=/library` Apply it to Preview and Production, then redeploy the Library project. 2. In the **www** Vercel project, add: `NEXT_PUBLIC_LIBRARY_URL=<current value of NEXT_PUBLIC_UI_LIBRARY_URL>` Apply it to Preview and Production. Keep `NEXT_PUBLIC_UI_LIBRARY_URL` during the migration, then redeploy the www project. 3. Deploy in this order: 1. Library project 2. www project 4. Validate: - `/library` - `/library/docs/nextjs/password-based-auth` - `/ui` redirects to `/library` - `/ui/docs/nextjs/password-based-auth` redirects to `/library/docs/nextjs/password-based-auth` - `/ui/docs/ai-editors-rules/*` still uses its existing Docs redirects No Vercel dashboard redirect rules are needed. Environment-variable changes require a new deployment.  ## Summary by CodeRabbit * **New Features** * Supabase UI Library has been renamed to **Supabase Library** across navigation, pages, documentation, and resource links. * The Library is now available at `/library`, with updated descriptions covering components, blocks, and developer tools. * **Bug Fixes** * Added permanent redirects from legacy `/ui` URLs to corresponding `/library` paths. * Updated links throughout the site and documentation to prevent broken navigation and references.
2026-10-05 01:15:03 +03:00 · 2026-08-11 13:37:32 +10:00
1 parent 1296a1c745
commit cb35e1f98e
@@ -39,10 +39,10 @@ One of the drawback of packaging the components in an npm package is that the st
 </AccordionItem>
 <AccordionItem value="faq-3">
 	<AccordionTrigger>
-		I was looking for Supabase UI Library
+		I was looking for Supabase Library
 	</AccordionTrigger>
 	<AccordionContent>
-		If you are looking for the Supabase UI, you can find it [here](https://supabase.com/ui).
+		You can find Supabase Library [here](https://supabase.com/library).
 	</AccordionContent>
 </AccordionItem>
 </Accordion>
@@ -204,10 +204,10 @@ const additionalResources = [
    href: '/guides/integrations',
  },
  {
-    title: 'Supabase UI',
+    title: 'Supabase Library',
    description: 'A collection of pre-built Supabase components to speed up your project.',
    icon: 'ui',
-    href: 'https://supabase.com/ui',
+    href: 'https://supabase.com/library',
    external: true,
  },
  {
@@ -153,8 +153,8 @@ const navCommands = [
  },
  {
    id: 'nav-ui',
-    name: 'Go to Supabase UI Library',
-    route: 'https://supabase.com/ui',
+    name: 'Go to Supabase Library',
+    route: 'https://supabase.com/library',
    icon: () => <ArrowRight />,
  },
 ] satisfies Array<ICommand & { enabled?: boolean }>
@@ -298,9 +298,9 @@ export const GLOBAL_MENU_ITEMS: GlobalMenuItems = [
            level: 'reference_javascript',
          },
          {
-            label: 'UI Library',
+            label: 'Library',
            icon: 'ui',
-            href: 'https://supabase.com/ui' as `/${string}`,
+            href: 'https://supabase.com/library' as `/${string}`,
            level: 'ui',
          },
        ],
@@ -3,7 +3,7 @@
 UI components built on shadcn/ui that connect to Supabase via a single command.

 <Button variant="primary" asChild>
-  <a href="https://supabase.com/ui">Explore Components</a>
+  <a href="https://supabase.com/library">Explore Components</a>
 </Button>

 </Admonition>
@@ -139,7 +139,7 @@ npm run dev
 ## Next steps

 - Learn how to [protect routes and check sessions](/docs/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=tanstack) with the server client
- Set up a complete [login and sign-up flow](/ui/docs/tanstack/password-based-auth) from the Supabase UI Library
+- Set up a complete [login and sign-up flow](/library/docs/tanstack/password-based-auth) from Supabase Library
 - Explore [drop-in UI components](/ui) for your Supabase app
 - [Insert more data](/docs/guides/database/import-data) into your database
 - Upload and serve static files using [Storage](/docs/guides/storage)
@@ -276,6 +276,6 @@ At this stage you have a fully functional application!

 - See the complete [example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-user-management) and deploy it to Vercel
 - [Build a Twitter Clone with the Next.js App Router and Supabase - free egghead course](https://egghead.io/courses/build-a-twitter-clone-with-the-next-js-app-router-and-supabase-19bebadb)
- Explore the [pre-built Auth components](/ui/docs/nextjs/password-based-auth)
+- Explore the [pre-built Auth components](/library/docs/nextjs/password-based-auth)
 - Explore the [Supabase Cache Helpers](https://github.com/psteinroe/supabase-cache-helpers)
 - See the [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments) template on GitHub
@@ -393,7 +393,7 @@ Before transferring the project to your user's org, make sure to remove any cust

 ## Platform kit

-Docs: https://supabase.com/ui/docs/platform/platform-kit
+Docs: https://supabase.com/library/docs/platform/platform-kit

 <div className="video-container mb-8">
  <iframe
@@ -28,19 +28,21 @@ export const realtimeExamples: ContentListingGroup = {
    },
    {
      title: 'Chat',
-      href: 'https://supabase.com/ui/docs/nextjs/realtime-chat',
-      description: 'Supabase UI chat component using Broadcast to send message between users.',
+      href: 'https://supabase.com/library/docs/nextjs/realtime-chat',
+      description:
+        'Supabase Library chat component using Broadcast to send messages between users.',
    },
    {
      title: 'Avatar Stack',
-      href: 'https://supabase.com/ui/docs/nextjs/realtime-avatar-stack',
-      description: 'Supabase UI avatar stack component using Presence to track connected users.',
+      href: 'https://supabase.com/library/docs/nextjs/realtime-avatar-stack',
+      description:
+        'Supabase Library avatar stack component using Presence to track connected users.',
    },
    {
      title: 'Realtime Cursor',
-      href: 'https://supabase.com/ui/docs/nextjs/realtime-cursor',
+      href: 'https://supabase.com/library/docs/nextjs/realtime-cursor',
      description:
-        "Supabase UI realtime cursor component using Broadcast to share users' cursors to build collaborative applications.",
+        "Supabase Library realtime cursor component using Broadcast to share users' cursors to build collaborative applications.",
    },
  ],
 }
@@ -1,4 +1,5 @@
 import { TriangleAlert } from 'lucide-react'
+
 import { Callout } from './callout'

 export default function TanStackBeta() {
@@ -10,8 +11,8 @@ export default function TanStackBeta() {
            <TriangleAlert />
            Heads up: TanStack Start is in beta.
          </div>
-          We&apos;re excited to support TanStack Start in our UI library! But since it&apos;s still
-          in beta, things may change quickly — expect breaking changes and some rough edges.
+          We&apos;re excited to support TanStack Start in Supabase Library! But since it&apos;s
+          still in beta, things may change quickly — expect breaking changes and some rough edges.
          We&apos;ll do our best to keep up and make integration with Supabase as smooth as
          possible. If you run into issues, have a look at the TanStack docs.
          <a
@@ -74,4 +74,4 @@ When you've finished setting up shadcn/ui, you can start exploring the component

 If you encounter issues, try deleting your existing `components.json` file and follow one of the guides to reset your setup.

-For issues and questions about specific frameworks, see the [FAQs](/ui/docs/getting-started/faq)
+For issues and questions about specific frameworks, see the [FAQs](/library/docs/getting-started/faq)
@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'

-const BASE_URL = 'https://supabase.com/ui/docs'
+const BASE_URL = 'https://supabase.com/library/docs'

 interface DocMeta {
  title: string
@@ -577,8 +577,8 @@ for the Vite pipeline:

 - `pnpm-workspace.yaml` catalog now includes `@tanstack/react-router`,
  `@tanstack/react-start`, `@tanstack/react-table` so studio and
-  ui-library stay aligned. `react-query` is **not** in the catalog yet
-  — three consumers (studio, docs, ui-library) sit on different 5.x
+  library stay aligned. `react-query` is **not** in the catalog yet
+  — three consumers (studio, docs, library) sit on different 5.x
  ranges and unifying them is a separate decision.
 - `NODE_OPTIONS=--max-old-space-size=8192` is set on the studio
  `dev` script — Vite's Rolldown-RC frontend hits the default 4 GB
@@ -95,8 +95,8 @@ const frameworkReactFilesStep: StepDefinition = {

 const frameworkShadcnStep: StepDefinition = {
  id: 'shadcn-add',
-  title: 'Add Supabase UI components',
-  description: 'Install Supabase UI components via the shadcn registry.',
+  title: 'Add Supabase Library blocks',
+  description: 'Install Supabase Library blocks via the shadcn registry.',
  content: 'steps/shadcn/command',
 }

@@ -322,7 +322,7 @@ export const connectSchema: ConnectSchema = {
      id: 'frameworkUi',
      type: 'switch',
      label: 'Shadcn',
-      description: 'Install Supabase UI components with shadcn.',
+      description: 'Install Supabase Library blocks with shadcn.',
      defaultValue: false,
      dependsOn: { framework: ['nextjs', 'react'] },
    },
@@ -34,7 +34,7 @@ function ShadcnCommandContent({ state }: StepContentProps) {
      </CodeBlock>
      <p className="text-sm text-foreground-lighter">
        Add UI components for auth, realtime, storage, and more at{' '}
-        <InlineLink href="https://supabase.com/ui">supabase.com/ui</InlineLink>.
+        <InlineLink href="https://supabase.com/library">supabase.com/library</InlineLink>.
      </p>
    </div>
  )
@@ -1,6 +1,6 @@
 # Default to local supabase for local development
 NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
 NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
-NEXT_PUBLIC_BASE_PATH=/ui
+NEXT_PUBLIC_BASE_PATH=/library
 NEXT_PUBLIC_API_URL="http://localhost:8080/platform"
 NEXT_PUBLIC_GOTRUE_URL="http://localhost:8000/auth/v1"
@@ -39,11 +39,11 @@ export default function Home() {
                <div className="flex flex-col gap-8 justify-start pt-16 md:pt-32">
                  <div className="max-w-2xl">
                    <h1 className="text-4xl text-foreground mb-3 font-medium tracking-tight">
-                      UI Blocks for Supabase Projects
+                      Blocks for Supabase Projects
                    </h1>
                    <h2 className="text-lg text-foreground-light mb-4">
-                      A collection of React components and blocks built on the shadcn/ui library
-                      that connect your front-end to your Supabase back-end via a single command.
+                      A collection of components, blocks, and developer tools that connect your
+                      project to Supabase via a single command.
                    </h2>
                    <div className="flex gap-3 mt-4">
                      <Button_Shadcn_ variant="secondary" size="lg">
@@ -15,8 +15,8 @@ const inter = Inter({ subsets: ['latin'] })
 const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? ''

 export const metadata: Metadata = {
-  applicationName: 'Supabase UI Library',
-  title: 'Supabase UI Library',
+  applicationName: 'Supabase Library',
+  title: 'Supabase Library',
  description: 'Provides a library of components for your project',
  metadataBase: new URL('https://supabase.com'),
  icons: genFaviconData(BASE_PATH),
@@ -62,7 +62,7 @@ export function CommandMenu({ ...props }: DialogProps) {
        onClick={() => setOpen(true)}
        {...props}
      >
-        <span className="hidden lg:inline-flex">Search UI Library...</span>
+        <span className="hidden lg:inline-flex">Search Library...</span>
        <span className="inline-flex lg:hidden">Search...</span>
        <kbd className="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded-sm border bg-surface-200 px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex text-foreground-light">
          <span className="text-sm">⌘</span>K
@@ -61,7 +61,7 @@ function SideNavigation() {
          <ThemeSwitcherDropdown />
        </div>
        <Link href="/" className="mb-4 block">
-          <h1>Supabase UI Library</h1>
+          <h1>Supabase Library</h1>
        </Link>
        {/* <TopNavigationSearch /> */}
        <CommandMenu />
@@ -76,7 +76,7 @@ function SideNavigation() {
      </div>
      <div className="pb-6">
        <div className="font-mono uppercase text-xs text-foreground-lighter/75 mb-2 px-6 tracking-widest">
-          Blocks
+          UI Blocks
        </div>
        <div className="space-y-0.5">
          {/* Render items based on component definitions */}
@@ -14,7 +14,7 @@ export function SiteFooter() {
          </a>
          . The source code is available on{' '}
          <a
-            href="https://github.com/supabase/supabase/tree/master/apps/ui-library"
+            href="https://github.com/supabase/supabase/tree/master/apps/library"
            target="_blank"
            rel="noreferrer"
            className="font-medium underline underline-offset-4 hover:text-foreground-lighter"
@@ -11,8 +11,8 @@ export default function TanStackBeta() {
            <TriangleAlert />
            Heads up: TanStack Start is in beta.
          </div>
-          We&apos;re excited to support TanStack Start in our UI library! But since it&apos;s still
-          in beta, things may change quickly — expect breaking changes and some rough edges.
+          We&apos;re excited to support TanStack Start in Supabase Library! But since it&apos;s
+          still in beta, things may change quickly — expect breaking changes and some rough edges.
          We&apos;ll do our best to keep up and make integration with Supabase as smooth as
          possible. If you run into issues, have a look at the TanStack docs.
          <a
@@ -14,11 +14,11 @@ const LOCAL_STORAGE_KEY = 'package-manager-tanstack-db'

 const getBaseUrl = () => {
  if (process.env.NEXT_PUBLIC_VERCEL_TARGET_ENV === 'production') {
-    return 'https://supabase.com/ui'
+    return 'https://supabase.com/library'
  } else if (process.env.NEXT_PUBLIC_VERCEL_TARGET_ENV === 'preview') {
    return `https://${process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL}`
  } else {
-    return 'http://localhost:3004/ui'
+    return 'http://localhost:3004/library'
  }
 }

@@ -9,7 +9,7 @@ description: Frequently asked questions
    <AccordionContent>
      You run a command in a new or existing project that looks something like this:
      ```bash
-      npx shadcn@latest add http://supabase.com/ui/r/password-based-auth-nextjs.json
+      npx shadcn@latest add https://supabase.com/library/r/password-based-auth-nextjs.json
      ```
        This will add all of the files to your project and install the dependencies.
      After you've run the command, you can start using the components. In the case of Auth, you should be up and running with user sign in/sign up with just this one command.
@@ -55,7 +55,7 @@ description: Frequently asked questions
      <AccordionContent>
        No. You don't need to start with one of our framework quickstarts.

-        If you already have an existing project, you can just add the components in this library to your project. If you're starting from scratch, you should use one of the shadcn/ui setup guides for your framework of choice via the [Quickstart](/ui/docs/getting-started/quickstart) page.
+        If you already have an existing project, you can just add the components in this library to your project. If you're starting from scratch, you should use one of the shadcn/ui setup guides for your framework of choice via the [Quickstart](/library/docs/getting-started/quickstart) page.
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="ai-builder">
@@ -67,13 +67,13 @@ description: Frequently asked questions
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="react-only">
-      <AccordionTrigger>Why is this library React-only?</AccordionTrigger>
+      <AccordionTrigger>Why are many UI blocks React-only?</AccordionTrigger>
      <AccordionContent>
        Several reasons.

-        First, we use React ourselves and know the ecosystem really well. That makes this ui library easy for us to build and maintain.
+        First, we use React ourselves and know the ecosystem really well. That makes these UI blocks easy for us to build and maintain.

-        Second, this library is really just stitching together a bunch of existing shadcn/ui and internal components into Supabase-specific workflows. It's not technically a brand new, from the ground up ui library—it's using an established tool in shadcn/ui.
+        Second, the UI portion of the library stitches together existing shadcn/ui and internal components into Supabase-specific workflows. It builds on an established tool rather than creating a new UI framework from the ground up.

        Last, it's a way for us to better distribute components that we already had out there in different places (our docs and guides, different framework quickstarts, etc)

@@ -1,11 +1,11 @@
 ---
 title: Introduction
-description: A flexible, open-source, React-based UI component library built on shadcn/ui, designed to simplify Supabase-powered projects with pre-built Auth, Storage, and Realtime features.
+description: A flexible, open-source collection of Supabase components, blocks, and developer tools built on shadcn/ui and other portable foundations.
 ---

-Our Supabase UI component library is a set of components built on top of the shadcn/ui registry system. It's designed to make building new or existing Supabase-powered projects faster and easier by providing pre-built solutions for common but challenging features—such as authentication, file uploads, and real-time updates.
+Supabase Library is a collection of UI components, full-featured blocks, and headless developer tools for Supabase projects. Many items build on the shadcn/ui registry system, while others—such as MCP blocks—ship portable integrations without a front end. It is designed to make new and existing Supabase-powered projects faster to build with ready-to-use solutions for authentication, file uploads, real-time updates, and more.

-Our Supabase UI library aims to solve these issues with:
+Supabase Library aims to solve these issues with:

 - **Extensible components**: Modify and extend simple primitives as needed.

@@ -74,4 +74,4 @@ When you've finished setting up shadcn/ui, you can start exploring the component

 If you encounter issues, try deleting your existing `components.json` file and follow one of the guides to reset your setup.

-For issues and questions about specific frameworks, see the [FAQs](/ui/docs/getting-started/faq)
+For issues and questions about specific frameworks, see the [FAQs](/library/docs/getting-started/faq)
@@ -33,7 +33,7 @@ NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=
 <Callout type="warning" className="mt-4">
  {' '}
  This Supabase client is built for SSR with the Next.js App Router. If you're building a React SPA,
-  use the [React SPA client](/ui/docs/react-router/client) instead.{' '}
+  use the [React SPA client](/library/docs/react-router/client) instead.{' '}
 </Callout>

 ## Further reading
@@ -14,7 +14,7 @@ description: Password-based authentication block for Next.js

 ## Folder structure

-This block includes the [Supabase client](/ui/docs/nextjs/client). If you already have one installed, you can skip overwriting it.
+This block includes the [Supabase client](/library/docs/nextjs/client). If you already have one installed, you can skip overwriting it.

 <RegistryBlock itemName="password-based-auth-nextjs" />

@@ -16,7 +16,7 @@ description: Social authentication block for Next.js

 ## Folder structure

-This block includes the [Supabase client](/ui/docs/nextjs/client). If you already have one installed, you can skip overwriting it.
+This block includes the [Supabase client](/library/docs/nextjs/client). If you already have one installed, you can skip overwriting it.

 <RegistryBlock itemName="social-auth-nextjs" />

@@ -35,7 +35,7 @@ NUXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=
 <Callout type="warning" className="mt-4">
  {' '}
  This Supabase client is built for SSR with the Nuxt.js. If you're building a Vue SPA, use the [Vue
-  SPA client](/ui/docs/vue/client) instead.{' '}
+  SPA client](/library/docs/vue/client) instead.{' '}
 </Callout>

 ## Further reading
@@ -14,7 +14,7 @@ description: Password-based authentication block for React Router

 ## Folder structure

-This block includes the [Supabase client](/ui/docs/react-router/client). If you already have one installed, you can skip overwriting it.
+This block includes the [Supabase client](/library/docs/react-router/client). If you already have one installed, you can skip overwriting it.

 <RegistryBlock itemName="password-based-auth-react-router" />

@@ -19,7 +19,7 @@ description: Social authentication block for React Router

 ## Folder structure

-This block includes the [Supabase client](/ui/docs/react-router/client). If you already have one installed, you can skip overwriting it.
+This block includes the [Supabase client](/library/docs/react-router/client). If you already have one installed, you can skip overwriting it.

 <RegistryBlock itemName="social-auth-react-router" />

@@ -14,7 +14,7 @@ description: Password-based authentication block for React Single Page Applicati

 ## Folder structure

-This block includes the [Supabase client](/ui/docs/react/client). If you already have one installed, you can skip overwriting it.
+This block includes the [Supabase client](/library/docs/react/client). If you already have one installed, you can skip overwriting it.

 <RegistryBlock itemName="password-based-auth-react" />

@@ -16,7 +16,7 @@ description: Social authentication block for React Single Page Applications

 ## Folder structure

-This block includes the [Supabase client](/ui/docs/react/client). If you already have one installed, you can skip overwriting it.
+This block includes the [Supabase client](/library/docs/react/client). If you already have one installed, you can skip overwriting it.

 <RegistryBlock itemName="social-auth-react" />

@@ -11,7 +11,7 @@ description: Password-based authentication block for TanStack Start

 ## Folder structure

-This block includes the [Supabase client](/ui/docs/tanstack/client). If you already have one installed, you can skip overwriting it.
+This block includes the [Supabase client](/library/docs/tanstack/client). If you already have one installed, you can skip overwriting it.

 <RegistryBlock itemName="password-based-auth-tanstack" />

@@ -16,7 +16,7 @@ description: Social authentication block for Tanstack Start

 ## Folder structure

-This block includes the [Supabase client](/ui/docs/tanstack/client). If you already have one installed, you can skip overwriting it.
+This block includes the [Supabase client](/library/docs/tanstack/client). If you already have one installed, you can skip overwriting it.

 <RegistryBlock itemName="social-auth-tanstack" />

@@ -1,5 +1,5 @@
 {
-  "name": "ui-library",
+  "name": "library",
  "version": "0.1.0",
  "private": true,
  "type": "module",
@@ -1,7 +1,7 @@
 {
  "$schema": "https://ui.shadcn.com/schema/registry.json",
-  "name": "Supabase UI Library",
-  "homepage": "https://supabase.com/ui",
+  "name": "Supabase Library",
+  "homepage": "https://supabase.com/library",
  "items": [
    {
      "name": "password-based-auth-nextjs",
@@ -2651,4 +2651,4 @@
      ]
    }
  ]
-}
+}
@@ -2,7 +2,7 @@ import { type ComponentPropsWithoutRef } from 'react'
 import { cn } from 'ui'

 export function Link({ className, href, ...props }: ComponentPropsWithoutRef<'a'>) {
-  // A simplified link component for UI Library examples
+  // A simplified link component for Supabase Library examples
  // Renders as a regular <a> tag to support iframe base path routing
  // Remove leading slash for relative paths to work with base tag
  const relativeHref = href?.startsWith('/') ? href.slice(1) : href
@@ -2,7 +2,7 @@ import { createBrowserClient } from '@supabase/ssr'

 import { Database } from '../../database.types'

-// This client is meant to be used for demo purposes only. It has types from the Supabase project in the ui-library app.
+// This client is meant to be used for demo purposes only. It has types from the Supabase project in the library app.
 export function createClient() {
  return createBrowserClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
@@ -7,8 +7,8 @@ import { platform } from './platform'
 import { examples } from '@/registry/examples'

 export const registry = {
-  name: 'Supabase UI Library',
-  homepage: 'https://supabase.com/ui',
+  name: 'Supabase Library',
+  homepage: 'https://supabase.com/library',
  items: [
    ...blocks,
    ...clients,
@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'

-const BASE_URL = 'https://supabase.com/ui/docs'
+const BASE_URL = 'https://supabase.com/library/docs'

 interface DocMeta {
  title: string
@@ -77,7 +77,7 @@ function getDocFiles(): DocMeta[] {

 // Generate the llms.txt content
 const docs = getDocFiles()
-let content = `# Supabase UI Library
+let content = `# Supabase Library
 Last updated: ${new Date().toISOString()}

 ## Overview
@@ -2,7 +2,7 @@
 # https://supabase.com/docs/guides/local-development/cli/config
 # A string used to distinguish different Supabase projects on the same host. Defaults to the
 # working directory name when running `supabase init`.
-project_id = "ui-library"
+project_id = "library"

 [api]
 enabled = true
@@ -8,5 +8,5 @@ NEXT_PUBLIC_URL="http://localhost:3000"
 NEXT_PUBLIC_DOCS_URL="http://localhost:3001"
 NEXT_PUBLIC_STUDIO_URL="http://localhost:8082"
 NEXT_PUBLIC_REFERENCE_DOCS_URL="http://localhost:3010"
-NEXT_PUBLIC_UI_LIBRARY_URL="http://localhost:3004"
+NEXT_PUBLIC_LIBRARY_URL="http://localhost:3004"
 NEXT_PUBLIC_DESIGN_SYSTEM_URL="http://localhost:3003"
@@ -14,7 +14,7 @@ toc_depth: 3
 launchweek: '14'
 ---

-We're excited to release an [official Supabase UI Library](https://supabase.com/ui)—a collection of ready-to-use components built on top of [shadcn/ui](https://ui.shadcn.com/). Designed for flexibility, these components can be dropped into any Next.js, React Router, TanStack Start, or plain React app.
+We're excited to release an [official Supabase UI Library](https://supabase.com/library)—a collection of ready-to-use components built on top of [shadcn/ui](https://ui.shadcn.com/). Designed for flexibility, these components can be dropped into any Next.js, React Router, TanStack Start, or plain React app.

 <div className="video-container mb-8">
  <iframe
@@ -54,13 +54,13 @@ It's designed to take both the time and the pain out of building complex functio

 ## What's included?

- [Supabase client](https://supabase.com/ui/docs/nextjs/client) initialization for client-side and server-side use
- [Password-based authentication](https://supabase.com/ui/docs/nextjs/password-based-auth)
- [File Upload Dropzone](https://supabase.com/ui/docs/nextjs/dropzone)
- [Realtime Cursor Sharing](https://supabase.com/ui/docs/nextjs/realtime-cursor)
- [Current User Avatar](https://supabase.com/ui/docs/nextjs/current-user-avatar)
- [Realtime Avatar Stack](https://supabase.com/ui/docs/nextjs/realtime-avatar-stack)
- [Realtime Chat](https://supabase.com/ui/docs/tanstack/realtime-chat)
+- [Supabase client](https://supabase.com/library/docs/nextjs/client) initialization for client-side and server-side use
+- [Password-based authentication](https://supabase.com/library/docs/nextjs/password-based-auth)
+- [File Upload Dropzone](https://supabase.com/library/docs/nextjs/dropzone)
+- [Realtime Cursor Sharing](https://supabase.com/library/docs/nextjs/realtime-cursor)
+- [Current User Avatar](https://supabase.com/library/docs/nextjs/current-user-avatar)
+- [Realtime Avatar Stack](https://supabase.com/library/docs/nextjs/realtime-avatar-stack)
+- [Realtime Chat](https://supabase.com/library/docs/tanstack/realtime-chat)

 We intend to release more Supabase UI Library components, and we'd love to get your feedback. Got a favorite component you want for your applications? Let us know on [X](https://x.com/supabase) or [Discord](https://discord.supabase.com/), or we'd be happy to get a [pull request](https://github.com/supabase/supabase).

@@ -158,4 +158,4 @@ Alongside our UI components, we're also shipping a curated set of LLM rules tail

 Skip the boilerplate and long setup times—focus on what really matters: building and shipping fast. Explore the Supabase UI Component Library, drop it into your projects, and let us know what you think. Be sure to [submit components](https://github.com/orgs/supabase/discussions/34578) you want to see next!

-Visit the [Supabase UI Library](https://supabase.com/ui).
+Visit the [Supabase UI Library](https://supabase.com/library).
@@ -93,7 +93,7 @@ Display all the data in your database:

 ## How does Supabase UI work?

-The library is 100% shadcn/ui compatible by leveraging the [component registry](https://x.com/shadcn/status/1829646556318089509) feature. Components are styled with shadcn/ui and Tailwind CSS and are completely customizable. Read the [original launch post](https://supabase.com/blog/supabase-ui-library) for more details, or check out the docs: [ui.supabase.com](https://supabase.com/ui)
+The library is 100% shadcn/ui compatible by leveraging the [component registry](https://x.com/shadcn/status/1829646556318089509) feature. Components are styled with shadcn/ui and Tailwind CSS and are completely customizable. Read the [original launch post](https://supabase.com/blog/supabase-ui-library) for more details, or check out the docs: [supabase.com/library](https://supabase.com/library)

 ## Supabase for Platforms

@@ -116,6 +116,6 @@ If you’re building your own plaform, reach out to the team: [supabase.com/solu

 ## Getting started with Platform UI

-Head on over to the docs to get started: [ui.supabase.com](https://supabase.com/ui/docs/platform/platform-kit)
+Head on over to the docs to get started: [ui.supabase.com](https://supabase.com/library/docs/platform/platform-kit)

 You can also check out the [repo](https://github.com/supabase/supabase/tree/master/apps/ui-library/registry/default/platform) to download and run the app yourself to see how it works, or just pull key files and components to use in your own implementation. The code is yours to use and improve however you see fit.
@@ -128,9 +128,9 @@ Create ephemeral development environments for each project using branching. Your
  />
 </div>

-We built [Platform Kit](/ui/docs/platform/platform-kit), a collection of UI components for the Management API. Embed a lightweight version of the Supabase Dashboard directly in your app. Your users can manage their backend without leaving your product.
+We built [Platform Kit](/library/docs/platform/platform-kit), a collection of UI components for the Management API. Embed a lightweight version of the Supabase Dashboard directly in your app. Your users can manage their backend without leaving your product.

-[Docs](/ui/docs/platform/platform-kit)
+[Docs](/library/docs/platform/platform-kit)

 # Features available to select AI Builders

@@ -144,11 +144,11 @@ const months: Month[] = [
      },
      {
        title: 'Supabase UI Library now includes Infinite Query block',
-        url: 'https://supabase.com/ui/docs/infinite-query-hook',
+        url: 'https://supabase.com/library/docs/infinite-query-hook',
      },
      {
        title: 'Supabase UI Library now includes Social Auth',
-        url: 'https://supabase.com/ui/docs/nextjs/social-auth',
+        url: 'https://supabase.com/library/docs/nextjs/social-auth',
      },
      {
        title: 'New SOC2 Report',
@@ -25,8 +25,8 @@ export const data = {
          icon: () => <Pencil className="w-4 h-4" />,
        },
        {
-          text: 'Supabase UI',
-          url: 'https://supabase.com/ui',
+          text: 'Supabase Library',
+          url: 'https://supabase.com/library',
          icon: (props: any) => (
            <svg
              width="17"
@@ -122,8 +122,8 @@ const footerData = [
        url: '/docs',
      },
      {
-        text: 'Supabase UI',
-        url: 'https://supabase.com/ui',
+        text: 'Supabase Library',
+        url: 'https://supabase.com/library',
      },
      {
        text: 'Changelog',
@@ -34,6 +34,16 @@ module.exports = [
    source: '/ui/docs/ai-editors-rules/skills',
    destination: '/docs/guides/ai-tools/ai-skills',
  },
+  {
+    permanent: true,
+    source: '/ui',
+    destination: '/library',
+  },
+  {
+    permanent: true,
+    source: '/ui/:path*',
+    destination: '/library/:path*',
+  },
  {
    permanent: true,
    source: '/auth/Auth',
@@ -1,3 +1,5 @@
+const LIBRARY_URL = process.env.NEXT_PUBLIC_LIBRARY_URL ?? process.env.NEXT_PUBLIC_UI_LIBRARY_URL
+
 const rewrites = [
  {
    source: '/:path*',
@@ -22,12 +24,12 @@ const rewrites = [
      ]
    : []),
  {
-    source: '/ui',
-    destination: `${process.env.NEXT_PUBLIC_UI_LIBRARY_URL}`,
+    source: '/library',
+    destination: `${LIBRARY_URL}`,
  },
  {
-    source: '/ui/:path*',
-    destination: `${process.env.NEXT_PUBLIC_UI_LIBRARY_URL}/:path*`,
+    source: '/library/:path*',
+    destination: `${LIBRARY_URL}/:path*`,
  },
  {
    source: '/design-system',
@@ -23,4 +23,30 @@ describe('next.config.mjs', () => {
      ])
    )
  })
+
+  it('routes the library and permanently redirects the legacy UI URLs', async () => {
+    const { default: config } = (await import('./next.config.mjs')) as { default: NextConfig }
+    const rewrites = (await config.rewrites?.()) || []
+    const redirects = (await config.redirects?.()) || []
+
+    expect(rewrites).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ source: '/library' }),
+        expect.objectContaining({ source: '/library/:path*' }),
+      ])
+    )
+    expect(redirects).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ source: '/ui', destination: '/library', permanent: true }),
+        expect.objectContaining({
+          source: '/ui/:path*',
+          destination: '/library/:path*',
+          permanent: true,
+        }),
+      ])
+    )
+    expect(
+      redirects.findIndex((redirect) => redirect.source === '/ui/docs/ai-editors-rules/prompts')
+    ).toBeLessThan(redirects.findIndex((redirect) => redirect.source === '/ui/:path*'))
+  })
 })
@@ -20,6 +20,8 @@
        "NEXT_PUBLIC_STUDIO_URL",
        "NEXT_PUBLIC_DOCS_URL",
        "NEXT_PUBLIC_REFERENCE_DOCS_URL",
+        "NEXT_PUBLIC_LIBRARY_URL",
+        // Temporary fallback during the production environment-variable migration.
        "NEXT_PUBLIC_UI_LIBRARY_URL",
        "NEXT_PUBLIC_SUPABASE_URL",
        "NEXT_PUBLIC_SUPABASE_ANON_KEY",
@@ -1853,7 +1853,7 @@ export interface AssistantMessageRatingSubmittedEvent {
 *
 * @group Events
 * @source supabase-ui
- * @page /ui/docs/{framework}/{templateTitle}
+ * @page /library/docs/{framework}/{templateTitle}
 */
 export interface SupabaseUiCommandCopyButtonClickedEvent {
  action: 'supabase_ui_command_copy_button_clicked'