## Problem
The Files tab on block previews showed a "Supabase files." caption row
between the tabs and the file viewer. It doesn't add anything useful and
takes space from the code.
## Solution
Remove the caption row and render the file viewer directly in the tab
panel. The registry lookup that fed the caption is dropped from
`BlockOverview`; the markdown and agent-prompt export still lists
dependencies as before.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Interface Changes**
* Block overviews now show the generated file tree directly when file
display is enabled.
* The “Supabase files” banner and dependency details are no longer
shown, and the surrounding file layout has been removed.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Renames the `mcp-server` Library block to `mcp`. Installing it now
creates `supabase/functions/mcp`, so the server is served at
`/functions/v1/mcp`.
- Block, Edge Function folder, and docs page renamed
(`/docs/headless/mcp`)
- Headless App block now installs its tools into
`supabase/functions/mcp` and configures `[functions.mcp]`
- Links in the BYO MCP and MCP authentication guides updated
- Permanent redirects keep `/r/mcp-server.json` and
`/docs/headless/mcp-server` working
- `public/r` rebuilt
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Updates**
* The MCP Server block is now named `mcp` across its documentation,
installation links, and setup instructions.
* Updated function endpoints and deployment commands to use `/mcp`.
* Added permanent redirects from the previous `mcp-server` documentation
and install URLs to their new locations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Feature — the visual redesign itself.
Part 5 of 6 in a stack that splits the library redesign into reviewable
pieces. The four PRs beneath it carry the build, content and Markdown
work; what's left here is layout, navigation and styling.
## What is the current behavior?
The library is laid out like a documentation site: a sidebar tree of
framework folders, a homepage that lists links, and a guide page that
opens with prose. That shape suits reference material, but the library's
job is to help someone find a block and install it — and the sidebar is
the only way to discover one.
## What is the new behavior?
The homepage is the catalog itself — blocks grouped by what they do
(authentication, database, storage, realtime, messaging, AI,
foundations) rather than by framework, each with a preview of what it
renders, filterable by category.
Navigation moves into a site header whose Explore menu opens the same
categories, so the catalog is reachable from any page and the per-page
sidebar tree is gone.
A guide opens with what the reader came for: the block's name, the
install command, and a preview pane with tabs — the running component
and its files — before any prose. The file tree that used to sit
mid-page under "Folder structure" is one of those tabs. Every guide also
offers a copy of the agent prompt that points at its Markdown.
Getting-started pages get the same treatment: the quickstart is now a
framework-tabbed walkthrough rather than a wall of setup links.
## Additional context
`BlockOverviewTabs` renders Preview and Files here. #50369, stacked on
top of this one, adds the third "What's added" tab — it is the only part
of the redesign that depends on the new resource analyzer, which is why
it sits above this PR rather than below it.
Also removes what the redesign orphaned: the table-of-contents component
and its `remark` / `mdast-util-toc` dependencies, and the sidebar nav
and command-item configuration the new header replaced.
The block source changes are typography only — auth card titles move
from `text-2xl` to `font-medium text-lg tracking-normal` — which is what
regenerates the auth registry artifacts.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a redesigned Supabase Library catalog with categorized blocks,
framework-aware navigation, previews, file views, and installation
actions.
* Added framework-specific quickstart guides for Next.js, React, Vue,
Nuxt, React Router, and TanStack Start.
* Added copy-to-clipboard prompts, “Open in v0” actions, starter
templates, and richer visual previews.
* **Improvements**
* Updated documentation layouts, FAQ content, typography, navigation,
accessibility, and responsive behavior.
* Improved mobile navigation, framework selection, and standardized
block installation guidance.
* Refined authentication and social-login block presentation with more
consistent heading styles.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Feature, bug fix.
Part 4 of 6 in a stack that splits the library redesign into reviewable
pieces.
## What is the current behavior?
`BlockItem` renders the Open in v0 button, and `BlockItem` sits inside
the Installation section — so the button appears partway down the page.
On guides that install a client first it appears twice, once for the
client and once for the block, and the MDX opts the extra one out with
`showOpenInV0={false}`.
So the page's markup already knows which registry item v0 should open.
Only the component using it is in the wrong place.
## What is the new behavior?
Velite reads that same signal at build time and records the item on the
document, so the page header renders one icon button beside the
framework selector, above the fold. `BlockItem` is left rendering only
the install command.
Guides with no installable item — the getting-started pages, the
TanStack DB generator, and the starters — get no button. Guides that
install a client first resolve to the block, not the client.
## Additional context
63 of 73 documents resolve to a registry item; the 10 that don't are
exactly the ones that should have no button.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Documentation pages now display an “Open in v0” button when supported.
* The button uses a compact, icon-only design alongside the framework
selector.
* **Improvements**
* The applicable v0 destination is determined automatically from
documentation content.
* The page-level action replaces individual block-level v0 buttons,
providing a more consistent experience.
* The button includes an accessible label and appears only for
documentation with a supported v0 destination.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## What kind of change does this PR introduce?
Refactor. Follow-up to #49871.
## What is the current behavior?
Branded (green) text still uses the `text-brand` classname while the
colour comes from `--primary`.
## What is the new behavior?
**Rename-only:** `text-brand` → `text-primary` across callsites and
docs. Leftover `bg-brand` / `border-brand` alias to `brand-default`. No
intentional colour changes in this PR.
This better matches how we treat our green in other components and
props, like `variant="primary"` for green buttons.
## To test
On light mode: smoke-test that branded text still looks like #49871
(readable green, not the bright fill).
-
[Homepage](https://zone-www-dot-com-git-dnywh-depr-316-text-brand-de2380-supabase.vercel.app/):
“Scale to millions” uses `text-primary`
- [Docs
homepage](https://docs-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/docs):
branded links like “More on self-hosting” are still readable
- [Typography
docs](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/typography):
documents `text-primary`
- [Colour
usage](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/color-usage):
`text-primary` is visibly darker than `bg-brand-default` _on light mode_
- [Studio auth
providers](https://studio-staging-git-dnywh-depr-316-text-brand-to-60fa6c-supabase.vercel.app/dashboard/project/_/auth/providers):
enabled provider badge text readable; status dot stays bright green
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Updated branded text, link hover states, icons, badges, indicators,
and highlighted content across the Design System, Docs, Studio, Learn,
UI Library, and marketing experiences to use the primary theme color.
* Updated syntax highlighting and table-of-contents styling for
consistent primary-color presentation.
* Refined brand color fallback behavior for bright fills and borders.
* **Documentation**
* Updated color-usage and typography guidance to recommend the primary
text utility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Chore.
## What is the current behaviour?
Classic Dark remains available across the shared theme library and
several apps. Studio now supports System, Dark, and Light as its theme
modes, but still carries compatibility paths for Classic Dark.
## What is the new behaviour?
- Removes Classic Dark from shared theme options, application commands,
stylesheets, previews, examples, and replay handling.
- Deletes the Classic Dark and faux Classic Dark stylesheets.
- Removes the now-unused Classic Dark branches from Studio theme colour
controls.
- Migrates `classic-dark` to `dark` so first rendered frame renders Dark
(not Light)
| After |
| --- |
| <img width="1458" height="1778" alt="CleanShot 2026-09-18 at 11 07
40@2x"
src="https://github.com/user-attachments/assets/679bf87f-a3c1-4599-ad2f-292d98d0b856"
/> |
## To test
1. In Studio, open Account Preferences → Appearance. Confirm the
available themes are System, Dark, and Light, and that theme colour
controls still work in each resolved mode.
2. Set the `theme` local storage value to `classic-dark`, then reload
Studio. Confirm it renders as Dark immediately and the stored value
becomes `dark`.
3. Open the theme switcher in Design System, Learn, and UI Library.
Confirm Classic Dark is no longer available and Light, Dark, and System
still apply correctly.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Changes**
* Removed the Classic Dark theme option from theme menus and settings
across the application.
* Classic Dark selections are automatically migrated to the standard
Dark theme.
* Updated theme documentation and demonstrations to list only System,
Light, and Dark.
* Removed Classic Dark styling and preview support; existing Dark,
Light, and System themes remain available.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Feature, docs.
Part 2 of 6 in a stack that splits the library redesign into reviewable
pieces.
## What is the current behavior?
The library documents individual blocks. Nothing answers "I have no
project yet" — a reader who wants a working app has to assemble one from
block guides and figure out the scaffolding themselves.
## What is the new behavior?
Four starter guides under `/docs/starters`, each starting from an empty
directory and ending with a running app on Supabase:
- **Next.js starter** — composes the library's own password-based auth
block.
- **SaaS starter** — the community subscription-payments template, with
Stripe setup.
- **AI chat app** — the community Vercel AI SDK template.
- **Flutter starter** — the user-management example, with profiles and
avatar uploads.
They reuse the existing doc route, so the sidebar, command menu,
Markdown export and `llms.txt` pick them up with no new plumbing. The
framework selector already renders nothing for pages that declare no
framework variants, so a starter page shows none.
## Additional context
The starter pages are added here in the current site's page layout; the
last PR in the stack converts them to the new one along with every other
guide.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added a Starter Apps section to the side navigation and command menu.
- Added links for Next.js, SaaS, AI Chat, and Flutter starter projects,
marked as new.
- **Documentation**
- Added setup and deployment guides for the Next.js and SaaS starters.
- Added an AI Chat App guide covering configuration, local verification,
and deployment.
- Added a Flutter starter guide covering authentication, profiles,
avatars, deep links, and hosted setup.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Refactor, bug fix.
Part 1 of 6 in a stack that splits the library redesign into reviewable
pieces. This one is the foundation the rest build on and has no visual
change.
## What is the current behavior?
Three build steps each reimplement "where does this registry file land
in the user's project": `process-registry`'s `getDefaultPath`,
`registry/utils`' `uniqBy` on `file.path`, and the Markdown exporter.
They disagree, which produces real bugs:
- A Vue block whose files come from `node_modules/@supabase/vue-blocks/`
keeps its package path, so the installer writes the package folder into
the user's project.
- `registryItemAppend` builds its `docs` string from `(item.docs,
items.flatMap(...))` — a comma expression, so the item's own docs are
discarded.
- A name collision between a block file and its client's file silently
keeps one of the two.
- Install commands guess the CLI family from substrings in the item
name, so `infinite-query-composable` — a Vue block with neither "vue"
nor "nuxtjs" in its name — gets the React CLI.
- Production Vue installs use `@supabase/<name>`, but the `@supabase`
namespace is registered with shadcn, not shadcn-vue.
- `build:registry`, `build:content`, `build:markdown` and `build:llms`
run in parallel, but the last three read `public/r`.
## What is the new behavior?
`lib/registry-resolution.ts` owns installed-path derivation, first-party
dependency naming, deduplication, and cycle detection, and every
consumer calls it. `build-registry` validates the whole registry against
shadcn's schema and resolves every item, so a broken reference fails the
build instead of shipping. `clean-registry` throws rather than logging
past a failure.
Pages declare their install `framework` explicitly instead of it being
inferred, and production Vue installs use the absolute registry URL.
The build steps are serialized behind `build:prepare`, and a new
`library-tests.yml` workflow runs the library's tests, checks the
generated registry is committed, and builds the app.
## Additional context
Regenerated registry artifacts are the mechanical result of the
resolution fix — the Vue client items and the OAuth consent items that
gained their client's docs.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added explicit React and Vue framework selection for library blocks
and installation commands.
* Improved registry resolution, dependency handling, path validation,
and Vue file normalization.
* Added support for reliable local, preview, and production registry
URLs.
* **Documentation**
* Updated Vue and Nuxt installation documentation to identify the Vue
framework explicitly.
* **Bug Fixes**
* Preserved combined documentation and validated generated registry
content more consistently.
* **Tests**
* Added coverage for installation commands, registry resolution,
dependency handling, and generated artifacts.
* **Chores**
* Added automated pull-request checks for library tests and builds.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## What kind of change does this PR introduce?
Docs update, with supporting `ui` and Studio changes.
## What is the current behaviour?
Disabled buttons with tooltips use native `disabled`, which removes them
from the tab order. Keyboard users cannot focus the control or read the
tooltip explaining why an action is blocked.
The design system also lacked guidance on keeping disabled actions
discoverable and explaining why they are unavailable.
## What is the new behaviour?
- Adds a **Disabled controls** section to the accessibility docs, with
live examples for a focusable disabled button and visible page-level
context
- Adds `focusableWhenDisabled` to `Button`, keeping `disabled` as the
semantic state while using `aria-disabled`, retaining keyboard focus,
and guarding click handlers
- Updates Studio's `ButtonTooltip` to make disabled buttons with tooltip
text focusable automatically
Also includes earlier design-system fixes on this branch:
- Centralises `BASE_PATH` with a `/design-system` fallback so asset URLs
work without a local `.env` file
- Fixes sidebar hover and active tokens in design-system and ui-library,
aligned with Studio's `InnerSideMenuItem`
## To test
**Design system**
1. Open the [accessibility
preview](https://design-system-git-fix-design-system-docs-and-nav-fixes-supabase.vercel.app/design-system/docs/accessibility)
2. Scroll to **Disabled controls**
3. Tab to the **disabled-focusable** example. Confirm the button remains
focusable, looks disabled, and shows its tooltip on focus
4. Confirm the **disabled-unavailable-with-notice** example shows the
admonition and focusable disabled button pattern
**Studio (optional, requires a High Availability project)**
5. Go to Settings → General → **Pause project**. Tab to the button and
confirm it remains focusable, looks disabled, and shows the HA tooltip
on focus
6. Go to Database → Backups and find **Restore** on a scheduled backup
row. Confirm the same behaviour
## Summary
- `contentlayer2@0.4.6` is unmaintained and drags in a heavy, stale
dependency graph (esbuild pinned to 0.17–0.20, mdx-bundler, old
`@opentelemetry/core`) that was the recurring source of vuln bumps.
- Migrates all three apps that used it — `design-system`, `ui-library`,
`learn` — to [Velite](https://velite.js.org), preserving the generated
typed `allDocs`/`Doc` collection and the `body.code` + `useMDXComponent`
runtime via a small shared local hook.
- Same MDX pipeline (remark-gfm, remark-code-import, rehype-slug,
rehype-pretty-code w/ Shiki compat + local theme,
rehype-autolink-headings, custom
`__rawString__`/`__src__`/`__event__`/`__style__` visitors) ported 1:1
into each app's `velite.config.js`.
- `learn`'s extra frontmatter fields (`chapterNumber`, `explore`,
`courseHero`) are now backed by real Velite/Zod schema types, so the
`(doc as any)` casts in `get-next-page.ts` / `get-current-chapter.ts` /
the doc page could be dropped.
- `next.config.mjs` no longer wraps with `withContentlayer`; since
Velite has no Next.js webpack-plugin equivalent, each app's `dev` script
now runs `velite dev` and `next dev` in parallel via `npm-run-all`.
Ref:
[FE-3861](https://linear.app/supabase/issue/FE-3861/migrate-off-contentlayer2-learn-ui-library-design-system-to-shed)
## Test plan
- [x] `pnpm build:content` (Velite build) succeeds for all three apps
- [x] `pnpm typecheck` passes for all three apps
- [ ] Manual smoke test of `pnpm dev` for each app in a browser (docs
pages render, TOC, copy-button, code highlighting)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Improved content generation across documentation, learning materials,
and the UI library for more consistent pages.
* Preserved MDX rendering, navigation, table of contents, course
metadata, source previews, and component examples.
* Improved consistency when displaying documentation and interactive
examples.
* Improved application loading by optimizing how interface components
are delivered.
* **Chores**
* Streamlined content compilation and development workflows across the
design system, learning area, and UI library.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Feature — a new UI Library block. Bottom of a two-PR stack; #49579
builds on it.
## What is the new behavior?
Adds an `mcp-server` block: a Supabase Edge Function that exposes MCP
tools scoped to the signed-in user. It is backend-only, so every file
has an explicit target and no `components.json` is needed.
- `withSupabase({ auth: 'user' })` verifies the access token and gives
each tool an RLS-scoped client. Both product session tokens and OAuth
tokens work; only the latter carry `client_id`.
- `withOAuthProtectedResource` serves RFC 9728 metadata and adds a
`WWW-Authenticate` challenge to `401`s, so external MCP clients can
discover the authorization server.
- Tools are composed in `tools/index.ts`. One is included, `whoami`,
which shows the caller's identity and OAuth client.
Docs at `/library/docs/headless/mcp-server`, under a new MCP group in
the sidebar. `BlockItem` gained a `showOpenInV0` flag (v0 cannot take
Deno functions), and the file-tree viewer now picks a language per file
instead of always TypeScript.
## To test
1. `npx shadcn@latest add
http://localhost:3004/library/r/mcp-server.json` into a Supabase project
or empty directory.
2. Add `[functions.mcp-server] verify_jwt = false` to
`supabase/config.toml`, then:
```bash
supabase start
supabase functions serve mcp-server --env-file supabase/functions/.env
```
3. **Unauthenticated:** `curl -i
localhost:54321/functions/v1/mcp-server` returns `401` with a
`WWW-Authenticate` header, and
`/functions/v1/mcp-server/oauth-protected-resource` returns the metadata
document.
4. **Product session:** sign up a user, then call the endpoint with
`Authorization: Bearer <their access token>`. `tools/list` shows
`whoami`; calling it returns that user's id and `client_id: null`.
5. **External client:** enable `[auth.oauth_server]` with
`allow_dynamic_registration = true`, install the OAuth Consent block,
point an MCP client (Claude Code, Codex) at the function URL, approve
the consent screen, and call `whoami` again. `client_id` is now
populated.
6. Confirm RLS holds: add a table with a user-scoped policy and a tool
that reads it, then check a second user cannot see the first user's
rows.
7. Docs page renders at `/library/docs/headless/mcp-server`, and
`deno.json` / `.env.example` in the folder tree highlight as JSON and
bash rather than TypeScript.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added an installable Supabase MCP Server block with user-scoped
authentication and a read-only identity tool.
- Added MCP Blocks to documentation navigation and setup guidance.
- Code blocks now automatically detect syntax highlighting from file
names.
- Added an option to hide the “Open in v0” button.
- **Documentation**
- Expanded MCP Server guidance covering installation, configuration,
validation, deployment, OAuth, and security.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Saxon Fletcher <SaxonF@users.noreply.github.com>
<img width="1510" height="860" alt="image"
src="https://github.com/user-attachments/assets/36a748b7-bdeb-4685-8bb1-da911711874b"
/>
Introduces a new OAuth consent block in preparation for offering more
MCP focused blocks that require authentication and consent. The general
approach for this is to decouple consent block from authentication block
but provide guidance on how to use both. The alternative is to add auth
as a dependency to consent but apps may already have their own
authentication UI / flows.
The block is also positioned as a general OAuth Consent vs MCP Consent
as it can be put to use for other use cases outside of MCP on projects
who want to make use of the OAuth 2.1 Server offering.
A couple of changes outside of the block itself were required:
- Updated the Auth blocks to allow for a `next` param to redirect users
to after signing in
- Updated middleware so next param is correctly passed through to sign
in
## How to test
Requires Docker and a Supabase CLI recent enough to support
`[auth.oauth_server]` (verified on 2.109.0 / GoTrue v2.192.0).
### 1. Local Supabase with the OAuth server enabled
In your `supabase/config.toml`, edit the existing `[auth.oauth_server]`
section — `supabase init` already writes one, and adding a second fails
with `table oauth_server already exists`:
```toml
[auth.oauth_server]
enabled = true
authorization_url_path = "/oauth/consent"
allow_dynamic_registration = true
```
Set `site_url` to wherever your test app runs (e.g.
`http://localhost:3100`), then `supabase start`. Grab the API URL and
publishable key from `supabase status`.
### 2. A consumer app with the blocks installed
The consent block ships no login route by design, so pair it with an
auth block:
```bash
npx create-next-app@latest consent-test --ts --tailwind --app --yes
```
```bash
cd consent-test && npx shadcn@latest init -d -y && npx shadcn@latest add https://supabase.com/library/r/password-based-auth-nextjs.jsonhttps://supabase.com/library/r/oauth-consent-nextjs.json
```
To test this branch before it deploys, run `pnpm --filter ui-library
dev` and use `http://localhost:3004/library/r/...` instead. If you
changed anything under `registry/default/blocks/oauth-consent/**`, run
`pnpm --filter ui-library build:registry` first — shadcn fetches the
generated `public/r/*.json`, not the source.
Put `NEXT_PUBLIC_SUPABASE_URL` and
`NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY` in `.env.local` and start the app
on the port you set as `site_url`.
### 3. Register an OAuth client and start a real authorization request
```bash
curl -s -X POST http://127.0.0.1:54321/auth/v1/oauth/clients/register -H "Content-Type: application/json" -d '{"client_name":"Test Client","redirect_uris":["http://localhost:3100/callback"],"grant_types":["authorization_code"],"response_types":["code"],"scope":"openid profile email"}'
```
Then open the authorize URL in a browser (not curl — you need the
redirect chain and cookies):
```
http://127.0.0.1:54321/auth/v1/oauth/authorize?client_id=<id>&response_type=code&redirect_uri=http://localhost:3100/callback&scope=openid+profile+email&state=xyz&code_challenge=<challenge>&code_challenge_method=S256
```
Auth mints the `authorization_id` and redirects to
`<site_url>/oauth/consent?authorization_id=…`. An MCP client pointed at
your app is an even better driver, since that's the real consumer shape.
### 4. Cases to walk
| Case | Expected |
| --- | --- |
| Signed out, hit the authorize URL | Lands on
`/auth/login?next=%2Foauth%2Fconsent%3Fauthorization_id%3D…`; after
login, returns to the consent screen |
| Consent screen | Shows client name, redirect URI, signed-in email, and
requested scopes from `getAuthorizationDetails` |
| Allow access | Redirects to `redirect_uri` with `code` and your
original `state`; the code exchanges at `/oauth/token` for a real access
token |
| Deny | Redirects with `error=access_denied` and your `state` |
| Re-run the same authorize URL after approving | Skips the screen,
straight to callback with a new code |
| Visit `/oauth/consent` with no `authorization_id` | "This page needs
an authorization_id" |
| Stale or bogus `authorization_id` | Error shown, buttons still usable
|
| Double-click Allow | Exactly one `POST
/oauth/authorizations/<id>/consent` |
Test the react, react-router, or tanstack variant the same way if you're
touching them — the hook is duplicated per framework, so a fix in one
doesn't carry.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added an OAuth 2.1 consent experience with client details, requested
scopes, redirect URI, and approve/deny actions.
* Added OAuth consent examples and registry blocks for Next.js, React,
React Router, and TanStack Start.
* Added OAuth documentation, navigation, and framework support across
the UI library.
* **Bug Fixes**
* Login flows now safely preserve valid same-origin redirect
destinations while rejecting unsafe URLs.
* OAuth routes can handle consent flows before authentication and
redirect safely to sign-in.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
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.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## 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.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<img width="1033" height="861" alt="image"
src="https://github.com/user-attachments/assets/54a104df-1db9-4b97-89db-6eec671b3af7"
/>
Removes the above AI Skills page from our ui library and instead
redirects to the more up to date ai skills docs page.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a direct “Install Skills” link to the AI Skills documentation
guide.
* Added a permanent redirect from the legacy prompts URL to the new AI
Skills guide.
* **Documentation**
* Updated the docs side navigation to list component pages under
“Blocks”.
* Removed the AI Skills page content and its navigation/search entries.
* Removed the AI editor rules documentation/registry entries, so they no
longer appear in the generated documentation set.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## Problem
Now that we migrated all usages of the deprecated `Tabs` component, we
don't need the `_Shadcn_` suffix anymore.
## Solution
Remove `_Shadcn_` suffix from `ui` tabs components. That's all this PR
does, no visual nor functional changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Standardized tab components across the app so pages and dialogs now
use the same consistent tab UI.
* Improved tab-based views in design, docs, studio, learn, and website
experiences for a more uniform interface.
* **Chores**
* Updated shared UI exports to expose tab components directly,
simplifying future usage across the product.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES/NO
## What kind of change does this PR introduce?
Bug fix, feature, docs update, ...
## What is the current behavior?
Please link any relevant issues here.
## What is the new behavior?
Feel free to include screenshots if it includes visual changes.
## Additional context
Add any other context or screenshots.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Refreshed theming across the UI to use modern color expressions and
shared theme variables (including OKLCH-based gradients), improving
consistency for charts, code blocks, overlays, icons, and decorative
backgrounds.
* **Bug Fixes**
* Improved light/dark color and gradient consistency across axis/grid
styling, reference lines, buttons/badges, sidebar accents, loaders, and
other visual components.
* **Documentation**
* Updated styling/theming guidance to align with the revised semantic
token system and the updated theme variable usage patterns.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
## Problem
- We still use/maintain the legacy theming even though we moved to
Shadcn
- We have two themes list with similar code
## Solution
- Migrate some components to `cva` and `cn` instead of `styleHandler`
- Remove redundant `themes` in favor of `singleThemes`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Standardized theme selection across the app so theme menus
consistently offer the same light/dark/system options, including
dropdowns, navigation menus, and command menus.
* **Refactor**
* Refreshed styling for multiple shared UI components (menus, tabs, side
panels, loading indicators, icons, and modal dialogs) to improve
consistency while preserving visual behavior.
* **Chores**
* Improved the UI patterns CI “validate exports” check for clearer
failure output when exports change unexpectedly.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We now export components under a subpath in ui-patterns to avoid barrel
files as they slow down every tools (from IDE to linters, etc.) and may
also affect bundles our users have to download.
## Solution
- Remove the UI patterns index file
- Fix invalid impors
## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
- Noticing our code we have many patterns of calling localstorage and
handling those errors
- We should add those in a single well tested file
- Handle those errors in the singleton which makes it easier for us to
debug customer issues. Logger is outputing local storage warnings for
feature we expose
- Side effect of this is random crashes on studio when local storage
isn't available or handled correctly
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Improved browser storage handling across the app for more reliable
persistence and graceful behavior in restricted or non-browser
environments (settings, previews, charts, tabs, sign-in/session flows,
integrations, and UI state).
* **New Features**
* Introduced a safe storage layer to standardize and harden
local/session persistence.
* **Tests**
* Added comprehensive tests covering the new safe storage behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Feature, docs update
## What is the new behavior?
This PR introduces a new `RealtimeFlow` component and hook to the UI
library for building collaborative React Flow with Supabase Realtime:
- keeps nodes and edges in sync across multiple connected clients in
real time
- uses Yjs with `@supabase-labs/y-supabase` to propagate flow updates
- supports optional persistence, so a flow can be restored from
previously saved shared state
## Additional context
https://github.com/user-attachments/assets/90d3a381-6f9c-427f-a493-5d91c2141462
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Collaborative "Realtime Flow" diagram editor with syncing overlays and
a dual-view demo component
* Interactive demo page and registry example for live editing
(add/remove/rename nodes)
* Framework-ready registry packages for Next.js, React, React Router,
and TanStack
* **Documentation**
* Comprehensive docs added for Next.js, React, React Router, and
TanStack (usage, persistence, hook API)
* **Chores**
* Added runtime dependency for the flow component package
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/44273)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on `Command` components
## Solution
- Remove the `_Shadcn_` suffix
- Simplify UI package exports
- Apply prettier
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Simplified command component imports and exports across the UI library
by removing internal naming aliases and adopting direct component
references. Updated the public UI package barrel export to use wildcard
re-exports for cleaner API surface.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46153?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on `Select` components
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Updated internal component architecture to standardize and simplify
the codebase. These changes improve code maintainability and consistency
across the application without affecting existing functionality or user
experience.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45988)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We have multiple Popover components
## Solution
- [x] migrate Popover usages to Shadcn components
- Migrated JSON and text editor in the `TableEditor` (inline row
edition)
- Migrated the template popover in the logs explorer templates page
- [x] remove `_Shadcn_` suffix from Popover components (renaming +
prettier)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Unified popover implementation across the app and design system;
dropdowns, calendars, menus and tooltips now use a consistent popover
API with no visual or interaction changes.
* **Chores**
* Minor prop typing update for the logs date-picker to align with the
consolidated popover content type.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45980)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR finishes the Tailwind migration by doing some minor fixes:
- Remove `@radix-ui/colors` and inline the color values into the color
definitions. The default Tailwind colors are unset and replaced by our
own color set (both in light and dark variants).
- Remove the `colorA` colors because they were used with alpha values.
They were unused and Tailwind v4 supports alpha values natively.
- Replace the `hit-area` JS config with the original CSS config from
https://bazza.dev/craft/2026/hit-area. The original config was migrated
to JS config to work with Tailwind v3. Now that we're on v4, we can just
use the source format.
- Remove the `motion-safe-transition` plugin since it's now [supported
natively by
Tailwind](https://tailwindcss.com/docs/transition-duration#supporting-reduced-motion)
- Replace `tailwindcss-animate` with `tw-animate-css`. The old plugin
was unmaintained and using JS config. The new one should be a drop-in
replacement.
- Remove all scripts for generating colors, they're not needed anymore,
all values are hardcoded.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added hit-area debugging and sizing utilities for enhanced layout
control.
* **Refactor**
* Restructured color system to use hand-edited CSS variables with
inlined values for improved performance and maintainability.
* Migrated animation utilities to a new framework.
* **Style**
* Enhanced motion-reduced animations with improved transition behavior.
* Adjusted sidebar layout styling for better visual presentation.
* **Chores**
* Updated animation dependencies.
* Removed legacy color generation scripts.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45925)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
## Problem
With #45211 and #45218 merged, we don't need the `_Shadcn_` suffix
anymore
## Solution
- [x] Remove the `_Shadcn_` suffix
- [x] Update exports and imports
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Standardized UI component exports by removing legacy naming
conventions and providing direct imports for checkbox and radio group
components throughout the design system.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR moves several components which rely on `next` out of the `ui`
package to the `ui-patterns` package.
`ui-patterns` package is intented to be imported with specific imports
so it's ok if there are components reliant on `next` in there.
The `SonnerToaster` component has removed its dependency by requiring a
prop for `theme`.
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Adds a new Realtime Monaco component to the UI Library, enabling
collaborative code editing with Supabase Realtime synchronization using
Monaco Editor and Yjs.
## Additional context
This is WIP and used for discuss further changes to the y-supabase
provider.
## Demo
https://github.com/user-attachments/assets/84a761e5-73bb-478e-979a-682121ffee89
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **New Features**
* Added a new Realtime Monaco collaborative code editor component with
real-time synchronization support across multiple frameworks (Next.js,
React, React Router, Tanstack).
* **Documentation**
* Added comprehensive documentation and usage guides for the Realtime
Monaco component across all supported frameworks.
* **Dependencies**
* Added Monaco editor, Yjs, y-monaco, and Supabase collaboration
packages.
<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
This PR fixes some prettier issues:
- Bump and unify all prettier versions to 3.7.3 across teh whole repo
- Bump the SQL prettier plugin
- When running `test:prettier`, check `mdx` files also
- Run the new prettier format on all files
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Sorted all imports in all packages, `cms`, `design-system` and
`ui-library` apps by running `pnpm format` on them.
All changes in this PR are done by the script.
* Remove extra file.
* Remove unneeded tsconfig.jsons.
* Add @/* alias for importing in-package files to all apps.
* Remove baseUrl from all apps except studio (it'll require changes in almost all files).
* Fix baseUrl issues in docs, ui-library and design-system.
* Fix the typecheck for cms app. Fix all baseUrl errors in the cms app.
* Add deprecated flag to baseUrl in www.
* Fix templateTitle telemetry for production command format
Consolidated regex parsing to handle both URL format (/ui/r/name.json)
and shadcn registry alias format (@supabase/name) in a single pass.
The regex extracts title and framework atomically, properly handling
version specifiers like @latest through greedy backtracking.
* Handle vue and nuxtjs in the supabase clients.
* Fix the types.
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* docs: add vue client to ui-library
* docs: add missing vue client to llms.txt
* docs: add nuxt client to ui-library
* docs: wrong env variable names
* docs: fix dependencies
* docs: update client-nuxtjs.json
* Reinstall the deps so that the pnpm-lock.yaml has less changes.
* Add blocks/vue package.
* Remove the vue blocks from ui-library.
* Copy the vue blocks into ui-library.
* Clean up unneeded files.
* Regenerate the pnpm-lock file from master.
* Fix prettier errors.
* docs: update shadcn-vue cli
* docs: reusable server client
* Small things
* docs: improvments after CR
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Terry Sutton <saltcod@gmail.com>
* Remove unneeded code.
* Remove more unused code.
* Update knip.jsonc for ui-library.
* Remove unneeded imports. Change the registry generation to only generate what's needed.
* Cleanup the rehype middleware (it wasn't used). Clean up the example blocks generation.
* Don't show the "show code" button in all dropzone examples.
* Remove the og-image from the docs pages to see if they're pulled from the main layout.
* Merge the doc metadata with the metadata from the main layout.
* Consolidate copy to clipboard
* Fix
* Fix some extra clipboard events.
* Fix the tests. Fix a small issue with the copy button.
* Fix
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* Bump nextjs in the ui-library.
* Bump the nextjs in design-system.
* Bump nextjs to v15 in www.
* Bump the next version in the pnpm catalog.
* Switch all apps to using the catalog version of next.
* Fix ui-lib and design-system to build with next 15.
* Fix some prettier errors.
* Bump the next-eslint package.
* Fix a lint issue about a component starting with underscore.
* Use the catalog version of next in cms app.
* Disable turbo for dev command in www. Remove obsolete experimental flags.
* Return some of the experimental flags.
* Add social login block.
* Regen the registry.
* Fix the nextjs social auth.
* Add social auth blocks for RR, Tanstack and React.
* Minor fixes.
* Add docs.
* Update the docs.
* Minor fixes to the blocks.
* Update the docs.
* Fix various doc issues.
* Fix the redirect in the password-based auth.
* Fix note about supabase clients in docs.
* Use with instead of assert in the registry imports.
* Update all auth blocks to use /protected.
* Update all docs for the password-based auth.
* Add new label to social auth.
* Fix docs issues.
* Light mode fix
* Smol fixes
* Fix the origin in the login route.
* Add social auth to the landing page.
* Regenerate the registry.
---------
Co-authored-by: Terry Sutton <saltcod@gmail.com>
