## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## What kind of change does this PR introduce?
Feature, bug fix, and docs update. Addresses the AlertDialog async
action behaviour discussed in Slack and follow-up PR feedback.
## What is the current behavior?
`AlertDialogAction` delegates directly to Radix, so confirm actions
close the dialog immediately on click. Async mutation flows have to use
`asChild` with `event.preventDefault()` and a custom loading button to
keep the dialog open while work is in flight.
## What is the new behavior?
- `AlertDialogAction` now accepts async handlers and a controlled
`loading` prop. Promise-returning actions keep the dialog open, show the
existing Button loading state, disable cancel/dismissal while pending,
close on success, and stay open on rejection.
- Existing workaround usages in Studio have been migrated to the direct
action API (see 'To test' callsite list below)
- design-system docs now include async action examples and
`AlertDialogBody` guidance for inline feedback
https://github.com/user-attachments/assets/1af66410-e9f9-4231-9c6d-fe650bd717a4
## Additional context
- [ ] Once #45572 is rebased onto this change, `ResetTemplateDialog`
should use `AlertDialogAction loading={isResettingTemplate}` with a
promise-returning reset handler instead of a plain loading `Button` in
`AlertDialogFooter`.
## To test
- [x] On Studio API Keys settings, use a project with no publishable or
secret API keys, click the “Create API keys” banner action, and confirm
the Alert Dialog stays open with loading until the default publishable
and secret keys are created.
- [x] Delete a JIT database access rule and confirm the Alert Dialog
stays open with loading until deletion succeeds, and stays open with
inline feedback if it fails.
- [x] With temporary access disabled and existing rules configured,
enable temporary access and confirm the “This will activate existing
rules” Alert Dialog stays open with loading until the configuration
update succeeds, and stays open with inline feedback if it fails.
- [x] Disable external replication and confirm the Alert Dialog stays
open with loading until the mutation succeeds.
- [x] Enable Index Advisor and confirm the Alert Dialog stays open with
loading until the mutation succeeds, and stays open with inline feedback
if it fails.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Alert dialogs support async actions with built-in loading, dismissal
blocking while pending, and preserved dialog on error.
* Two interactive examples demonstrating async success and error flows.
* **Improvements**
* Dialogs now surface inline error messages and consistent
loading/confirm behavior across flows (create keys, replication, JIT DB
access, index advisor).
* Minor UI refinements for action controls.
* **Documentation**
* Docs updated with async-action guidance and inline-error
recommendations.
* **Tests**
* New test suite validating async dialog behaviors.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45960)
<!-- 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 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 -->
## 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 whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
## Problem
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
## 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 -->
## What kind of change does this PR introduce?
Component update.
## What is the current behaviour?
TanStack tables in the repo are split between the shared `TableHeadSort`
primitive and the older Studio-local `DataTableColumnHeader` helper,
which makes the sorting UI and integration path inconsistent.
If you were to just use `DataTableColumnHeader` in `ui-patterns/Table`,
you’d get a very different visual result to the `TableHeadSort` UI you
see in most other tables.
## What is the new behaviour?
Adds a shared `TanStackTableHeadSort` adapter in `ui-patterns/Table`,
backed by the existing `TableHeadSort` primitive, and switches the
webhook table plus the design-system TanStack demo to that canonical
path. `DataTableColumnHeader` stays as a deprecated wrapper for now,
Studio gets a lint guard to block new imports of it, and the table docs
now point TanStack tables at the shared adapter explicitly.
## To test
Check out column sorting on the Platform Webhook endpoint deliveries
table.
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>
## What kind of change does this PR introduce?
Feature
## What is the current behavior?
- Platform webhooks have a ‘tap target on tap target’ pattern with
`DropdownMenu` being on top of a clickable `TableRow`
- Misclicks are common (at least for me)
- @jordienr recently added the `hit-area` Tailwind plugin that helps
with misclicks
- https://github.com/supabase/supabase/pull/43636
## What is the new behavior?
- The aforementioned `DropdownMenu` in platform webhooks now uses
`hit-area` to avoid misclicks
- Design system documentation
- Extracted `hit-area` Tailwind plugin to shared packages so it can be
used in design-system as well as studio
## Preview
https://github.com/user-attachments/assets/89f9110a-6c99-4eed-a386-a6f646b1f4f6
## What kind of change does this PR introduce?
UX consistency improvement. Updates DEPR-355.
## What is the current behavior?
Discard-confirm close behavioir is implemented inconsistently across
Studio forms:
- some sheets/dialogs used `useConfirmOnClose`
- some duplicated local `CloseConfirmationModal` components
- some (e.g. `CreateHookSheet`) closed unconditionally and could lose
unsaved changes
## What is the new behavior?
Extracts and validates a reusable discard-close pattern for
dialogs/sheets
- enhances `useConfirmOnClose` with `handleOpenChange(open)` for
`Dialog`/`Sheet` `onOpenChange`
- adds shared `DiscardChangesConfirmationDialog` (`AlertDialog`-based,
override-able copy)
- migrates:
- `InviteMemberButton`
- `CreateHookSheet`
- `EditSecretSheet`
This standardizes close-guard behavior for
backdrop/escape/close-button/cancel-button flows without trying to block
route changes or arbitrary unmounts.
## Additional context
`CreateHookSheet` now also marks the generated secret action as dirty
(`setValue(..., { shouldDirty: true })`) so the discard guard behaves
correctly.
- Added tests for `useConfirmOnClose` covering:
- clean vs dirty close
- handleOpenChange(true|false)
- confirm/cancel behavior
- latest callback ref behavior
A follow-up PR is needed to migrate remaining duplicated
`CloseConfirmationModal` usages and older `useConfirmOnClose` call sites
to the shared `DiscardChangesConfirmationDialog` + `handleOpenChange`
pattern.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## What kind of change does this PR introduce?
UI improvement
## What is the current behavior?
The session expired dialog is quite hard to parse when, for most people,
the ask is simple.
## What is the new behavior?
Improved session expired dialog:
- Refactored to use AlertDialog
- Clarified copywriting
- Uses the new AlertCollapsible to hide all the complicated debugging
steps under a toggle
- This component is documented in the design-system
| Before | After |
| --- | --- |
| <img width="1024" height="563"
alt="Supabase-B1728A05-DDD2-4A50-AED4-D62EAA2E7D7C"
src="https://github.com/user-attachments/assets/771f85d8-21ea-42b5-99f5-b9b05f5617dd"
/> | <img width="1024" height="563" alt="Storage Supabase"
src="https://github.com/user-attachments/assets/b2fcab68-fb29-4cb9-bd42-aecc57b9fa32"
/> |
| <img width="1024" height="563"
alt="Supabase-B1728A05-DDD2-4A50-AED4-D62EAA2E7D7C"
src="https://github.com/user-attachments/assets/771f85d8-21ea-42b5-99f5-b9b05f5617dd"
/> | <img width="1024" height="563" alt="Storage Supabase"
src="https://github.com/user-attachments/assets/babd3711-5fdf-43b9-be06-d96268a191fd"
/> |
## To test
In apps/studio/hooks/misc/withAuth.tsx:
```diff
- const [isSessionTimeoutModalOpen, setIsSessionTimeoutModalOpen] = useState(false)
+ const [isSessionTimeoutModalOpen, setIsSessionTimeoutModalOpen] = useState(true) // Mocked as true for UI testing
```
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Sorted all imports in all packages, `cms`, `design-system` and
`ui-library` apps by running `pnpm format` on them.
All changes in this PR are done by the script.
* feat: sort intro page entry points and sidebar
* feat: beef up getting started intro and faq
* chore: small copy fix
* feat: description for ui patterns intro
* feat: basic description for fragments intro
* feat: add description for atom components intro
* feat: add links to ui pattern docs
* chore: run prettier for mdx files
* Update the design of the sonner toasts. Add the close button by default.
* Migrate studio and www apps to use the SonnerToaster.
* Migrate all toasts from studio.
* Migrate all leftover toasts in studio.
* Add a new toast component with progress. Use it in studio.
* Migrate the design-system app.
* Refactor the consent toast to use sonner.
* Switch docs to use the new sonner toasts.
* Remove toast examples from the design-system app.
* Remove all toast-related components and old code.
* Fix the progress bar in the toast progress component. Also make the bottom components vertically centered.
* Fix the width of the toast progress.
* Use text-foreground-lighter instead of muted for ToastProgress text
* Rename ToastProgress to SonnerProgress.
* Shorten the text in sonner progress.
* Use the correct classes for the close button. Add a const var for the default toast duration. Remove the custom width class from sonner.
* Set the position for all progress toasts to bottom right. Set the duration for all toasts to the default (when reusing a toast id from loading/progress toast, the duration is set to infinity).
* Fix the playwright tests.
* Refactor imports to use ui instead of @ui.
* Change all imports of react-hot-toast with sonner. These components were merged since the last commit to this branch.
* Remove react-hot-toast lib.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* Add a new textarea component which autoexpands depending on number of content rows.
* Use the new ExpandingTextArea in the AIAssistantPanel.
* Remove old unused text area.
* Move around some of the props in the ExpandingTextArea.
* Make the value prop mandatory.
* Fix minor stuff in the Design System app.
* Add examples for Expanding Text Area.
* add max height to the expanding text area.
* Add todo comment in database-new app.
