## Problem
We have lots of duplicated/deprecated components.
## Solution
- Migrate to new ones
- Fix invalid HTML
## Screenshots
Before (translate the hovered card up, first item in the screenshot):
<img width="2842" height="1178" alt="image"
src="https://github.com/user-attachments/assets/298b51ba-2f4e-4caa-888e-d0de7b22eb7f"
/>
After (same as the features page):
<img width="2824" height="954" alt="image"
src="https://github.com/user-attachments/assets/b34637a7-ed6f-4997-8bb1-a133d4a736ac"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Updated the Company page layout with modernized UI components and
simplified markup structure for improved clarity and consistency across
the Team, Investors, and Press sections.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
Two visual regressions surfaced after the Tailwind v4 migration
(#45318):
1. The Postgres upgrade-failed banner used the deprecated `Alert`
component, whose `warning` variant relies on custom `amber-1100` /
`amber-1200` color tokens that no longer resolve. The title rendered as
near-white on the yellow background.
2. The sonner toast close button forced `bg-transparent!
hover:bg-transparent!`, letting the library's default translucent circle
bleed through against the toast's overlay background on hover.
## Fix
- Migrate `ProjectUpgradeFailedBanner` to `Admonition` (the recommended
replacement per the deprecation note on `Alert`), which uses semantic
`warning-*` tokens defined in the theme.
- Drop the transparent-bg overrides on the sonner close button and give
it a proper `hover:bg-surface-200` with a fixed `size-6` hit area so the
X has a clean hover target.
## Before
<img width="2940" height="338" alt="image"
src="https://github.com/user-attachments/assets/2cf2cf52-cdf2-429d-b50c-5dc4e5b9c84b"
/>
## After
<img width="1642" height="506" alt="CleanShot 2026-05-06 at 11 14 03@2x"
src="https://github.com/user-attachments/assets/b6c9b3e2-9d3e-437d-92a6-95d12730e842"
/>
## Testing
- [ ] Trigger a failed Postgres upgrade state and confirm the banner
title/description/actions are all readable on the amber background.
- [ ] Fire a toast and hover the close button — the hover should show a
subtle square background, not a translucent circle.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fix**
* Project upgrade failure banner now only appears when an upgrade has
failed and no longer supports dismissing.
* **Style**
* Replaced the warning banner UI with a streamlined admonition that
shows only a “Contact support” action.
* Improved toast close-button styling for clearer sizing, color, and
interaction states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
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 -->
## What kind of change does this PR introduce?
UI polish. Updates sidebar and submenu navigation hover and active
styling.
## What is the current behavior?
Product submenu navigation items either lack a hover fill or use a hover
fill that visually matches the active state. Adjacent hovered and
selected rows can appear to touch.
## What is the new behavior?
Primary sidebar buttons, sidebar sub-buttons, and product submenu pills
now share a muted hover fill while preserving the full accent fill for
active/selected states. Product submenu rows also get a small visual gap
with slightly reduced vertical padding to keep the overall spacing
compact.
| After |
| --- |
| <img width="988" height="408" alt="CleanShot 2026-05-05 at 11 53
05@2x"
src="https://github.com/user-attachments/assets/560ac8a5-1262-41af-a196-618c86580150"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Refined sidebar hover/active states with subtle accent alpha colors
for a more polished visual experience.
* Updated sidebar menu spacing and rounded corners for improved touch
and visual clarity.
* **UI Improvements**
* Sidebar now only displays when sections exist and uses a streamlined
submenu flow for more consistent, predictable navigation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## Problem
When migrating to tailwind v4, we introduced a regression on table
styles when hovering a row:
<img width="1190" height="131" alt="image"
src="https://github.com/user-attachments/assets/b84b8968-fa23-42bd-ad84-091fe7ff8d73"
/>
## Solution
Fix the styles:
<img width="1200" height="126" alt="image"
src="https://github.com/user-attachments/assets/df99d215-4fcb-4437-804d-0fc784cd8aaf"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Enhanced table row and cell styling to improve hover effects and
selection state visual feedback, providing clearer and more consistent
interactions when working with tabular data.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
Adds the `O→S` / `Shift+F` / `Shift+N` / `F→C` shortcut set across every
Database listing page, on top of the schema-visualizer pattern from
#45386. Fixes [FE-3131](https://linear.app/supabase/issue/FE-3131).
A shared `list-page.*` registry replaces what would have been a per-page
registry file for each route, and `useShortcut`/`Shortcut` gain a
`label` override so a single ID renders contextually in Cmd+K and hover
tooltips.
## Pages and shortcuts
| Page | `O→S` | `Shift+F` | `Shift+N` | `F→C` |
| --- | --- | --- | --- | --- |
| Tables | Open schema selector | Search tables | Create new table |
Clears search + entity-type filter |
| Functions | Open schema selector | Search functions | Create new
function | Clears search + Return Type + Security |
| Triggers — data | Open schema selector | Search triggers | Create new
trigger | Clears search + Table filter |
| Triggers — event | — | Search event triggers | Create new event
trigger | Clears search + Owner filter |
| Enumerated Types | Open schema selector | Search enumerated types |
Create new enumerated type | Clears search |
| Indexes | Open schema selector | Search indexes | Create new index |
Clears search |
| Roles | — | Search roles | Add new role | Clears search + filter type
→ 'all' |
| Publications | — | Search publications | — | Clears search |
| Extensions | — | Search extensions | — | Clears search |
`Shift+N` only fires when the page-specific gate allows it (permission +
unlocked schema + any other prerequisite like `hasTables` for triggers).
## Test plan
- [ ] On each of the 9 pages, all four shortcuts behave as listed in the
table above
- [ ] Hover the wrapped controls — tooltip shows the page-specific label
and the right keybind badge
- [ ] Open the schema selector via `O→S` — the hover tooltip is
suppressed while the popover is open
- [ ] `Shift+N` is a no-op on locked schemas / when permission is
missing / when a prereq fails (e.g. no tables on Triggers data)
- [ ] `Shift+F` focuses the search input; while focused, Escape clears
(with text) → Escape blurs (when empty)
- [ ] `Cmd+K` shows the page-specific shortcut name while on each page;
the entry goes away on navigation
- [ ] `Mod+/` reference sheet shows one "List pages" group with 4
generic entries
- [ ] No regression to existing schema-visualizer / table-editor /
SQL-editor shortcut behavior
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a dedicated list-page shortcut group in the shortcuts reference.
* **Improvements**
* Keyboard shortcuts across database list pages: focus & select search,
reset filters, and create-new-item shortcuts.
* Escape now clears/searches or blurs inputs to avoid accidental popover
closes.
* Create/new buttons respond to shortcuts when allowed; disabled actions
keep permission tooltips for clarity.
<!-- 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?
Bug fix.
## What is the current behavior?
- Safari Table Editor cells fail to copy from a focused cell with `⌘C`.
- Safari right-click can show the browser menu instead of the custom
cell menu.
- Copy can leave RDG's copied-cell fill behind.
## What is the new behavior?
- Reuses the existing shared `copyToClipboard(value, onSuccess)`
pattern, with the Safari clipboard fix inside that util.
- Handles selected-cell `⌘C` in the RDG keydown path, preventing
browser/RDG defaults and showing the success toast only after copy.
- Replaces the row-level synthetic context-menu shim with RDG's
`onCellContextMenu`, so we prevent Safari's browser menu at the source
and select/focus the target cell.
- Keeps the selected-cell outline while the controlled menu is open.
## Additional context
- `RowRenderer` was only supporting the old context-menu shim; removing
it is part of moving to RDG's cell event path.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **New Features**
* Context menu now provides feedback with toast notifications when
copying cells or rows.
* Selected cells retain their visual styling when context menu is open.
* **Bug Fixes**
* Improved keyboard shortcut handling for copy functionality.
* Enhanced clipboard error handling with user-friendly error messages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ali Waseem <waseema393@gmail.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 -->
## What kind of change does this PR introduce?
Feature improvement to the Studio keyboard shortcuts reference and
command palette behaviour.
## What is the current behavior?
The keyboard shortcuts sheet does not support filtering, some shortcut
labels are harder to scan at a glance, and the command palette shows
"Show all keyboard shortcuts" before the more contextual shortcuts in
the `Shortcuts` section.
## What is the new behavior?
Adds live filtering to the keyboard shortcuts sheet, keeps the sheet
width stable on small breakpoints, renders arrow-based shortcuts more
compactly, and moves "Show all keyboard shortcuts" to the end of the
`Shortcuts` section so contextual actions appear first.
https://github.com/user-attachments/assets/315a1a36-0cfb-4a0d-b6de-ef3c86aa9a05
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added search for keyboard shortcuts with live filtering, group-aware
results, clear-search action, and empty-state handling
* Added arrow key symbols for clearer shortcut visuals
* **Improvements**
* Updated shortcut visuals and typography for a tighter, pill-style
presentation
* Improved command menu ordering so shortcut-related entries appear in a
logical sequence
* **Tests**
* Added tests covering shortcut search behavior, display formatting, and
platform-specific key rendering
<!-- 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>
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 want to reduce the code we ship and maintain.
## Solution
Migrate old `<Checkbox />` usage to the new Shadcn component.
There's one visual change: no more green background or outline.
## Screenshots
### On `apps/www`
Before:
<img width="1095" height="772" alt="image"
src="https://github.com/user-attachments/assets/b14a0477-d8ac-4ae5-a1c3-63657609e4e5"
/>
After:
<img width="1085" height="766" alt="image"
src="https://github.com/user-attachments/assets/f4c2156c-38e1-4834-b013-e39b8c3dd76e"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Unified checkbox appearance and behavior across the app for consistent
toggles, labels, and interactions.
* **Bug Fixes**
* Fixed selection issues including shift-select edge cases and
click-propagation in lists; added ARIA labels for improved
accessibility.
* **Chores**
* Removed legacy checkbox implementation, associated styles, tests, and
deprecated theme entries.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The AI icon in the new filter bar renders but no longer animates when an
AI filter is generating. This regressed after #44906 upgraded
`framer-motion` from `^11.0.3` to `^11.18.2`.
## Cause
The outer rotation transition in `AiIconAnimation` mixed tween props
(`duration`, `ease`) with spring physics (`type: 'spring'`, `stiffness`,
`damping`):
```tsx
transition={{
duration: 2,
repeat: loading ? Infinity : 0,
ease: 'circInOut',
type: 'spring',
stiffness: 60,
damping: 10,
}}
```
`framer-motion@11.0.3` tolerated this combination and produced a
continuous rotation. `11.18.x` resolves it strictly as a physics spring
— `duration`/`ease` are dropped, the spring settles at 360°, and
`repeat: Infinity` no longer produces a visible continuous spin. The
icon ends up looking static.
## Fix
Drop the spring config and keep a simple linear repeating tween — the
original intent was a continuous rotation loader, not a bouncy settle.
## Test plan
- [x] Open a table in the Table Editor, type an AI prompt into the
filter bar, submit it, and confirm the icon rotates continuously while
the mutation is pending.
- [x] Confirm the inner circle's scale pulse is still present and
synced.
- [x] Confirm no regressions in other usages of `AiIconAnimation` (e.g.
AI Assistant).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Refined AI icon animation: continuous rotation during loading, subtle
pulsing (scale) while loading, and enhanced hover interactions with
gentle rotation and scale.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.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
# Changes
## Removed unused themes
- Deleted `concept-two.css` (unused) and `dark-combined.css` which was
identical to `dark.css`
- Removed the alias `deep-dark` to `dark` theme since it was unused
## Removed Figma token transform scripts
- Deleted the entire `internals/transform/` directory (~700 lines of JS)
— these scripts transformed Figma tokens into Tailwind variables but are
no longer needed
- Deleted `internals/tokens/cleanse-css-for-tailwind.js` and
`extract-design-tokens.js`
- Removed related dependencies from `package.json`
## Removed other unused files
- Deleted `shadcn.css` (unused)
- Deleted `tailwind-theming.md` (outdated doc),
https://supabase.com/design-system/docs/color-usage is a better resource
## Refactoring
- Extracted the `motion-safe-transition` Tailwind plugin into its own
file (`packages/config/tailwind-plugins/motion-safe-transition.js`)
- Renamed the tailwind class generation script for clarity
- Added stub `tailwind.config.js` files in packages that were missing
them, so VSCode IntelliSense works in those workspaces
- Updated `packages/ui/README.md` to reflect current usage patterns
(imports, styling conventions) instead of outdated Figma tokens workflow
# Testing
- Check all apps whether they have the correct themes with the correct
colors
[Linear
task](https://linear.app/supabase/issue/FE-3059/clean-up-unused-ui-build-artifacts-themes-and-figma-token-scripts)
## Summary
- Adds `<Shortcut>` component: binds a registered shortcut + renders a
Linear-style hover tooltip (label + keybind pills) in one declaration
- Adds `<ShortcutTooltip>` as the lower-level primitive for cases where
binding lives elsewhere
- Registers 13 G-chord navigation shortcuts (`G H` / `G T` / `G S` / `G
D` / `G A` / `G B` / `G F` / `G R` / `G V` / `G O` / `G L` / `G I` / `G
,`)
- Wires shortcuts into `SideBarNavLink` — binding + dynamic-delay
tooltip (0ms collapsed, 1000ms expanded) replaces the old label-only
collapsed tooltip
Closes
[FE-3048](https://linear.app/supabase/issue/FE-3048/create-navigation-shortcuts).
## Test plan
- [x] Hover each main sidebar nav item with sidebar expanded — tooltip
appears after delay with label + shortcut pills
- [x] Collapse sidebar — tooltip appears instantly on hover
- [x] Press `G` then a registered letter anywhere outside text inputs —
navigates to that screen
- [x] Press `G` inside a text input — no navigation fires
- [x] Disabled nav items (project inactive) — no shortcut fires, no
tooltip anomaly
- [x] Feature-gated routes (auth/storage/realtime off) — shortcut is
gone with the route
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Global keyboard shortcuts added for navigating major app sections
(home, editors, database, auth, storage, functions, realtime, advisors,
observability, logs, integrations, settings).
* Navigation items display their keybinds in hover tooltips and can be
triggered via those shortcuts.
* Tooltip timing adapts to sidebar state (immediate when collapsed,
delayed when expanded).
* Shortcut-aware tooltip display now shows multi-step key sequences
clearly.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
Similar to #45064, switch fields aren't accessible with tab on Safari.
Example:
- Open
https://studio-staging-git-gildasgarcia-fe-2998-suggest-e7fb9e-supabase.vercel.app
- Create a new project
- Move through fields with tab, note that you can't focus _High
Availability_
## Solution
- Add a `tabindex="0"` on `<Switch>`
- Add a `tabindex="0"` on `<Toggle>` (was a mistake as we don't actually
use it yet but it will be needed when we do)
## How to test
- Open the staging
- Create a new project
- Move through fields with tab, note that you can focus _High
Availability_
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Switch and Toggle controls now correctly participate in keyboard tab
order, improving focusability and keyboard navigation for accessibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
`select` fields aren't accessible with tab on Safari.
This is a known issue on Safari that can be solved by users if they
adjust their settings:
<img width="820" height="210" alt="image"
src="https://github.com/user-attachments/assets/6f26dd0e-487f-4a36-ad5f-bb20ef7b2029"
/>
## Solution
We can simply add a `tabindex` attribute on the Shadcn `<SelectTrigger>`
to fix it.
## How to test
- Create a new org. Tab on the form. It should highlight each field,
including the _Type_ and _Plan_ select.
- Edit your _Account preferences_. You should be able to tab to the
_Primary email_ field
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Enhanced keyboard navigation support for select components by
improving focus handling.
<!-- 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 -->
Remove `@headlessui/react` as a direct dependency from both
`apps/studio` and `packages/ui`. It's incompatible with React 19 (at the
pinned v1 version) and overlaps with our existing Radix/shadcn
primitives.
The only usage was the `<Transition>` component in 3 files + a dead
`Overlay` component in `packages/ui`.
**Removed:**
- `@headlessui/react` from `apps/studio/package.json` and
`packages/ui/package.json`
- Dead `packages/ui/src/lib/Overlay/` directory (not exported or
imported anywhere)
**Changed:**
- `ChooseFunctionForm.tsx` — replaced `Transition` with a shadcn
`Accordion` for the "View definition" toggle
- `FileExplorerColumn.tsx` — replaced `Transition` with `framer-motion`
`AnimatePresence` for drag-over overlay
- `PreviewPane.tsx` — removed `Transition` wrapper entirely (wasn't
visually animating on prod), replaced with simple conditional render
Note: `@headlessui/react` will remain in `pnpm-lock.yaml` as a
transitive dependency of `@graphiql/react` and
`@graphiql/plugin-doc-explorer` — that's expected and not something we
control.
## To test
- **Triggers page** (`/dashboard/project/_/database/triggers`): Create
or edit a trigger, click "Choose a function" to open the side panel.
Click "View definition" on a function row — the SQL definition should
expand/collapse with a smooth height animation. Clicking the row itself
should still select the function.
- **Storage explorer**
(`/dashboard/project/_/storage/buckets/<bucket>`): Navigate into a
folder, drag a file over the column — the drag overlay should fade
in/out smoothly.
- **Storage file preview**
(`/dashboard/project/_/storage/buckets/<bucket>`): Click on a file — the
preview pane should appear on the right (no animation, same as current
prod behaviour).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Replaced several transition wrappers with new animation/mounting
behavior for overlays, preview panes, and drag-over UI to improve
consistency and responsiveness.
* Swapped the function-definition toggle for an Accordion and updated
click handling to prevent accidental row selection.
* Removed the legacy overlay component, its context, and associated
overlay styling.
* **Chores**
* Removed HeadlessUI dependency from project packages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
## Problem
Now that all forms have been migrated to `react-hook-form`, we can
remove `formik` as well as some unused deprecated components
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Removed formik dependency from the UI package.
* Removed Form and InputNumber components and their public re-exports.
* Removed FormContext and the form hook exports.
* Simplified multiple components (Input, Checkbox, Radio, Select,
Toggle, Listbox) by removing form-context integration.
* Removed InputNumber styling and theme configuration.
<!-- 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
## Problem
The input groups components introduced in #44282 don't have the
validation attributes when invalid. This hurts accessibility and also
break the design:
<img width="1730" height="324" alt="image"
src="https://github.com/user-attachments/assets/a3fb8d86-f3a8-46bb-aa53-d0599c11f056"
/>
## Solution
This is because the wrapper `<FormControl_Shadcn_>` passes the
validation props to its direct child.
The solution is to avoid applying them on the `<InputGroup>` and to
apply them manually on the inputs.
I also fixed a small accessibility issue by moving the addon texts after
the input so that screen readers announce them in the correct order. No
visual change for this
<img width="587" height="158" alt="image"
src="https://github.com/user-attachments/assets/1f8858ea-6659-45f9-964e-8c43a7fe14ba"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Unified numeric input layout by moving unit labels/suffixes (e.g.,
"seconds", "GB", "%", "connections", "digits", "IOPS", "MB/s", "rows")
to appear after their inputs for a consistent, predictable form
appearance.
* **Accessibility**
* Form controls now expose IDs and ARIA attributes from form context
when available, improving screen-reader descriptions and error
association.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## What kind of change does this PR introduce?
Chore / UI consistency fix. Resolves DEPR-418.
## What is the current behavior?
Shortcut hints are still hand-built in several high-traffic Studio
surfaces, which leads to inconsistent rendering and stale
platform-specific markup. Buttons in particular can end up with awkward
spacing and baseline alignment when shortcut labels are inserted
directly into the button text.
## What is the new behavior?
This PR standardises those shortcut hints around `KeyboardShortcut` and
updates the surrounding layout primitives to support that approach more
cleanly.
It includes:
- Design docs
- using `KeyboardShortcut` in the table side-panel `ActionBar`
- replacing hardcoded operation queue button shortcuts in
`OperationQueueSidePanel`
- standardising the command menu trigger shortcut chip and updating the
`LayoutHeader` overrides to match the new DOM shape
- replacing the AI editor empty-state `Cmd/Ctrl + K` hint with
`KeyboardShortcut`
- refining shared shortcut/button primitives so inline shortcuts align
better when used as button accessories
- keeping the SQL utility shortcut work on this branch consistent with
the same shared component approach
| Before | After |
| --- | --- |
| <img width="1454" height="902" alt="CleanShot 2026-03-27 at 15 55
32@2x"
src="https://github.com/user-attachments/assets/3a8de192-3f4c-480b-9d26-9b28becd0ee3"
/> | <img width="1488" height="906" alt="CleanShot 2026-03-27 at 15 29
31@2x-63A17C58-D023-4D3A-9355-6C40A6485328"
src="https://github.com/user-attachments/assets/46ef7f7a-2b8b-4c10-8935-84ca5ad44562"
/> |
| <img width="738" height="328" alt="CleanShot 2026-03-27 at 15 57
07@2x"
src="https://github.com/user-attachments/assets/ad459c41-867d-42f9-a8cb-c936af8326b7"
/> | <img width="726" height="290" alt="CleanShot 2026-03-27 at 15 56
29@2x-ECE4E10F-9693-4ED8-B085-DC436A839F52"
src="https://github.com/user-attachments/assets/95b4bfb4-ec34-4080-8b69-211b5045ca26"
/> |
## Later todo
- [ ] Replace the string-based SQL editor placeholder shortcut in
`SQLEditor` once that placeholder API supports rich content
- [ ] Refactor `CommandOption` to use `KeyboardShortcut` instead of
bespoke platform detection and command-key markup
- [ ] Standardise the remaining DataTable shortcut hints
(`DataTableToolbar`, `DataTableResetButton`, `DataTableFilterCommand`,
`DataTableFilterControlsDrawer`) around `KeyboardShortcut`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Introduced a new KeyboardShortcut component for displaying keyboard
shortcuts with two visual variants (pill and inline).
* Standardized keyboard shortcut indicators across the application
interface for consistent user experience.
* **Bug Fixes**
* Fixed capitalization inconsistencies in button labels and hotkey
settings.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<img width="1575" height="1134" alt="image"
src="https://github.com/user-attachments/assets/994b1113-717f-44a2-89a4-13bc0182db20"
/>
Attempts to improve our edge function overview pages to provide stronger
insights into the health of a function, including reliability (error
rates), performance (execution times) and usage (cpu and memory).
As part of this work it refactors existing charts to use our new chart
components.
main consideration is the collective performance of error queries
https://github.com/supabase/supabase/pull/44009/changes#diff-2a79cf61c5397a8ef363c333229fa7729a2efc90a4d8e0806e49c212d5aa97e7
## To test:
1. Create an edge function that errors out randomly across requests. You
can use cron to poll this function every second.
2. View the edge function and on the overview page confirm that errors
are showing and grouped correctly in recent failed invocations sections.
---------
Co-authored-by: Ali Waseem <waseema393@gmail.com>
- Add "[Feature Catalog](https://supabase.com/features)" to Product
above Pricing
- Add a section called "Community" underneath the "Developers" section
and move/add the following into it:
- [Events & Webinars](https://supabase.com/events)
- SupaSquad
- Contributing
- Open Source
- DevTo
- Move "Careers" to Company, above "General Availability"
- Add a sign-up for newsletter field. This will enable people to sign up
for our newsletter without having to sign up for the product. (good for
self-hosted and open-source users)
| Before | After |
|--------|--------|
| <img width="1468" height="525" alt="Screenshot 2026-03-13 at 16 40 47"
src="https://github.com/user-attachments/assets/be17cfdb-2523-4602-a3ba-a3b3041c62a4"
/> | <img width="1523" height="605" alt="Screenshot 2026-03-13 at 16 40
33"
src="https://github.com/user-attachments/assets/dd3707fd-cf2c-40d4-ad77-60d6a1f0aaf5"
/> |
## Problem
#44282 introduced a change in design for inputs used outside a form
layout such as search inputs on the project list page
## Solution
Fix padding and spacing
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`.
## Context
Edge functions code editor which uses the FileExplorerAndEditor
component doesn't resize when the viewport shrinks
This PR fixes that + also refactors the FileExplorerAndEditor a bit to
resolve the lint issue with `nodeRenderer` by refactoring the prop into
a renderer that uses `useCallback`
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>
Update reference rendering files to support additional values in tsdoc.
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Gildas Garcia