## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Feature — the visual redesign itself.
Part 5 of 6 in a stack that splits the library redesign into reviewable
pieces. The four PRs beneath it carry the build, content and Markdown
work; what's left here is layout, navigation and styling.
## What is the current behavior?
The library is laid out like a documentation site: a sidebar tree of
framework folders, a homepage that lists links, and a guide page that
opens with prose. That shape suits reference material, but the library's
job is to help someone find a block and install it — and the sidebar is
the only way to discover one.
## What is the new behavior?
The homepage is the catalog itself — blocks grouped by what they do
(authentication, database, storage, realtime, messaging, AI,
foundations) rather than by framework, each with a preview of what it
renders, filterable by category.
Navigation moves into a site header whose Explore menu opens the same
categories, so the catalog is reachable from any page and the per-page
sidebar tree is gone.
A guide opens with what the reader came for: the block's name, the
install command, and a preview pane with tabs — the running component
and its files — before any prose. The file tree that used to sit
mid-page under "Folder structure" is one of those tabs. Every guide also
offers a copy of the agent prompt that points at its Markdown.
Getting-started pages get the same treatment: the quickstart is now a
framework-tabbed walkthrough rather than a wall of setup links.
## Additional context
`BlockOverviewTabs` renders Preview and Files here. #50369, stacked on
top of this one, adds the third "What's added" tab — it is the only part
of the redesign that depends on the new resource analyzer, which is why
it sits above this PR rather than below it.
Also removes what the redesign orphaned: the table-of-contents component
and its `remark` / `mdast-util-toc` dependencies, and the sidebar nav
and command-item configuration the new header replaced.
The block source changes are typography only — auth card titles move
from `text-2xl` to `font-medium text-lg tracking-normal` — which is what
regenerates the auth registry artifacts.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a redesigned Supabase Library catalog with categorized blocks,
framework-aware navigation, previews, file views, and installation
actions.
* Added framework-specific quickstart guides for Next.js, React, Vue,
Nuxt, React Router, and TanStack Start.
* Added copy-to-clipboard prompts, “Open in v0” actions, starter
templates, and richer visual previews.
* **Improvements**
* Updated documentation layouts, FAQ content, typography, navigation,
accessibility, and responsive behavior.
* Improved mobile navigation, framework selection, and standardized
block installation guidance.
* Refined authentication and social-login block presentation with more
consistent heading styles.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
## What kind of change does this PR introduce?
UI polish / design system: refreshed button styles, related token
tweaks, and a shared floating-button plate.
Resolves DEPR-652.
## What is the current behavior?
Default, primary, and secondary buttons use older fills, borders, and
hover treatments. Primary still leans on brand scale utilities. Default
fills don’t always read as raised chrome across surfaces, and floating
copy / expand / scroll controls can let busy content show through
translucent fills. Call sites hand-roll `rounded-* bg-background`
wrappers for that.
## What is the new behavior?
Refreshes primary, default, and secondary buttons with medium-weight
labels, subtle shadows and inset edges, and smoother transitions.
Light-mode default buttons use a raised fill with an accent hover state,
primary text is brighter, and inline keyboard shortcuts inherit the
button’s colour.
Adds `FloatingPlate`: an opaque `bg-popover` shell for floating default
buttons (and small clusters). Migrates Studio, Docs-related patterns,
www, and `ui-patterns` floaters onto it so busy content no longer shows
through translucent fills. Positioning, z-index, and hover/focus reveal
stay on the plate’s `className`. Use `rounded="full"` for pills.
Also:
- Moves primary onto semantic `--primary` / `--primary-hover` (with a
light-theme override) instead of brand utility fills
- Tokenises button shadows as `--button-shadow-drop` /
`--button-shadow-raised` / `--button-shadow-default` on the Button base
- Aligns hover direction: darken on light mode, lighten on dark mode for
both default and primary
- Default fill stays opaque `bg-card` in light (occlusion) and
translucent `bg-muted` in dark (adapts to the local surface)
- Documents fills and `FloatingPlate` on the design-system Button page
(with a live example)
- Scales shared radius tokens in Studio and www; medium+ Button sizes
use a proportionally softer radius
- Fixes www nav CTA centering (`lg:inline-flex` instead of `lg:block`)
- Query detail Expand/Collapse wires `aria-expanded` / `aria-controls`
| Before | After |
| --- | --- |
| <img width="1074" height="438" alt="CleanShot 2026-09-18 at 15 52
51@2x"
src="https://github.com/user-attachments/assets/ef43da21-b053-4b7e-9ac4-ab8b428228ab"
/> | <img width="1090" height="464" alt="CleanShot 2026-09-18 at 15 50
59@2x"
src="https://github.com/user-attachments/assets/2ddc55fc-4c8d-499c-a280-f3db3d99023c"
/> |
| <img width="1082" height="446" alt="CleanShot 2026-09-18 at 15 52
35@2x"
src="https://github.com/user-attachments/assets/3dd5452d-325a-4e4a-a79d-26c6c6950a31"
/> | <img width="1078" height="446" alt="CleanShot 2026-09-18 at 15 51
13@2x"
src="https://github.com/user-attachments/assets/93666385-3e6e-42e0-9891-9cd6bb935b67"
/> |
## To test
### Design system
- [Button
page](https://design-system-git-chore-button-styles-supabase.vercel.app/design-system/docs/components/button):
default / primary in light and dark; hover should darken on light,
lighten on dark
- Same page: [Floating over
content](https://design-system-git-chore-button-styles-supabase.vercel.app/design-system/docs/components/button#floating-over-content)
/ [Floating
plate](https://design-system-git-chore-button-styles-supabase.vercel.app/design-system/docs/components/button#floating-plate)
example; Copy over SQL should stay opaque
- Spot-check hover on a code preview Copy control
### Docs
[Docs deploy
preview](https://docs-git-chore-button-styles-supabase.vercel.app/docs):
- [Docs
homepage](https://docs-git-chore-button-styles-supabase.vercel.app/docs):
top-right **Sign up** / **Dashboard** primary; menu icon beside it
(default icon button)
- Shrink below `lg` and open the hamburger drawer: bottom **Sign in**
(default) + **Start your project** (primary) medium block buttons
- Tab once for **Skip to content** (FloatingPlate)
- [MCP
guide](https://docs-git-chore-button-styles-supabase.vercel.app/docs/guides/ai-tools/mcp):
project picker
- [Apple
login](https://docs-git-chore-button-styles-supabase.vercel.app/docs/guides/auth/social-login/auth-apple):
**Generate Secret Key** button in the Apple Secret Generator
- Optional opacity check: any guide code block Copy control (e.g. at the
bottom of [Import data into
Supabase](https://docs-git-chore-button-styles-supabase.vercel.app/docs/guides/database/import-data))
### Studio
[Studio deploy
preview](https://studio-staging-git-chore-button-styles-supabase.vercel.app/):
- **Observability → Query Performance**: open a query detail →
Expand/Collapse pill + SQL Copy chip (dark: no bleed-through)
- **Observability → Query Insights**: select a query → Clear query pill
- **Table Editor → any table → Definition** → floating **Open in SQL
Editor**
- **Connect → Framework → Add files**: Copy on the code tabs
(FloatingPlate; light hover follow-up is DEPR-694)
- Tab once for **Skip to content**
### WWW
- [www deploy
preview](https://zone-www-dot-com-git-chore-button-styles-supabase.vercel.app/):
nav Sign in / Start your project vertical centering; hero medium CTAs
radius
---------
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
The www build saves failed GitHub star requests as zero, which the
navigation displays as `0K`. This passes `GITHUB_TOKEN` through Turbo's
build environment and preserves a valid previously generated count when
a request fails.
If there is no valid previous count, the navigation displays “GitHub”
and the homepage contribution graphic omits the number. Cached fallback
is available only when the previous generated content exists; rate
limiting is a possible cause of the original failure, but has not been
confirmed from deployment logs.
## To test
- Run `pnpm --filter www exec vitest run
scripts/lib/githubStars.test.ts` — all 16 tests pass, covering
authenticated and anonymous requests, rate limiting, malformed
responses, and missing or invalid cached content.
- Build with a valid `GITHUB_TOKEN` and check that the navigation and
homepage graphic show the star count.
- Simulate a failed GitHub request with and without existing generated
content. Confirm that a valid previous count is retained, or that no
zero count appears when none is available.
Verified locally: live GitHub fetch through the new loader, Turbo dry
run with strict environment filtering and `GITHUB_TOKEN` allowed,
Prettier, and ESLint (one existing default-export warning). Full build
and browser checks have not been run.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Bug Fixes**
- GitHub star counts are now displayed only when valid; otherwise, the
interface shows a clear fallback label.
- Star counts can fall back to cached data when GitHub is unavailable or
returns invalid results.
- Builds without GitHub data now complete gracefully instead of failing.
- **Tests**
- Added coverage for authenticated and unauthenticated requests, cached
fallbacks, invalid responses, and clean builds.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
## What kind of change does this PR introduce?
Refactor. Follow-up to #49871.
## What is the current behavior?
Branded (green) text still uses the `text-brand` classname while the
colour comes from `--primary`.
## What is the new behavior?
**Rename-only:** `text-brand` → `text-primary` across callsites and
docs. Leftover `bg-brand` / `border-brand` alias to `brand-default`. No
intentional colour changes in this PR.
This better matches how we treat our green in other components and
props, like `variant="primary"` for green buttons.
## To test
On light mode: smoke-test that branded text still looks like #49871
(readable green, not the bright fill).
-
[Homepage](https://zone-www-dot-com-git-dnywh-depr-316-text-brand-de2380-supabase.vercel.app/):
“Scale to millions” uses `text-primary`
- [Docs
homepage](https://docs-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/docs):
branded links like “More on self-hosting” are still readable
- [Typography
docs](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/typography):
documents `text-primary`
- [Colour
usage](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/color-usage):
`text-primary` is visibly darker than `bg-brand-default` _on light mode_
- [Studio auth
providers](https://studio-staging-git-dnywh-depr-316-text-brand-to-60fa6c-supabase.vercel.app/dashboard/project/_/auth/providers):
enabled provider badge text readable; status dot stays bright green
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Updated branded text, link hover states, icons, badges, indicators,
and highlighted content across the Design System, Docs, Studio, Learn,
UI Library, and marketing experiences to use the primary theme color.
* Updated syntax highlighting and table-of-contents styling for
consistent primary-color presentation.
* Refined brand color fallback behavior for bright fills and borders.
* **Documentation**
* Updated color-usage and typography guidance to recommend the primary
text utility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
feature reworks the www header dropdowns
## What is the current behavior?
menu dropdown navigation animation between items feels scattered
## What is the new behavior?
- adds dropdown card resize with a transition and the content crossfades
when switching
- removes dead zone between or under nav items
- sets card is centered on the screen + enhance tablet bp
- adds slight ui refresh spacing, colors, sizes
| state | preview |
| -------|------|
| before | <video
src="https://github.com/user-attachments/assets/acd8e161-a697-4070-b751-4f4e9f1eab19"
/> |
| after | <video
src="https://github.com/user-attachments/assets/fe403afd-0074-4cb5-9223-fd6cdd2f7d5a"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Navigation dropdowns now provide smoother directional transitions,
keyboard-focus states, and reduced-motion support.
* Product navigation is organized into clearer Products and Modules
sections.
* Navigation layouts adapt earlier across screen sizes with responsive
two-column arrangements.
* **Style**
* Updated dropdown spacing, colors, borders, menu item styling, and
customer imagery sizing.
* Refined blog loading placeholders with slightly tighter spacing.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Bug fix / design-system alignment for the legacy `Button` from `ui`.
## What is the current behavior?
Omitting `variant` on the legacy `Button` falls back to brand-green
`primary`. That makes accidental greens easy, and it is hard to spot the
real main action on busy pages.
## What is the new behavior?
- Legacy `Button` now defaults to neutral `default`
- Intentional primary CTAs (create, save, submit, marketing CTAs, and
matching `ButtonTooltip` usages) now set `variant="primary"` so their
appearance is unchanged
- Neutral actions that previously relied on the old fallback (cancel,
close, back, dashboard nav, and similar) become grey/white
- Design-system docs updated; regression tests cover the new default
`Button_Shadcn_` is unchanged. It already uses its own CVA default.
This is PR 1 of 2 in a stack. PR 2 drops now-redundant
`variant="default"` props.
## To test
Studio (http://localhost:8082):
- `/sign-in`: Sign in stays green
- Open a project → Database → Tables: New table stays green
- Auth → Users → Invite: Invite user stays green; Cancel / dismiss
controls stay neutral
- Project Settings → General: edit a field so Cancel and Save appear.
Cancel is neutral, Save is green
Design system (http://localhost:3003):
- Components → Button: default demo is neutral; primary demo is green;
featured preview is the default variant
Marketing (optional):
- www header: Start your project stays green; logged-in Dashboard is
neutral
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Style**
- Buttons now default to a neutral style, while primary actions across
Studio, documentation, marketing pages, forms, dialogs, and error states
use prominent primary styling.
- Updated button examples and previews clarify the distinction between
default and primary variants.
- Event registration now includes a directional arrow icon.
- **Tests**
- Added coverage confirming default button styling and explicit primary
styling behave as expected.
- Updated related test fixtures to use primary styling where
appropriate.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Bug fix.
## What is the current behavior?
The Supabase Select 2026 announcement is rendered outside the fixed
navigation stack on `/state-of-startups`, so the navigation overlaps the
banner. At shorter viewport heights, the hero's viewport-based minimum
height also lets its headline sit beneath the fixed banner and
navigation.
## What is the new behavior?
On State of Startups routes, the announcement is rendered inside the
fixed navigation stack. The hero content also reserves the stack's
responsive height as its minimum top inset, keeping the headline clear
when the viewport is short without shifting it at normal heights.
Dismissing the banner moves the navigation back to the top without a
hard-coded navigation offset. Other routes keep the existing
announcement and sticky navigation layout.
| Before | After |
| --- | --- |
| <img width="1040" height="618" alt="State of Startups 2026 Supabase"
src="https://github.com/user-attachments/assets/2dc42574-1485-465c-93b1-6690e44a26e4"
/> | <img width="1040" height="618" alt="State of Startups 2026
Supabase"
src="https://github.com/user-attachments/assets/626374cf-8a6b-4519-bbcd-21acfc822fa0"
/> |
## To test
1. Open `/state-of-startups` on the deploy preview with the Supabase
Select 2026 announcement visible.
2. Confirm the announcement sits above the navigation without overlap at
desktop and mobile widths.
3. Reduce the viewport height to around 500px and confirm the State of
Startups headline remains below the navigation.
4. Dismiss the announcement and confirm the navigation moves to the top
of the viewport without leaving a gap.
5. Open another www route and confirm the announcement remains above the
sticky navigation.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Updated the announcement banner placement on State of Startups pages
so it appears within the sticky navigation area.
* Preserved the existing announcement banner placement on other pages.
* Increased top spacing above the State of Startups header content
across mobile and desktop layouts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Copy fix across nav dropdowns.
## What is the current behavior?
Authenticated nav dropdowns use mixed logout wording: Studio shows "Log
out", while www, docs, and learn show "Logout". Studio error flows
already use "Sign out".
| Before |
| --- |
| <img width="482" height="670" alt="CleanShot 2026-09-02 at 13 07
46@2x"
src="https://github.com/user-attachments/assets/d87b7c18-94c0-4c1c-917e-e17e4cb16dd3"
/> |
## What is the new behavior?
All four nav dropdowns use **Sign out**, matching the Sign in / Sign up
standard and the direction in
[DOCS-1328](https://linear.app/supabase/issue/DOCS-1328).
Related: [Slack
thread](https://supabase.slack.com/archives/C0429V78ACX/p1787081498302919)
## To test
Only Studio is possible to test (before merge) given how authentication
works across apps on staging:
1. **Studio** (`/dashboard`): open the account avatar dropdown. Confirm
the bottom item reads **Sign out**.
2. **www** (`supabase.com`): open the account avatar dropdown. Confirm
**Sign out**.
3. **docs** (`supabase.com/docs`): open the account avatar dropdown.
Confirm **Sign out**.
4. **learn** (`supabase.com/learn`): open the account avatar dropdown.
Confirm **Sign out**.
This PR removes all `paths` in `tsconfig.json` for all apps and
packages. They were added previosly because some of the components had a
`_Shadcn` suffix because of an ongoing migration. How that the migration
is done, the paths can be removed.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Standardized shared UI component, utility, and icon imports across
design-system examples and application screens.
* Simplified shared component access and project configuration.
* Added shared access to anchor-link helpers and animation styles.
* **Compatibility**
* Updated component exports and imports without changing existing
behavior.
* No changes to user-facing workflows, screens, or functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Feature. Promotes Supabase Select 2026 across www and the Dashboard.
## What is the current behavior?
There is no active Select promotion on www or in the Dashboard.
## What is the new behavior?
- Adds a dismissible Select 2026 banner above the www navigation.
- Adds a low-priority Banner Stack card across hosted Studio project
pages.
- Shares a lightweight pixel lockup and CSS-only motion across both
surfaces, with light, dark, and reduced-motion treatments.
- Opens the application page in a new tab and automatically expires both
placements after October 2 in San Francisco.
## To test
- Open `/database` on the www preview. Confirm the banner is legible in
light and dark mode, the complete message remains visible at a phone
width, and the CTA opens `select.supabase.com` in a new tab.
- Dismiss the www banner, then refresh the page. Confirm it stays
dismissed.
- Open any `/project/{ref}` route in the Dashboard preview. Confirm the
Select card appears in the bottom-right Banner Stack behind
higher-priority notices.
- Dismiss the Dashboard card, navigate to another project page, and
confirm it stays dismissed.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a time-limited Select 2026 promotional banner across the website
and Studio.
* Added responsive themed artwork, animated visuals, campaign messaging,
and an external “Apply to attend” CTA.
* Banner dismissal preferences are saved and respected across visits.
* Promotion automatically disappears after the campaign ends.
* **Accessibility**
* Improved announcement dismissal controls with semantic buttons and
accessible labels.
* Added reduced-motion support for promotional artwork.
* **Bug Fixes**
* Improved product-card loading effects to prevent hydration
inconsistencies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Accessibility cleanup (DEPR-628).
## What is the current behavior?
Leftover call sites still use ad-hoc focus recipes
(`ring-foreground-muted`, `outline-brand`, Dialog/Sheet `focus:` rings,
etc.) instead of the shared utilities from #41575.
## What is the new behavior?
Converts those leftovers across `packages/ui`, Studio, www, docs, and
design-system to `focus-ring`, preferring `focus-visible`. Keeps
documented exceptions (`group-focus-visible`, InputGroup `:has()`).
## To test
Tab through controls (keyboard only). Expect a consistent offset ring on
`:focus-visible`, not a green/brand/custom stack, and no ring animation.
### www (marketing)
Preview:
https://zone-www-dot-com-git-danny-depr-628-focus-ring-fbccf9-supabase.vercel.app
- Global nav on `/`: Product, Developers, Solutions dropdowns; logo;
hamburger + mobile menu
- `/features`: view toggles and feature cards
- `/company`: card links
- `/changelog`: timeline / entry links
- `/partners/catalog`: grid/list toggle and partner cards
- `/pricing`: compute section expand control
- Product / Modules / Solutions sticky navs on product pages (e.g.
`/database`, `/storage`)
- `/state-of-startups`: TwoOptionToggle if present
### docs
Preview:
https://docs-git-danny-depr-628-focus-ring-long-tail-supabase.vercel.app
- Any guide page: top nav dropdowns and items
- Narrow viewport: hamburger, then mobile menu links + close
- Guide with PromptPanel / tabs: tab to prompt actions and tab list
### studio (dashboard)
Preview:
https://studio-staging-git-danny-depr-628-focus-ring-long-tail-supabase.vercel.app
- Project home: Connect section tiles; drag-handle focus on sortable
sections
- Integrations marketplace (`/project/<ref>/integrations`): featured
cards, list/grid toggle, list rows
- Auth (`/project/<ref>/auth/oauth-apps`,
`/project/<ref>/auth/providers`): open create/edit sheet, tab to close
(X)
- Database policies (`/project/<ref>/database/policies`): open policy
editor sheet, tab to close
- Storage policies (`/project/<ref>/storage/files/policies`): bucket
section links; policy modal close
- Query performance (`/project/<ref>/observability/query-performance`):
info icon buttons on metrics
- Replication pipeline detail (if available): slot lag / status info
icons
- Support (`/support/new`): attachment add/remove controls
- Table editor: spreadsheet import preview checkboxes; row text/JSON
editor TwoOptionToggle
- Any Dialog/Sheet/toast close (X): ring on keyboard focus only, not
mouse click
### design-system
Preview:
https://design-system-git-danny-depr-628-focus-ring-long-tail-supabase.vercel.app
- Colour palette swatches (keyboard focus)
- Form patterns sidepanel example: avatar / focusable control in the
example
## Additional context
- Linear: [DEPR-628](https://linear.app/supabase/issue/DEPR-628)
- Follow-ups: form-group CSS (DEPR-629), Storage columns selection
(DEPR-630), ESLint rule (DEPR-632)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Accessibility & Usability**
* Standardized keyboard focus indicators across navigation, dialogs,
forms, buttons, toggles, links, and tooltips using a consolidated focus
style.
* Improved toggle controls to use proper button semantics (instead of
clickable text), including `aria-pressed`/disabled handling and better
keyboard navigation.
* **Visual Updates**
* Harmonized hover/focus ring visuals across the design system, Studio,
documentation, and marketing pages while preserving existing layout and
interaction behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Accessibility / lint hardening (Safari keyboard focus).
## What is the current behavior?
`supabase/require-explicit-tabindex` is `'warn'`. Studio’s ratchet was
at 0 but the rule was still ratcheted; www / docs / design-system still
had raw `<button>` / `role="button"` call sites without an explicit
`tabIndex`.
[DEPR-627](https://linear.app/supabase/issue/DEPR-627) · follow-up to
#47984 / #48040
## What is the new behavior?
- Shared config: `'supabase/require-explicit-tabindex': 'error'`
- Swept www / docs / design-system (+ Studio test fixtures the ratchet
skipped)
- Removed the rule from the Studio ratchet + baselines
## To test
Prefer **Safari**. This PR only adds explicit `tabIndex` to raw
`<button>` / `role="button"` call sites — not links, and not controls
that already go through `Button` from `ui`.
### Marketing (`www`) ([staging
link](https://zone-www-dot-com-git-danny-depr-627-promote-req-7ae43c-supabase.vercel.app/))
- [x] Homepage frameworks / dashboard feature tabs — Tab through each
tab button
- [x] Product pages (e.g. `/auth`, `/database`) — section tab switchers
- [x] Narrow viewport — open the hamburger; Tab through menu buttons
- [x] `/partners/catalog` — filter / view controls
- [x] Blog view toggle (list ↔ grid)
### Docs ([staging
link](https://docs-git-danny-depr-627-promote-require-explici-25e46d-supabase.vercel.app/))
- [x] **Desktop (≥ lg):** top-right **⋯ menu** (hamburger icon) — opens
a dropdown that includes Theme. Not a separate theme button.
- [x] **Mobile (< lg):** top-right **hamburger** opens the sheet; close
(X) is the raw button we tagged. Theme inside the sheet uses
`ThemeToggle` / `DropdownMenuTrigger` from `ui` (already supposed to set
`tabIndex`).
- [x] **Code blocks** — copy / language controls
- [x] **Is this helpful?** — X / check are `Button` from `ui` (should
already Tab). After voting **while signed in**, the follow-up “What went
well?” / “How can we improve?” text button is the raw one we tagged.
- [x] **AI Tools → Copy as Markdown** (right rail on a guide) — this is
the only GuidesSidebar control this PR changed. “On this page” TOC items
are **links**, not covered by this lint.
- [x] **Reference docs** (e.g. JS client reference) — section headers
that expand/collapse in the left nav (`Collapsible.Trigger`)
- [x] **Troubleshooting index** — type in the search field, then Tab to
the **clear (X)** control
### Dashboard (`studio`)
No production UI changes in this PR (tests + lint config only). Quick
Safari smoke that prior tabindex work still holds:
- [x] Project sidebar — Tab through primary nav links
- [x] Settings → General — Tab through inputs / buttons
- [x] Storage → Files — Tab a bucket row / file actions
## 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>
## Context
As per PR title
<img width="500" alt="image"
src="https://github.com/user-attachments/assets/4cf07471-a0c1-449d-9759-a0ccb3456e09"
/>
Also resolves FE-3565
Closes mobile menu when a link is clicked
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Mobile menu now closes reliably when selecting more navigation items
(Modules, various Developers/Solutions links and footer links).
* Enhanced link focus and interaction behavior in the mobile menu for
clearer keyboard/touch feedback.
* **New Features**
* Navigation links can now accept optional click handlers, enabling
custom onClick behavior.
* **Refactor**
* Internal reorganization of mobile menu styling and link composition to
simplify maintenance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
www pages that use DefaultLayout are bailing out of SSR because of
useSearchParams. Removing the useSearchParams opts more pages (including
the pricing page) into SSR.
_However_, it breaks the build because once blog pages are opted into
SSR, they fail due to next-mdx-remote/codehike incompatibilities. So we
also need to opt blog pages back _out_ of SSR using next/dynamic. This
reproduces previous behaviour for the blog.
Also had to remove suspense wrapper around everything because that was
causing the content div to be streamed in a hidden later chunk
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added support for the Contribute section with improved state
management integration.
* **Performance Improvements**
* Optimized blog post rendering with client-side enhancements.
* Improved navigation and layout loading strategies.
* **Refactor**
* Simplified provider architecture for better maintainability.
* Restructured internal component organization.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
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.
New pages for State of Startups 2026.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **New Features**
* Added "State of Startups 2026" interactive survey results page with
dynamic charts, filterable analytics, and data visualizations across
industry, funding stage, location, and technology adoption
* Implemented animated statistics displays, word clouds, and participant
directory throughout the results experience
* Updated navigation to prominently feature the survey section
* **Style**
* Added smooth animated transitions for survey data elements and page
sections
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Ever since the update to TypeScript 6, IDE auto-imports are suggesting
"node_modules/package_name/...." rather than the correct "package_name".
This is due to our deprecated bare specifier wildcard in paths,
replacing this with a listing of all bare specifiers we currently
support (while migrating away) to restore auto-import suggestions.
This PR moves several components which rely on `next` out of the `ui`
package to the `ui-patterns` package.
`ui-patterns` package is intented to be imported with specific imports
so it's ok if there are components reliant on `next` in there.
The `SonnerToaster` component has removed its dependency by requiring a
prop for `theme`.
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
Yes
## What kind of change does this PR introduce?
Redirect to the signup page for "Start your project" button
## What is the current behavior?
That button redirects to signin page
## What is the new behavior?
Redirects to signup page
## Additional context
Add any other context or screenshots.
## 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?
I added four new solution pages for marketing purposes:
- B2B SaaS
- Healthcare
- FinServ
- Agents
I followed the data model and components of all existing solution pages.
I also altered the mega menu to include a new category.
---------
Co-authored-by: Alan Daniel <stylesshjs@gmail.com>
## Problem
We need a local-only UI to inspect client and server telemetry events
and override flags during development without touching non-local env
behavior. This work is intended to be shared across Studio, Docs, and
WWW.
## Changes
- Introduced a shared `dev-tools` package with the Dev Telemetry Toolbar
UI, trigger, and provider.
- Wired the toolbar into Studio, Docs, and WWW app shells (local-only
gating).
- Added a local-only `devTelemetry()` opt-in with storage gating and SSE
subscription.
- Wired client PostHog events into a local listener and re-exported
types.
- Added local flag override cookie support in the UI and CODEOWNERS for
the new package.
- Added unit tests covering local/non-local behavior and flag utilities.
## Testing
Manual (local only):
- Start each app locally: `pnpm dev:studio`, `pnpm dev:docs`, `pnpm
dev:www`
- Open the app, run `devTelemetry()` in the browser console
- Click around and confirm both client and server events appear (client
will be page views only)
- Verify feature flag overrides (PostHog + ConfigCat) persist and
restore correctly
- Confirm dismissing the toolbar clears local storage and hides the
trigger
Unblocked by https://github.com/supabase/platform/pull/29172
Resolves GROWTH-591
Demo:
[github.com/user-attachments/assets/60b376db-7440-4ada-82f5-d1bd4af4db3b](https://github.com/user-attachments/assets/60b376db-7440-4ada-82f5-d1bd4af4db3b)
Screenshots:
<img width="1368" height="972" alt="1"
src="https://github.com/user-attachments/assets/d2f20a0c-191f-4118-bb5e-15b25f5a54a9"
/>
<img width="1423" height="790" alt="2"
src="https://github.com/user-attachments/assets/115598e2-7287-49bf-9ed7-71ecc679dee3"
/>
<img width="1433" height="882" alt="3"
src="https://github.com/user-attachments/assets/51f666f2-9efc-410f-baec-378bdee9dbfe"
/>
<img width="608" height="483" alt="4"
src="https://github.com/user-attachments/assets/584d6cf5-1b2f-4cee-9e6a-d55ce2e3bae5"
/>
<img width="628" height="305" alt="5"
src="https://github.com/user-attachments/assets/991a9b39-578a-4565-b110-537a02040a53"
/>
<img width="659" height="447" alt="6"
src="https://github.com/user-attachments/assets/95ef405c-fffa-44af-bf6a-f974b780e3fc"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Developer Toolbar (local only): view client/server telemetry, inspect
events, and manage/override feature flags with persistent overrides,
filtering, and clear/reload.
* Client-side telemetry hooks: surface structured events to dev tooling
for realtime inspection.
* **Bug Fixes**
* Fixed end-of-file newline in shared code.
* **Chores**
* Added dev-tools package, integrated provider and trigger across
Studio, Docs, and marketing sites, and added CODEOWNERS entry.
* **Tests**
* Added comprehensive tests and test setup for the DevToolbar.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
| Before | After |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/51d20e23-6bd1-458c-b35a-374990a5804f"/>
| <video
src="https://github.com/user-attachments/assets/fb94af78-efb5-477d-a61e-93f0c6153f05"/>
|
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Navigation header now displays proper loading state while retrieving
user authentication data. User-specific interface elements including
Dashboard links and user menu controls now correctly remain hidden until
user data fully loads, preventing premature visibility and ensuring
consistent display timing during page initialization.
<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* Added new solutions pages and a new case study
* ci: Autofix updates from GitHub workflow
* Fixed solution page navigation
* Updated th e Soshi case study
* improve solutions navigation
* fix prettier
* rebase
* refine single quote
* add firebase hero visuals
* fix z layer for sticky nav
* animate results graph
* animated counter
* prettier
* fix quote on hackathon
* nits
* remove visuals from heros
* gs
* fix
* improve graph label
---------
Co-authored-by: Alan Daniel <stylesshjs@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* show cms blog posts in www
* remove contentlayer from www
* outputFileTracingExcludes
* update remotePatterns
* fetch cms posts server-side with revalidation
* add cms env vars to turbo.json
* add www env vars to turbo.json
* include cms posts in www sitemap
* add migration to remove image from cms post
* update cms meta image mapping in www
* 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>
* state of startups page init
* state of startups page design
* finish dark aware design
* embed placeholder typescript form
* embed typeform in popup
* newsletter form to hubspot
* update typeform id and increase circle size on mobile
* update meta description
* promo
* fix line height and yc
* update subheading
* fix conflict and error handling
* fix anime js
* docs: user nav dropdown
* www: user dropdown nav
* update menus
* chore: add complete local storage allowlist
* move all local-storage to common
* reload after logOut
* add local storage key changes from #35175
* fix errors
* add more keys
* fix merge bugs
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
* Consolidate different versions of postcss. Remove @mertasan/tailwindcss-variables from ui package.
* Bump vitest in pg-meta to remove a vulnerable version of vite.
* Bump dompurify.
* Bump all octokit deps to solve 2 vulns.
* Fix warnings about destructuring json imports.
* Remove a console.log in docs.
* Fix the changelog page to use an ESM import.
* Stabilize the generate-sitemap script output.
* Try another fix for the changelog.
