## What kind of change does this PR introduce?
Chore / docs update. Related to DEPR-551. Stacked on #46053.
## What is the current behavior?
`Admonition` still accepts `label` as a backwards-compatible alias for
`title`, and a few www blog posts plus the Docs MkDocs admonition
transform still use or emit that alias.
## What is the new behavior?
Removes the `label` prop from `AdmonitionProps`, migrates the remaining
www blog Admonitions to `title`, and updates the Docs MkDocs transform
to emit `title` directly.
This leaves `title`, `description`, and `children` as the supported
Admonition content API.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Admonition now uses a single required title prop for headings; the
legacy label prop is removed and no longer used.
* **Documentation**
* Updated docs and blog posts to pass admonition heading via title and
removed notes about label support.
* **Tests**
* Component tests adjusted to validate the new title-only behavior and
to ensure legacy label usage is rejected.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46054?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 -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
## Summary
Two surfaces were showing invalid Codex config keys that don't exist in
Codex's schema (which uses `additionalProperties: false`), causing
validation errors for users who followed the setup steps.
- **Studio Connect Sheet** (`connect.schema.ts`): removes the "Enable
remote MCP client support" step, which told users to add
`[mcp]\nremote_mcp_client_enabled = true` to `~/.codex/config.toml`.
Deletes the dead content component and updates tests.
- **Docs MCP panel** (`ui-patterns/McpUrlBuilder/constants.tsx`):
removes the `[features]\nrmcp_client = true` config block from the Codex
`alternateInstructions`. Keeps the valid authenticate (`codex mcp login
supabase`) and verify (`/mcp`) steps.
Closes
[AI-548](https://linear.app/supabase/issue/AI-548/bug-studio-mcp-connect-flow-shows-invalid-codex-config-guidance)
Fixes#43893
## Root cause
Both invalid keys were introduced in #42374 (Feb 2026). A full search
through the [`openai/codex`](https://github.com/openai/codex) git
history confirms neither `remote_mcp_client_enabled` nor `rmcp_client`
ever existed in any version of the codebase (neither the TypeScript CLI
nor the Rust rewrite).
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Adjusts layout / page patterns including design system documentation and
page components.
<img width="937" height="643" alt="image"
src="https://github.com/user-attachments/assets/5f7864a3-04ae-4ccf-b2b8-d9fe5e29554e"
/>
**To test**
- Ensure all existing page types in Studio are un-effected. They
shouldn't be since existing components aren't touched.
- Run design-system and have a read through layout and page header
documentation. Make sure you understand when and where to use the
various combinations of page components and their variants.
**Next**
Once we are happy with these patterns we can gradually start to update
Studio pages that make use of breadcrumbs and/or sub navigation.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added PageBreadcrumbs and PageNav page chrome
* Several new interactive layout examples (Auth Emails, Edge Functions,
Full‑Width, Logs) and demo pages
* **Documentation**
* New docs for PageBreadcrumbs and PageNav
* Reworked layout guidance and patterns; updated fragment/example docs
and usage notes
* **Improvements**
* Component preview now supports explicit padding control
* Simplified page header demo and updated previews
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46126?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 `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 -->
## Context
Adjusts the filter bar component to accept a `freeformDefaultProperty`,
in which entering any text in the filter bar will opt to search against
that property by default. (Property must be defined within the
`filterProperties` prop too)
Applies to unified logs, which for e.g "Event message" is a valid
filter:
<img width="428" height="250" alt="image"
src="https://github.com/user-attachments/assets/a08c015c-c9aa-4985-9e15-6429f455ccf0"
/>
I've set `freeformDefaultProperty` to be `event_message`, and hence
typing free text will opt the default action to just filtering against
that property
<img width="437" height="135" alt="image"
src="https://github.com/user-attachments/assets/ccf6944a-1c5d-4944-acfa-ac82dc20bb10"
/>
### Demo:
https://github.com/user-attachments/assets/287ee22d-f957-48e5-89b0-1fed159cd86a
### Other changes
- Opt to deprecate `truncateText` util from unified logs -> preference
for tailwind instead
- Event message is added as a filter field, but hidden in the side nav
(wouldn't make sense since the content is very dynamic, unlike something
similar like pathname)
- Fixes some console errors in unified logs because we were using
`.getColumn` in `DataTableSheetRowAction`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added an "Event message" filter (hidden by default) and set it as the
default target for freeform searches.
* **UI Improvements**
* Filter sidebar resize constraints tightened.
* Timeline chart spacing and x-axis tick behavior improved.
* Action labels and command list items no longer truncate long input
values.
* **Bug Fixes**
* More reliable resolution of target columns for row actions, improving
available filter options.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46134?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 `ui-patterns/CommandMenu` exposes internal components that have the
same names as the base shadcn components they wrap. This create
confusion about which one to use and forces us to expose the base ones
with the `_Shadcn_` suffix.
## Solution
Rename those internal components to have `CommandMenu` in their names to
make it clearer they are meant to be used with `CommandMenu`. We will
then rename the shadcn base ones to remove the suffix.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Refactor
* Standardized Command Menu component naming across the design system
for improved consistency and clarity. Updated component names:
`CommandInput` → `CommandMenuInput`, `CommandList` → `CommandMenuList`,
`CommandItem` → `CommandMenuItem`, `CommandEmpty` → `CommandMenuEmpty`,
and `CommandGroup` → `CommandMenuGroup`. Updated public API exports,
internal subpath references, all examples within the registry, and
implementations across documentation, studio, and application
interfaces.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45996)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Swaps out (and deprecates) the unified logs's own filter bar, for our
existing design system's filter bar
<img width="1450" height="355" alt="image"
src="https://github.com/user-attachments/assets/c5e83bd1-4e67-4bb5-8f27-a3d9beacbbb5"
/>
Other changes involved for the FilterBar itself includes the following
(more details in subsequent sections)
- Add `onApply` param for `FilterBar` that will only trigger when an
entered filter is "complete" (e.g on enter or blur)
- Automatically select the operator if only one exists
## To test
- Verify that the filter bar in general works BUT note there's some odd
behaviour when searching on say the "status" column (more details under
known issues)
- likely something with the internal SQL i think, will need to
investigate separately
- afaict testing on the method seems to be working at least
---
### Add `onApply` parameter for `FilterBar`
The search behaviour for the filter bar feels a bit awkward atm -
referencing the table editor:
- selecting the column triggers a search, which returns an error cause
the search query is incorrect (operator and value not selected yet)
- when typing the search value (after selecting the column + operator),
the search triggers on debounce, which feels odd in this context as I'd
expect the search to only trigger when i've hit enter (e.g to "finalize"
my search parameters)
- Am adding an `onApply` parameter gets called when a filter is
"complete" -> column, operator, and value are finalized (e.g via Enter
or onBlur)
- Updated both Unified logs and table editor to use this behaviour
### Automatically select operator if only one exists in `FilterBar`
This one's more specific to unified logs since there's only an `=`
operator - but saves an unnecessary "enter" key event when filtering in
unified logs
### Known issues
- For some reason (even with the existing filter bar) - searching
against status for e.g for postgres logs doesnt return the expected
rows. e.g i've got rows with status as `00000`, but searching for
`00000` doesnt return anything. Suspect its something to do with the SQL
we're firing?
<img width="1167" height="271" alt="image"
src="https://github.com/user-attachments/assets/1dde74cf-8366-4cf1-8d8f-6907ba2473f6"
/>
<img width="1184" height="453" alt="image"
src="https://github.com/user-attachments/assets/bf55f0fb-cb27-4e8f-b2d9-cd913d6ac6b9"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a dedicated Logs filter bar with an explicit "apply"/commit
callback for filter UI.
* **Bug Fixes**
* Filter edits are buffered locally and only committed on apply to
prevent aggressive data requests.
* **Refactor**
* Replaced legacy command-style table filter UI and removed related
utilities.
* Updated filter commit lifecycle and narrowed option value typing;
adjusted top-level provider ordering.
* **Style**
* Small layout and trigger behavior tweaks for filter controls, timeline
chart spacing, and download button.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46071?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 -->
---------
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
## 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 -->
- Most changes are related to either types or `useRef` usages (it now
requires an initial value).
- also updated `vaul` to its latest version and haven't noticed any
change ([design-system
demo](https://design-system-git-react-19-supabase.vercel.app/design-system/docs/components/drawer))
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Upgraded workspace to React 19.
* **Bug Fixes**
* Improved null-safety and ref handling across editors, UI components,
shortcuts, and markdown/image rendering to reduce runtime errors.
* Safer event/timeout/interval cleanup and more robust command/context
handling.
* **Chores**
* Bumped vaul dependency versions.
* **Documentation**
* Type and TypeScript accuracy improvements for clearer developer
feedback.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45886)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on label component
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Standardized Label usage across the codebase by removing the legacy
alias and using the direct Label export from the UI package
consistently.
* **Documentation**
* Updated component examples and docs to use the standardized Label
component in usage snippets and demos.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45986)
<!-- 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 -->
## What kind of change does this PR introduce?
Docs update and design-system component taxonomy cleanup
## What is the current behavior?
The design-system docs conflate low-level shadcn primitives with
product-level alert patterns. Collapsible documentation previews the
alert-specific wrapper, and the alert/collapsible relationship is
unclear
## What is the new behavior?
- Documents Alert and Collapsible as low-level atom components
- Moves the alert-styled expandable wrapper into
`ui-patterns/expandable-alert` as `ExpandableAlert`
- Documents Expandable Alert as a Fragment Component next to Admonition
- Updates the Session Timeout modal to import `ExpandableAlert` from
`ui-patterns/expandable-alert`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* `CollapsibleAlert` component is now available for alert-styled
expandable content.
* **Documentation**
* Updated component documentation to clarify when to use `Alert`,
`Collapsible`, `Admonition`, and `CollapsibleAlert`.
* Added comprehensive documentation for `CollapsibleAlert` with usage
examples and variant options.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45863)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
This PR migrates the JS config for Tailwind into a CSS config. As such,
all variables have been defined as CSS variables and they're using the
specialized Tailwind syntax for generating utility classes.
Beside the migration, these changes were also added:
- Added `tailwind.config.css` to few packages to make the Tailwind
Intellisense work.
- Migrated away from Radix style color classes to our defined classes,
the values will remain the same.
- Most of the CSS is generated by scripts, they'll be removed in next
PRs.
* Removed redundant `border-light` classes from several components since
it was undefined.
* Removed redundant `text-strong` classes from several components since
it was undefined.
How to test:
- Open all apps, compare the UI (mainly colors) to builds from #45417
and try to find a difference.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Harmonized color variable usages and updated UI color references
(affects palettes, charts, gradients, hero illustrations, and
scrollbars).
* Tweaked border, tab, and selection visuals across components.
* **New Features**
* Added a suite of theme animations and refined typography presets used
by site prose and docs.
* **Refactor**
* Overhauled Tailwind/theme configuration and color token generation for
more consistent theming.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We have multiple `Collapsible` components.
## Solution
Reduce their number by using only the one from shadcn.
I haven't noticed any visual nor functional changes.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Migrated expandable/collapsible UI to a unified shadcn-based
implementation for more consistent expand/collapse behavior across the
app.
* **Style**
* Updated listbox check icon sizing and removed obsolete collapsible
open/close animations.
* **Chores**
* Removed deprecated collapsible variants and consolidated UI component
surface for simpler maintenance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Feature and design-system update. Resolves DEPR-551.
This is a narrower redo of #45302 after the revert in #45535.
## What is the current behaviour?
The reverted implementation made Admonition more flexible, but it also
changed Studio callsites, touched shared Alert styling, renamed the
design-system Tailwind config, and changed Docs-facing content/API
assumptions in a way that broke production docs static generation.
## What is the new behaviour?
Admonition now supports description-only content, children-only content,
optional `title`, legacy `label`, and `type="success"` without touching
`apps/docs/content/**` or shared Alert styling.
`title` wins over `label` when both are provided. The runtime component
props stay backwards-compatible for existing MDX and Studio usage, while
`AdmonitionStrictProps` captures the stricter new-usage contract for
tests and future callsites.
The design-system docs and registry include description-only and success
examples, and the Admonition tests cover the rendering paths that broke
production previously.
| After |
| --- |
| <img width="1668" height="1768" alt="CleanShot 2026-05-06 at 17 35
13@2x"
src="https://github.com/user-attachments/assets/1c00ea7f-e3ca-45eb-8af9-3536b657c341"
/> |
## Additional context
These things that were in #45302 have been left out (unless checked):
- [ ] Studio callsite rewrites from title/label to description
- [ ] Shared Alert text-colour changes
- [ ] Design-system Tailwind config rename
- [ ] Design-system global CSS changes
- [ ] Any docs content migration or label deprecation
- [ ] Any production docs workaround
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added success admonition variant with dedicated styling and icon.
* Introduced description-only admonition example.
* **Documentation**
* Expanded admonition guidance on title vs description usage and best
practices.
* Added example sections showcasing description-only and success
variants.
* **Tests**
* Added comprehensive tests covering admonition variants and
rendering/precedence behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The dashboard renders all timestamps in the browser's local timezone.
When debugging app issues, users often want to see logs and timestamps
in a different timezone (e.g. their app's deployment region) without
changing their OS clock.
## Fix
- New Timezone submenu in the user-avatar dropdown, sitting next to the
existing Theme picker. Search-as-you-type combobox over the full IANA
catalog plus an Auto detect option.
- Selection persists in localStorage (`supabase-ui-timezone`) and
survives `clearLocalStorage()`. No backend schema change.
- New `lib/datetime.tsx` exposes pure timezone-aware formatters
(`formatDateTime`, `formatDate`, `formatTime`, `formatFromNow`,
`toTimezone`) plus a `TimezoneProvider` and matching React hooks
(`useTimezone`, `useFormatDateTime`, ...). The pure functions take `tz`
explicitly so they're easy to unit test (17 vitest cases covering DST
transitions, multi-tz formatting, unix-micro/Date inputs, invalid-tz
fallback).
- The selected timezone propagates to every existing `<TimestampInfo>`
in Studio via a new `TimestampInfoProvider` context exported from
`ui-patterns`. No per-callsite changes needed for those ~20+ surfaces.
- The `UnifiedLogs` date column migrates off `date-fns` to the new
`useFormatDateTime` hook (the rest of the date-fns callers stay as-is,
since they're either internal range math or non-display).
- `ALL_TIMEZONES` (~600 entries) moves out of `PITR.constants.ts` into a
shared `lib/constants/timezones.ts`. PITR keeps a re-export shim so its
callers don't move. New `TIMEZONES_BY_IANA` dedupes the catalog by
primary IANA name (the original list contains both PDT and PST rows for
`America/Los_Angeles`, etc.) and `findTimezoneByIana` provides reverse
lookup.
- Telemetry: `timezone_picker_clicked` PostHog event with
`previousTimezone`, `nextTimezone`, `isAutoDetected` properties.
Notes for reviewers:
- Bare `dayjs(x).format(...)` calls (~157 files) intentionally still
render in browser-local time. Surfaces opt in by switching to the new
wrappers, so this PR is the abstraction plus logs adoption; broader
migration is a follow-up.
- Two `// prettier-ignore` lines (`apps/studio/pages/_app.tsx`,
`apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.fields.tsx`)
work around a pre-existing local-tooling issue where
`prettier-plugin-sql-cst` strips angle-bracket type arguments under
certain conditions. Project's pinned prettier (3.8.1) does not strip;
the issue surfaces with a globally-installed prettier. Worth tracking
separately.
- Hydration: `guessLocalTimezone()` and `useLocalStorageQuery` are
client-only. Studio is mostly CSR via the Pages Router, but any SSR'd
`<TimestampInfo>` may briefly render in the server's tz before client
hydration. Existing behavior already had this mismatch with `.local()`;
this PR does not regress it.
- Backend timestamps round-tripped through query params and mutations
stay UTC. The picker is display-only.
## How to test
- Run `pnpm dev:studio`, sign in.
- Open the user avatar dropdown (top right). Hover Timezone.
- Search for "tokyo", pick `(UTC+09:00) Osaka, Sapporo, Tokyo`.
- Open any project, navigate to Logs (e.g. `Project > Logs > Edge
Functions`). Hover a log row's timestamp; the popover should show UTC,
the chosen tz (`Asia/Tokyo`), and the relative time. Visible cell text
should be in JST.
- Visit any page that uses `<TimestampInfo>` (Database > Backups,
Project Pause state, Edge Function details). Same tooltip should reflect
Asia/Tokyo.
- Refresh the page; timezone is still Asia/Tokyo.
- Reopen the picker, choose Auto detect; timestamps revert to browser
local.
- Run `pnpm --filter studio test lib/datetime.test.ts`. 17 tests should
pass.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Timezone selector added to the user menu with auto-detect and manual
override
* App-wide timezone provider and hooks plus a shared timezone catalog
for consistent timezone-aware display
* Timestamp components accept an optional timezone prop and respect user
preference (persisted)
* **Bug Fixes / Improvements**
* Logs and timestamp displays now use the new timezone formatting hooks
* **Tests**
* Added comprehensive datetime and timezone catalog tests
* **Telemetry**
* Telemetry event added for timezone picker interactions
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Consolidate Table Editor grid header actions into a single row
https://github.com/user-attachments/assets/1020c385-8fa9-4ef1-b5e7-03983111508b
## Changes involved
- Index advisor, Realtime, and API docs are now behind a dropdown menu
button (Treated as secondary actions)
- Grid header actions shifted into the same row as filter bar (more
space for data grid)
- Header actions will hide while filter bar is in focus (remove
distractions, more space for filter bar)
## Changes to filter bar
- Filter bar will refocus when deleting a filter
- Clicking on the search icon will focus on the free form input of the
filter bar
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a “More” dropdown in grid actions to access Realtime, API docs,
and Index Advisor.
* New dialogs for enabling Index Advisor and toggling Realtime are now
consistently managed.
* **Improvements**
* Improved filter focus handling with auto-refocus when conditions
change and responsive header behavior.
* Adjusted popover alignment, separator visuals,
header/footer/pagination layout and sizing.
* Filter bar now supports programmatic focus; Connect button supports
icon-only mode.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
This PR fixes a bug where a user might choose `classic-dark` as a theme
in `studio` but then `docs` and `marketing` apps will look weird.
To test:
- Change the localStorage value of `theme` to `classic-dark`
- Open `www` and `docs` apps, they should look ok
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a new "classic-dark" theme option for enhanced visual
customization.
* **Improvements**
* Unified and simplified theme handling across apps for more consistent
behavior.
* Improved system-theme detection and smoother transitions when
switching themes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
- closes https://github.com/supabase/supabase/issues/45266
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **Bug Fixes**
* Updated the formatting of MCP URLs in generated Codex setup commands
to include proper quotation marks for correct CLI execution.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Realised that MultiSelector's content is not scrollable when rendered
within a sheet (e.g Auth policies, Database indexes)
### Explanation from Claude:
- The issue is that Radix Dialog (Sheet) adds
@radix-ui/react-remove-scroll which intercepts wheel events. The Popover
portal renders outside the Sheet's DOM tree, so the scroll lock blocks
wheel events on CommandList.
- The fix is to stop wheel event propagation on the CommandList so it
doesn't reach the RemoveScroll handler.
### To test
- [ ] Verify that MultiSelector can be scrollable within a sheet (e.g
Auth policies roles) and outside of a sheet (e.g Data API -> Exposed
schemas)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Fixed scroll wheel propagation in multi-select dropdown to prevent
unintended scrolling of parent elements.
* **Updates**
* Simplified filter component interface by removing an unused
configuration property.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
- Adds Claude.ai and ChatGPT as MCP connectors in the existing
`/guides/getting-started/mcp` dropdown
<img width="1511" height="744" alt="Screenshot 2026-05-04 at 14 53 24"
src="https://github.com/user-attachments/assets/8de5b3a4-56e2-45a7-bcce-1051baac30cd"
/>
- Groups all MCP clients into three categories: **Web Clients**
(Claude.ai, ChatGPT, Goose), **AI Agent CLIs** (Claude Code, Codex,
Gemini CLI, Opencode, Factory), **IDE** (Cursor, VS Code, Antigravity,
Kiro, Windsurf)
<img width="1511" height="744" alt="image"
src="https://github.com/user-attachments/assets/eb3ecdaa-878a-4f87-abfe-41a9144db5b8"
/>
- Both connectors use `generateDeepLink` to render a one-click "Connect"
button linking to the Supabase connector directory entry
- Includes external docs links for each connector
- Sets Claude Code as the default selected client
Closes
[AI-699](https://linear.app/supabase/issue/AI-699/add-claudeai-and-chatgpt-connectors-to-mcp-docs)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added Claude.ai and ChatGPT as selectable client options.
* Reorganized the client selector into categorized groups (AI Agent CLI,
Web Clients, IDE) for easier discovery.
* Improved dropdown rendering and selection behavior for more consistent
visuals and interaction.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
## What kind of change does this PR introduce?
Feature and design-system cleanup. Resolves DEPR-551.
## What is the current behavior?
Admonition supports several overlapping content shapes, but it
previously did not support a first-class success state or
description-only usage cleanly. Title-only usage was also possible,
which made some callouts read like floating headings without body copy.
Docs MDX Admonitions could also pick up prose spacing around rich
children, while the design-system Tailwind config emitted an
ESM/CommonJS warning in the design-system app.
## What is the new behavior?
Adds a `success` Admonition type, description-only support, and a
stricter content contract: `title` or legacy `label` now requires either
`description` or `children`. Existing title-only Studio callsites have
been converted to description-only callouts.
The design-system docs now include examples for description-only and
success Admonitions, plus guidance for `title`, `description`,
`children`, and legacy `label` usage.
This also tightens Admonition body spacing so rich MDX children keep
docs link/code styling without inheriting excessive prose margins, and
renames the design-system Tailwind config to `tailwind.config.cjs` so it
matches its CommonJS syntax.
Warning and destructive alerts now explicitly set `text-foreground`,
preventing nested Admonition titles from inheriting muted
form-description colour after the Tailwind v4 cascade changes.
| Before | After |
| --- | --- |
| <img width="1818" height="388" alt="Image"
src="https://github.com/user-attachments/assets/283a1853-348a-4d74-a408-013957350e5e"
/> | <img width="1380" height="462" alt="Image"
src="https://github.com/user-attachments/assets/e5761e8e-3697-423b-805b-45110205099a"
/> |
| <img width="1398" height="550" alt="CleanShot 2026-04-28 at 15 12
41@2x"
src="https://github.com/user-attachments/assets/982694d9-5461-4362-8bae-a6e2b4c60e8b"
/> | <img width="1402" height="450" alt="CleanShot 2026-04-28 at 15 13
09@2x"
src="https://github.com/user-attachments/assets/0b1257c4-6b58-4c39-a182-4861a9e378ee"
/> |
| <img width="1640" height="716" alt="CleanShot 2026-04-28 at 15 17
25@2x"
src="https://github.com/user-attachments/assets/a5be4d5f-2bf7-4dc2-b396-56129fe64ec9"
/> | <img width="1630" height="716" alt="CleanShot 2026-04-28 at 15 16
00@2x"
src="https://github.com/user-attachments/assets/0d589252-aaf8-4efc-9d81-15ec4f99ec61"
/> |
| Design System Docs |
| --- |
| <img width="1646" height="1864" alt="CleanShot 2026-04-28 at 14 59
15@2x"
src="https://github.com/user-attachments/assets/12d13595-8972-4fb2-a04a-fb916388ebb6"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a "success" admonition variant and new example previews
demonstrating success and description-only usages.
* **Documentation**
* Clarified admonition guidance: when to use title vs description vs
children; added example sections for short callouts and success
messages.
* **Refactor**
* Standardized UI by moving short/advisory text into description across
the app and harmonized trailing punctuation.
* **Style**
* Ensured warning/destructive admonitions use consistent foreground text
styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
As per PR title - saw that there's a `md:min-w-100` on `FlexContainer`
which overrides `md:w-1/2`. Removing the former resolves this
<img width="622" height="188" alt="image"
src="https://github.com/user-attachments/assets/6414d546-7c27-4a3c-9fd9-83da89acc387"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Improved form layout responsiveness on medium-sized screens by
adjusting width constraints for better flexibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
The format of some Tailwind classes changed from `px-[--card-padding-x]`
to `px-(--card-padding-x)`. Because `tailwind-merge` is on a older
version (pre Tailwind v4), it doesn't deduplicate the class when it
encounters
```
px-(--card-padding-x) p-0
```
With the new version, it should result in `p-0`.
By bumping `tailwind-merge` and other `cn` related deps, the `cn` util
function is aware of the new class format.
Before:
<img width="819" height="357" alt="Screenshot 2026-04-30 at 15 27 39"
src="https://github.com/user-attachments/assets/6d16497a-86a6-4a31-bc7c-eab17bb17ab3"
/>
After:
<img width="837" height="389" alt="Screenshot 2026-04-30 at 15 28 04"
src="https://github.com/user-attachments/assets/2b53d7fe-2a61-493a-9aa0-abb34007738f"
/>
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>
## Summary
- Replaces the outdated command palette (`Authentication: Remove Dynamic
Authentication Providers`) troubleshooting step with the new Antigravity
flow: Agent Settings (Cmd+,/Ctrl+,) → Customizations tab → Authenticate
button next to the server.
<img width="1507" height="625" alt="image"
src="https://github.com/user-attachments/assets/b92e9fd2-5bc3-4bf5-a16e-1e241a10b2ec"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Documentation**
* Updated Antigravity UI help text for authentication with clearer
step-by-step guidance to open Agent Settings and use the Authenticate
button for Supabase; included a screenshot showing where the button
appears.
* **Chores**
* Added support for PNG asset imports so image files used in the UI are
recognized and handled correctly.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
## Problem
The current
[multi-select](https://supabase.com/design-system/docs/fragments/multi-select)
does not work inside a dialog. The dropdown list is hidden.
## Solution
Fix it using the `Popover` component which also handle repositioning
above the input when there's not enough space below.
## How to test
- [Demo on
design-system](https://design-system-git-chore-fix-multi-select-supabase.vercel.app/design-system/docs/fragments/multi-select#inside-a-dialog)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **New Features**
* Added a new example demonstrating multi-select usage within a dialog
component with inline search capabilities.
* Enhanced multi-select component with improved stability and
interaction handling.
* **Documentation**
* Added "Inside a dialog" section to multi-select documentation with
usage guidelines for inline search in dialog contexts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
## 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 -->
## Problem
In order to update to react 19, we need to update several dependencies
## Solution
- migrate to the `radix` umbrella package to ease upgrade
- update some dependencies
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Consolidated Radix UI usage to a single unified package across apps
and packages, updated package manifests and workspace catalog entries.
No user-facing behavior, visuals, or public APIs changed.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## Problem
We used to have a `_Shadcn_` suffix for all the shadcn form components
because we also had `formik` form components.
This is not needed anymore.
## Solution
- Remove the suffix
- Update all usages
## 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?
Replaces "stored procedures" with "functions" for everything related to
the Data API.
## Additional context
It's not accurate to call database functions "stored procedures". It may
have been that way before Postgres 11, but now it causes confusion
because PostgREST allows functions and not stored procedures.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Documentation**
* Standardized terminology across docs, SDK guides, CLI/config specs,
examples, UI, and config comments to use "database functions" instead of
"stored procedures".
* Updated API docs, CLI/config descriptions, Studio UI labels, help
text, empty-state and navigation copy, RPC documentation, and example
text for consistency.
* Adjusted explanatory text and error/help messages to reflect the
revised terminology.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We'd like to update react to `19` but many of our dependencies don't
support it.
## Solution
Update those dependencies. This PR focuses on `react-markdown`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Upgraded react-markdown to 10.1.0 (and remark-gfm to 4.0.0) across
projects for improved Markdown support.
* **Style**
* Adjusted Markdown rendering so typography and spacing are applied via
surrounding containers, improving consistent styling across docs and UI.
* **New Content**
* Added a new RSS feed item for a recent blog post.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
The `sb-telemetry-data` cookie and `useTelemetryCookie` hook are fully
superseded by the `_sb_first_referrer` edge cookie (GROWTH-625) and the
in-memory first-touch store (GROWTH-656). GROWTH-656 already removed the
`useTelemetryCookie` call from `PageTelemetry` — this PR cleans up the
rest.
**Changes**
- Delete `useTelemetryCookie.tsx` hook
- Remove `clearTelemetryDataCookie` from `telemetry-utils.ts` (and its
`TELEMETRY_DATA` dep)
- Remove the `clearTelemetryDataCookie` call from `consent.tsx` (the
cookie is never written anymore, so clearing it on deny is a no-op)
- Remove `TELEMETRY_DATA` key from `LOCAL_STORAGE_KEYS`
**Testing**
Verified no remaining references to `useTelemetryCookie`,
`sb-telemetry-data`, `TELEMETRY_DATA`, or `clearTelemetryDataCookie` in
the codebase.
GROWTH-646
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Removed local telemetry data collection and cookie storage
functionality.
* Updated consent handling to remove associated telemetry cookie cleanup
operations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We'd like to update react to `19` but many of our dependencies don't
support it.
## Solution
Update those dependencies. This PR focuses on `react-hook-form`
## How to test
Play with some forms, especially those that use arrays of values
(database/enumerated types for instance) and the highly dynamic ones
(auth providers for instance)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
* **Chores**
* Bumped the form-handling library version across apps and packages for
improved compatibility and stability.
* **Refactor**
* Improved component form typings and generics in the studio to increase
type safety and reduce potential runtime issues.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Upgrade vite and vitest to their latest major versions across the
monorepo, along with related packages.
**Changed:**
- `vite` catalog: `^7.3.2` → `^8.0.8` (Rolldown replaces esbuild/Rollup)
- `vitest` catalog: `^3.2.0` → `^4.1.4`
- `@vitejs/plugin-react`: `^4.3.4` → `^6.0.1`
- `@vitest/coverage-v8`: `^3.2.0` → `^4.1.4`
- `@vitest/ui`: `^3.2.0` → `^4.1.4`
- `vite-tsconfig-paths`: `^4.3.2` / `^5.1.4` → `^6.1.1`
**Pinned to vite 7:**
- `apps/lite-studio` — `@react-router/dev` hasn't declared vite 8
support yet
- `blocks/vue` — Nuxt plugins (`vite-plugin-inspect`, `vite-dev-rpc`,
`vite-hot-client`, `vite-plugin-vue-tracer`) haven't declared vite 8
support yet
**Test fixes for vitest 4 breaking changes:**
- **`apps/studio/lib/api/snippets.utils.test.ts`** — Replaced
`vi.mock('fs/promises')` automock with an explicit factory. Vitest 4's
automocking doesn't create mock functions for getter-based exports on
Node built-ins, so `mockedFS.access.mockResolvedValue` etc. were
`undefined`.
- **`apps/studio/lib/api/self-hosted/functions/index.test.ts`** —
Changed `mockReturnValue` to `mockImplementation(function() { ... })`
for a constructor mock. Vitest 4 no longer allows `mockReturnValue` when
the mock is called with `new`.
- **`apps/studio/tests/pages/api/mcp/index.test.ts`** — Changed arrow
function to regular `function` in `mockImplementation` for
`StreamableHTTPServerTransport`. Arrow functions can't be constructors,
and vitest 4 now enforces this.
- **`packages/ui-patterns/vitest.setup.ts`** — Changed `ResizeObserver`
mock from arrow function to regular `function` for the same constructor
enforcement reason. This was crashing Radix popover rendering in jsdom.
## To test
- `pnpm test:studio` — all 226 test files should pass
- `pnpm --filter ui-patterns vitest run` — all 183 tests should pass
- `pnpm --filter www test -- --run` — all 19 tests should pass
- `pnpm --filter ui vitest run` — all tests should pass
- `pnpm --filter dev-tools vitest run` — all tests should pass
- `pnpm --filter ai-commands vitest run` — all tests should pass
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Standardized and updated development tooling versions and version
sources for consistent installs across the repo (Vite, Vitest,
vite-tsconfig-paths and related plugins/catalog entries).
* **Tests**
* Improved test mocks and typings (updated mock
factories/implementations and tightened spy/type assertions) to increase
test reliability and compatibility with updated tooling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
## Problem
We'd like to update react to `19` but many of our dependencies don't
support it.
## Solution
Update those dependencies. This PR focuses on `framer-motion`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Updated animation library dependencies to the latest compatible
versions across applications and packages to ensure consistent
performance and stability.
<!-- 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?
Text was clipping on our filter pills around text input area.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Improved responsive font sizing in filter bar inputs for better visual
presentation across different screen sizes.
<!-- 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?
A simple way to allow for opening doc search results in a new tab
<img width="530" height="542" alt="image"
src="https://github.com/user-attachments/assets/d2a3b420-ec61-4b94-a94b-b3f2bc160f7b"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Documentation search now respects Ctrl/Cmd-click to open links in a
new tab.
* Documentation, reference, and troubleshooting pages open in-app or in
a new tab depending on modifier key; same-tab navigation closes the
search menu, new-tab does not.
* Integration and external discussion links follow the same modifier-key
behavior; the search menu only closes for same-tab navigation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Bug fix. Resolves FE-2959.
## What is the current behaviour?
Grouped inputs strip the inner control border with `border-0`, while the
outer `InputGroup` is responsible for the visible outline. After #44703,
grouped form inputs now receive the correct validation attributes, but
the primitive still removes the inner border dimensions entirely. That
keeps the visual layer brittle and can lead to inconsistent error
rendering, especially in light mode where the grouped password field
does not match the Project name input.
The shared `ui-patterns` input wrapper also inherits the generic
`inline-end` button spacing from `InputGroupAddon`, which pushes the
password copy button slightly too far to the right.
## What is the new behaviour?
The shared grouped-input primitive now keeps a transparent inner border
instead of removing border widths entirely. The outer `InputGroup`
continues to own the visible border, focus ring and error treatment, but
the inner control now has stable border metrics and no redundant
dark-mode background override.
The grouped invalid state now also matches the plain input treatment
more closely:
- unfocused error border uses `destructive-400`
- focused error border uses `destructive`
- error background uses `destructive-200`
The `ui-patterns` input wrapper now overrides the inherited `inline-end`
negative margin for its own copy/reveal button addon, so the password
copy button sits in the right place without changing spacing for other
direct `InputGroup` consumers.
| Before | After |
| --- | --- |
| <img width="1338" height="284" alt="CleanShot 2026-04-09 at 13 43
50@2x-91489355-5EEA-4884-BAA2-B93B28F1D7CB"
src="https://github.com/user-attachments/assets/ed40683b-8a87-4deb-8a0f-f892d00894f0"
/>| <img width="1334" height="278" alt="CleanShot 2026-04-09 at 13 41
36@2x-5D7E930B-EDB2-4002-9367-34ACE2DF4DB4"
src="https://github.com/user-attachments/assets/7d9594a4-9988-480e-a809-9f5ed29e8e24"
/> |
| <img width="1336" height="210" alt="CleanShot 2026-04-09 at 14 06
15@2x-05379F74-4CA5-4E6E-9250-CBA2764C1318"
src="https://github.com/user-attachments/assets/25e48cd4-de0a-47f3-9022-d7a3829a0626"
/> | <img width="1334" height="210" alt="CleanShot 2026-04-09 at 14 12
11@2x-11FBC519-D398-4A59-971A-97FBFEF610DE"
src="https://github.com/user-attachments/assets/91c3710c-7773-4286-854d-7b7144db85ab"
/> |
An easy place to test this is the Database password field in the New
Project creation flow. See also the Minimum password length field in
Email (Sign In / Providers).
## Summary
- update `packages/ui/src/components/shadcn/ui/input-group.tsx`
- replace `border-0` on grouped inputs/textareas with transparent
borders
- remove the redundant `dark:bg-transparent`
- keep the inner grouped controls visually neutral so the outer group
owns the rendered border state
- align grouped invalid border and background styling with the plain
input treatment
- update `packages/ui-patterns/src/DataInputs/Input.tsx` so copy/reveal
buttons do not inherit the extra right pull intended for other
`inline-end` addons
