## Problem
Closes#31221.
The applications and shared UI packages still import the former
`framer-motion` package instead of Motion's React entry point.
## Solution
Replace runtime imports, type imports, and three test mocks with
`motion/react` across the consuming workspaces.
Replace the seven direct dependency declarations with `motion:
^11.18.2`.
Preserve the existing animation engine version and all other dependency
resolutions, including the asynchronous `domMax` feature loader.
Historical blog examples remain as published; `framer-motion` remains a
transitive implementation dependency of Motion.
## Review instructions
1. Run `pnpm install --frozen-lockfile` and check the seven dependency
replacements in the lockfile.
2. Open the WWW Auth page and Docs homepage at desktop and mobile
widths, with normal and reduced motion preferences.
3. Open the mobile navigation, expand Product on WWW, and close the menu
using Escape and the close button.
4. Check the existing animation components, shared form validation, and
Studio tests for unchanged behavior.
Validation:
- Studio: 731 test files, 8,334 passing tests and one expected failure,
with `--maxWorkers=4`.
- Shared UI, UI patterns, WWW, and UI library: 615 passing tests.
- `pnpm run typecheck --concurrency=1`: all 16 repository tasks pass.
- All six application source lint scripts and lint ratchets pass;
generated Docs example copies are excluded from local lint.
- Repository Prettier source check, lockfile formatting, and case hazard
check pass.
- WWW: 10 existing end-to-end checks across nine pages.
- Docs: 5 existing guide link and accessibility checks across Database
and Auth.
- WWW and Docs mobile navigation pass at desktop/mobile sizes with
normal/reduced motion; SQL-to-REST translation tabs exercise the
asynchronous feature loader without browser errors.
- Frozen-lockfile installation passes; all existing package and snapshot
resolutions are unchanged.
- Learn and UI library command palettes open, filter results, and close
with Escape without browser errors.
- Independent code review finds no actionable defects.
- `npm run build -- --filter=www --filter=docs --filter=studio
--filter=learn --filter=library --concurrency=1 --continue=always`: all
five affected applications build successfully (9 tasks including
prerequisites); asset uploads disabled for local validation.
## Checklist
- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [x] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which applies the docs
[style
guide](https://github.com/supabase/supabase/tree/master/apps/docs/style-guide)
(no docs topics changed)
---------
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
## 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
AuthorAvatars now caps visible avatars at 4 (showing a "+N" badge for
the rest) and collapses author names to "First Author, +N others" once
there are more than two, instead of joining every name into one long
string. A tooltip shows the full list.
<img width="434" height="306" alt="Screenshot 2026-07-21 at 15 14 38"
src="https://github.com/user-attachments/assets/507ce37e-b080-4dd6-bd49-ca694252cd72"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Enhancements**
* Blog author displays now cap at three visible avatars and show a “+N”
indicator for additional authors.
* Author name labels are now summarized for multi-author posts (with
full author names available via tooltip when applicable).
* Featured post metadata (author, published date, reading time) has
improved spacing, truncation behavior, and responsive visibility on
smaller screens.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude <noreply@anthropic.com>
## 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>
Render blog posts on server so they are available in initial HTML
response.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* New collapsible sections for blog content
* Server-side MDX compilation for blog posts
* Improved TOC extraction producing both structured JSON and markdown
* **Refactor**
* Blog rendering converted to a server-rendered flow with unified MDX
components
* Tag handling normalized for related-post matching
* **Bug Fixes**
* Consistent image/self-closing tag normalization and corrected TOC
indentation
* Errors are now surfaced instead of being swallowed
<!-- 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.
## What kind of change does this PR introduce?
- Bug fix that resolves DEPR-396
- Additional improvements to blog post image handling
## What is the current behavior?
Blog post Open Graph metadata often prefers `imgThumb` over `imgSocial`,
so social previews on X, iMessage, and similar surfaces can render the
on-site thumbnail instead of the intended social image.
The image selection and path-normalization rules are also duplicated
across blog surfaces, which makes the precedence rules easy to drift.
## What is the new behavior?
- Centralizes blog image handling in `apps/www/lib/blog-images.ts`
- Uses `imgSocial` first, then `imgThumb`, for blog OG/Twitter metadata
- Uses `imgThumb` first, then `imgSocial`, then the placeholder, for
blog thumbnails and post hero images
- Normalizes relative blog image paths into absolute URLs for metadata
- Adds warning-only validation during content reads/builds for partial
or malformed `imgSocial` / `imgThumb` config
- Updates a few recent blog posts so `imgThumb` is a thumbnail-only
asset instead of duplicating the social image
## Additional context
- Replaces #42319 with the additional above fixes
- Added unit coverage for the shared image helper
---------
Co-authored-by: Alan Daniel <stylesshjs@gmail.com>
This PR removes all CMS code from the `www` app. This includes fetching
of blog posts, API routes for proxying blog posts and types.
All functionality should remain the same (and the number of blog posts
should be the same).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Removed CMS integration, APIs, preview/draft/revalidate endpoints,
related env vars and dependency; switched to static markdown-only blog
pipeline.
* **Refactor**
* Simplified image and author resolution, tightened component props to
static post shapes, and migrated imports to path aliases.
* **Documentation**
* Deleted CMS integration docs and rich-text conversion helpers.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Frontmatter name change.
## What is the current behavior?
We repeatedly mistake `thumb` for `image` and visa versa, meaning the
wrong images are used for Open Graph and in-site thumbnails on blog
posts. Events and case studies use the same naming convention too.
## What is the new behavior?
These two bits of frontmatter are renamed for clarity:
- Blog posts: `imgThumb` + `imgSocial`
That mapping for blog posts:
- `thumb` is now `imgThumb`
- `image` is now `imgSocial`
These related bits remain as-is:
- Events
- Case studies
The
[www/README.md](https://github.com/supabase/supabase/blob/dnywh/chore/blog-image-frontmatter/apps/www/README.md#best-practices)
file has been expanded to clarify all of the above. It now also provides
instructions on image optimisation.
## To test
A lot of files were touched here. Please help make sure:
- [ ] The CMS works as intended. This is the **biggest unknown**.
- [x] All blog posts render the correct image as their on-site thumbnail
and Open Graph image. You can test the latter by firing up a draft
iMessage. Online Open Graph services like Facebook cache images, so
aren’t reliable.
- [x] All events render their correct images
- [x] All case studies render their correct images
- [x] All customer stories render their correct images ([known
issue](https://supabase.slack.com/archives/C072FL5KKKP/p1768888063209359?thread_ts=1768885681.502169&cid=C072FL5KKKP),
predates this work)
* 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
* d5
* feat: database.build v2 blog post
* light mode images
* change hero to database.build v2
* add back Redesign section to blog post
* fix(blog): special characters
* feat(blog): add youtube video
* feat(blog): update post title
* wide blog images
* sets up the wrap up post
* fix attribute
* feat(blog): mention wasm pg_dump
* edits
* images
* Adds OG and thumb
* grammar
* blog assets
* mobile fix
* add video to launch week page
* prettify
* is
* hackathon link
---------
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
Co-authored-by: Copple <10214025+kiwicopple@users.noreply.github.com>
Co-authored-by: Julien Goux <hi@jgoux.dev>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* init features page
* fix filtering
* seo boostg
* add features to sitemap
* update copywriting
* improve features descriptions
* more studio features
* moar featuress
* better back to features
* prev next feature nav
* clean
* improve page footer
* fixes
* stuff
* sync filters with query params on page load
* better mobile layout
* 16px mobile input fontsize
* add cover images or videos to features
* improve a11y
* update sitemap
* last changes
* update schema definitions
* Add lucide-react to docs (to make the autocomplete work).
* Migrate the docs app icons.
* Migrate the ui-patterns.
* Remove the old icons from ui package.
* Migrate the www app from react-feather icons.
* Migrate all of studio icons.
* Migrate the only component in design-system.
* Fix an old import in ui package. Revert an import in docs app.
* Fix some pages in www.
* Remove unneeded files used in generation of icons.
* Fix a prettier error.
* Fix more issues in www.
* Fix an issue in Log Date picker.
* Replace all string sizes with number sizes because the icons grew in some cases.
* Fix more imports in security page.
* Fix an extra import.
* Remove the size prop from all icons if they're in a button and they match the button size.
* Minor fixes for docs and www.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* add contentlayer2 to www
* remove authorURL from blog post meta
* latest blog posts in Developers dropdown menu
* parse blog slug in contentlayer
* change next config plugins order
* contentlayer build in www package.json
* contentlayer2
* contentlayer2 build on typecheck in www
* remove comment
* Update package-lock.json
* revert npm package version
* Update package-lock.json
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* d5 announcements
* Adds both posts
* Add YC logo
* change names
* fix slugs
* Adds content
* images
* Update Quote.tsx
* clarity
* d5 assets
* banner link
* ga link in footer
* Grammar and spelling
* move image up for consistency
* grammar
* fix my mistake
* markdown formatting
* Fix details tag
* blog img optimizations
* blog img optimizations
* fix blog link
---------
Co-authored-by: Copple <10214025+kiwicopple@users.noreply.github.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Co-authored-by: Terry Sutton <saltcod@gmail.com>
* set up multiple themes in studio
* set up multiple themes in studio
* set up multiple themes in docs and www
* update all resolvedTheme to also include deep-dark
* update all resolvedTheme checks to also include deep-dark
* update tailwind.config.js tokens
* update tailwind.config.js tokens
* update leftover scale12 token
* update if resolvedTheme _doesn't_ include 'dark'
* update more styling tokens
* add dynamic themes to CmdK
* fix nav and footer for multi theme
* add data-theme selector output to transformTokens.js
* update code-hike.css to target data-theme css
* update tailwindcss to ^3.3.5
* ThemeImage with light and dark src for www and docs
* add brand-button styling token
* update old dark theme boolean
* update old dark theme boolean
* make homepage product visuals themeable
* update product page themed images
* update badge green with brand
* fix roles list appearance
* fix auth widget in auth page
* update more dark logic
* update more dark logic
* add button default bg and border
* update pricing page theme styling
* clean up Themeimage
* remove forceDark in homepage
* update dark:border-dark occurrences
* update dark:border-dark occurrences
* fix dark mode base colors
* remove foreground-strong
* fix notification badge bg
* remove some dark: selectors
* update dark: selectors
* update code-hike deep dark bg color
* fix comment typo
* update border-button-hover token
* fix customer story logo
* remove some more dark: selectors
* restore forceDark in www homepage
* fix auth react icon
* fix homepage product visuals
* remove theme
* add brand-link token
* fix checkbox bg
* npm install
* more visible EntityListItem active bg
* fix --background-alternative-default css vars
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* Update ShareArticleActions.tsx Fixed inaccessible links in Supabase blog by adding aria-label
* run formatter
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
* migrate some www components to tokens
* consolidate InteractiveShimmerCard to Panel component
* update tokens in blog
* update tokens in careers page
* update tokens in customers section
* update tokens in open-source section
* update tokens in Realtime page
* update tokens in Storage and Vector
* update tokens in SplitCodeBlockCarousel
* update tokens in PGCharts
* remove unused css files
* update tokens in Card
* update tokens in Pricing page
* clean up priving page imports
* remove hardcoded theme vars
* migrate first half of defaultTheme.ts to tokens
* migrate second half of defaultTheme.ts to tokens
* improve inputs
* add foreground to text-light and text-lighter
* add foreground to text-light and text-lighter
* migrate docs components with styling tokens
* migrate docs components with styling tokens
* fix broken Repos component
* fix broken classes in blog
* update tokens on Button and other components
* update tokens on IconPanel
* update studio main layout base styling tokens
* update tokens across studio, docs and www
* update tokens across studio, docs and www
* update ui/Panel to styling tokens
* update ExampleProject and TableEditorMenu tokens
* www vector page tokens
* update studio UI tokens
* update other studio UI tokens
* update more studio UI tokens
* change tokens here, change tokens there
* finish updating colors with tokens variables
* add gui sandbox for theme experimentation
* use common package for www, docs and studio and fix Command K tokens
* provide light mode default tokens options
* fix conflict leftover
* update loading line
* fix className typo
* fix prettier
* update themeSandbox preset default values
* fix text-background0
* prettier
* update warningBanner with warning color
* switch all border-border with border-default
* improve border-secondary and foreground-muted in light mode
* force ring color on toggle
* fix button bg color and border-muted light token
* fix input bg color
* fix dark button hover
* fix homepage product card
* fix code-hike table header colors
* button dark border
* remove tabIndex leftover from homepage main ctas
---------
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
