## Problem
Now that `docs` is the only place where we use the deprecated `ui/Tabs`,
we can move this component and the related HOC from `ui-patterns` in
`docs`
## Solution
- Move `ui/Tabs`, `ui-patterns/ComplexTabs/withQueryParams` and
`ui-patterns/ComplexTabs/withSticky` to `docs`
- Refactor `ui-patterns/ComplexTabs/withQueryParams` and
`ui-patterns/ComplexTabs/withSticky` HOCs as hooks to make them easier
to understand
- Refactor `Tabs` accordingly
No visual nor functional changes.
## How to test
On
https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/auth/passwords
(Tabs are driven by URL and the flow tabs should have sticky headers
even though there's a CSS bug already reported)
- check that by default, the first tab in each tabs is active
- change the tabs in different groups and validate it works
- refresh the page and check that previously selected tabs are active
(URL based selection)
- In a new tab, visit
https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/auth/passwords
again and check that previously selected tabs are active (LocalStorage
based selection)
Do the same on
https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/database/database-advisors
(This one is driven by URL but does not have sticky tab headers)
Do the same on
https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/deployment/terraform/reference
(this one is not driven by URL nor has sticky tab headers)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Docs tabs now persist and restore the active tab via URL query
parameters.
* Added optional “sticky” tab behavior that keeps the active panel in
view.
* Enhanced keyboard interaction for selecting tabs.
* **Bug Fixes**
* Improved active-tab initialization and synchronization when the URL
query changes.
* **Chores**
* Refreshed the tabs UI implementation and styling to improve
consistency and remove deprecated tab exports from shared UI packages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Update marketing website and docs with new sans-serif fonts:
- `Inter` - sans-serif for all body text
- `Manrope` - sans-serif for headings
PR breakdown of #43455
Related: #47226#47228#47236
## Problem
We now export components under a subpath in ui-patterns to avoid barrel
files as they slow down every tools (from IDE to linters, etc.) and may
also affect bundles our users have to download.
## Solution
- Remove the UI patterns index file
- Fix invalid impors
## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## Problem
The `_Shadcn_` suffix isn't needed anymore on `Command` components
## Solution
- Remove the `_Shadcn_` suffix
- Simplify UI package exports
- Apply prettier
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Simplified command component imports and exports across the UI library
by removing internal naming aliases and adopting direct component
references. Updated the public UI package barrel export to use wildcard
re-exports for cleaner API surface.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46153?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
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 -->
## Summary
- Adds a new `/guides/getting-started/plugins` docs page with an
`AgentPluginsPanel` component
- Per-client install instructions for Claude Code, Codex, Cursor, and
Gemini CLI
- Adds the page to the navigation under AI Tools
- Removes the Claude Code plugin subsection from the AI Skills page (now
covered here)
Closes
[AI-690](https://linear.app/supabase/issue/AI-690/agent-plugins-documentation)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Interactive plugin installation panel to choose from multiple AI
coding agents with agent-specific setup instructions and quick links for
help/feedback.
* **Documentation**
* New "Supabase Agent Plugin" guide describing features, included
components, and one‑click installation UI.
* Navigation updated to include the Supabase Agent Plugin guide under
Getting Started → AI Tools.
* AI skills guide streamlined by removing a specific plugin install
snippet and clarifying agent compatibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
## What kind of change does this PR introduce?
Chore
## What is the current behavior?
- We use the MCP client connect dialog in two places: Studio and Docs
- We duplicate image assets for each client in each of those two places
## What is the new behavior?
- Centralised assets
- Consolidation and simplification as a result of it all being a single
source-of-truth now
## To test
- [ ] Everything works as it did before across both Studio and
[Docs](https://supabase.com/docs/guides/getting-started/mcp)
- [ ] All MCP client images load as expected
* feat(code-block): add word wrap functionality and controls to code blocks
* feat(code-block): enhance layout of code block with improved line number display and structure
* fix h-full issue
* fix Prettier issue
---------
Co-authored-by: Chris Chinchilla <chris.ward@supabase.io>
* update configs for different clients
* add codex and minor fixes
* sort clients by popularity
* add onCopy handle to other mcp clients
* remove optional operator for onCopy
* fix system theme
* fix rebase
* fix mdx
* docs: prefer project config for Claude Code
* docs: prefer CLI for Claude Code MCP installation
* docs: authentication instructions for Claude Code
* docs: update MCP authentication admonition
Not all clients automatically prompt login, and we now preselect the correct organization for project scoped MCP servers.
* fix: disable `contentEditable` on claude code codeblocks
* fix: only show "Authentication" note for hosted platform
* fix: platform/project selector wrapping for small screens
* fix: disable contentEditable on codeblock to hide system spellcheck
* feat: standalone codeblock for mcpUrl
* fix: use <Portal> for client select popover to improve scrollIntoView behavior
* feat: remove "Other" client option
* feat: tooltip specifying MCP transport / auth requirements
* feat: update auth tooltip copy, only show for hosted platform
* docs: remove old local Supabase MCP instructions
* feat: improve description on docs feature group
---------
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
* feat: MCP URL builder
- Creates an MCP URL builder component that allows a user to choose options via a UI, then automatically builds the URL and config needed for various MCP clients
- Adds this component to studio Config modal and docs MCP page
* fix(mcp url builder): mcp-remote options
mcp-remote handles OAuth, so no need to pass personal access token
* fix(docs): mcp
We are pushing the remote MCP server rather than the local one, so removing
references to the local server from documentation.
* fix(mcp url builder): ui messages
- Clarify read-only mode
- Storage is not enabled in the defautl configuration
* fix: mcp url builder
- Refactor unnecessary hook into a utility function
- Fix background color in dark mode
* feat: update remote MCP base URL
* docs: update MCP getting started
- Restores relevant content from prod
- Adds callout about authentication
- Adds next steps to remote MCP installation section
* Update apps/docs/content/guides/getting-started/mcp.mdx
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* feat: click selected project to unselect
This follows the unselect pattern from shadcn combobox example
https://ui.shadcn.com/docs/components/combobox
* Update apps/docs/content/guides/getting-started/mcp.mdx
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
* Update apps/docs/content/guides/getting-started/mcp.mdx
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
* Update apps/docs/content/guides/getting-started/mcp.mdx
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
* fix: light mode connection icons
* chore: format `mcp.mdx`
* fix: VS Code URL handler "name"
Based on docs the field is "name" instead of "id":
- https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_commandline-configuration
- https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_url-handler
* refactor: `NEXT_PUBLIC_MCP_URL` environment variable
* feat: move client selector below options
* feat: "Add to" buttons left aligned about config file
* feat: actionable login hint
* feat: condition supported feature groups on platform
* feat: platform selector, mcp url for self-hosted
* feat: update copy for platform selection
* fix: base URL logic, copy
* fix: form MCP url from apiUrl in self-hosted studio
* chore: unused file
* fix: don't populate apiUrl for docs
* fix: omit `project_ref` for self-hosted
* docs: tweak copy for CLI platform
* chore: optional instead of nullable `apiUrl`
* chore: type sharing / inference for platform type
* feat: 'development' self-hosted feature group
* feat: omit read-only switch/param for local/self-hosted
* refactor: remove claude desktop client option
Replay of https://github.com/supabase/supabase/pull/36867/commits/59670f6771bca8e81fa62c0d3115288b82bfbb5d
---------
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
* feat: MCP URL builder
- Creates an MCP URL builder component that allows a user to choose options via a UI, then automatically builds the URL and config needed for various MCP clients
- Adds this component to studio Config modal and docs MCP page
* fix(mcp url builder): mcp-remote options
mcp-remote handles OAuth, so no need to pass personal access token
* fix(docs): mcp
We are pushing the remote MCP server rather than the local one, so removing
references to the local server from documentation.
* fix(mcp url builder): ui messages
- Clarify read-only mode
- Storage is not enabled in the defautl configuration
* fix: mcp url builder
- Refactor unnecessary hook into a utility function
- Fix background color in dark mode
* feat: update remote MCP base URL
* docs: update MCP getting started
- Restores relevant content from prod
- Adds callout about authentication
- Adds next steps to remote MCP installation section
* Update apps/docs/content/guides/getting-started/mcp.mdx
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* feat: click selected project to unselect
This follows the unselect pattern from shadcn combobox example
https://ui.shadcn.com/docs/components/combobox
* Update apps/docs/content/guides/getting-started/mcp.mdx
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
* Update apps/docs/content/guides/getting-started/mcp.mdx
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
* Update apps/docs/content/guides/getting-started/mcp.mdx
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
* fix: light mode connection icons
* chore: format `mcp.mdx`
* fix: VS Code URL handler "name"
Based on docs the field is "name" instead of "id":
- https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_commandline-configuration
- https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_url-handler
* refactor: `NEXT_PUBLIC_MCP_URL` environment variable
* feat: move client selector below options
* feat: "Add to" buttons left aligned about config file
* feat: actionable login hint
* refactor: remote claude desktop client option
---------
Co-authored-by: Matt Rossman <22670878+mattrossman@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
* Add db wrappers open in dashboard cta
* Restore getLatestRelease return to null
* Add guide template components with flexible content positioning
* Add Guide components with composition pattern
* Remove default branch on tag value
* Add GuideTemplate component and do some clean up
* Restore original GuideTemplate
* Clean up code and unused props
* Remove displayName
* Remove unwanted export
* Refactor EditLink to its own helper file
* Apply several fixes
* Fix underline on cta button
* Remove default main tag
* More descriptive button cta label
* fix(docs): add iceberg_wrapper dashboard integration
---------
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
* Consolidate copy to clipboard
* Fix
* Fix some extra clipboard events.
* Fix the tests. Fix a small issue with the copy button.
* Fix
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Add a script for syncing error codes from the repo to the database. This
is part of the newly created rootSync script, where all sync scripts
should be moved eventually.
strictNullChecks was off for docs, which lets errors slip through and
leads to incorrect required/optional typing on Zod-inferred types. This
PR enables strictNullChecks and fixes all the existing violations.
* refactor(docs): turn auth error codes table into data file
Take the Markdown error codes table and turn it into a data file
instead. This makes it easy to parse and reuse in other places besides
Markdown documents.
* Update apps/docs/content/errorCodes/authErrorCodes.toml
Co-authored-by: Terry Sutton <saltcod@gmail.com>
---------
Co-authored-by: Terry Sutton <saltcod@gmail.com>
* docs InfoPopUp
* docs InfoTooltip
* Add mobile sheet for InfoTooltip
* add InfoTooltip to Info Tooltip contributing guide
* keyboard and screen reader behavior
* remove example
* remove hover trigger on mobile
---------
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
* Switch all top-level imports for ui-patterns components to use specific components when importing.
* Remove the @ui-patterns shorthand since it works exactly the same without the @.
* More import fixes.
* Fix the ui-patterns tests.
Migrates client SDK References to App Router. (Management and CLI API references aren't migrated yet, nor are self-hosting config references.)
Some notes:
Big changes to the way crawler pages are built and individual section URLs (e.g., javascript/select) are served. All of these used to be SSG-generated pages, but the number of heavy pages was just too much to handle -- slow as molasses and my laptop sounded like it was taking off, and CI sometimes refuses to build it all at all.
Tried various tricks with caching and pre-generating data but no dice.
So I changed to only building one copy of each SDK+version page, then serving the sub-URLs through a response rewrite. That's for the actual user-visible pages.
For the bot pages, each sub-URL needs to be its own page, but prebuilding it doesn't work, and rendering on demand from React components is too slow (looking for super-fast response here for SEO). Instead I changed to using an API route that serves very minimal, hand-crafted HTML. It looks ugly, but it's purely for the search bots.
You can test what bots see by running curl --user-agent "Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)" <URL_OF_PAGE>
Also added some smoke tests to run against prod for the crawler routes, since we don't keep an eye on those regularly, and Vercel config changes could surprise-break them. Tested the meta images on Open Graph and all seems to work fine.
With this approach, full production builds are really fast: ~5 minutes
Starts using the new type spec handling, which is better at finding params automatically, so I could remove some of the manually written ones from the spec files.
Gildas Garcia
