From 0395fd969f5a188f3f4c63f09ff2b5621b87402a Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Thu, 16 Apr 2026 09:12:43 +0200
Subject: [PATCH] chore: upgrade `react-markdown` (#44913)

## Problem

We'd like to update react to `19` but many of our dependencies don't
support it.

## Solution

Update those dependencies. This PR focuses on `react-markdown`

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Chores**
* Upgraded react-markdown to 10.1.0 (and remark-gfm to 4.0.0) across
projects for improved Markdown support.
* **Style**
* Adjusted Markdown rendering so typography and spacing are applied via
surrounding containers, improving consistent styling across docs and UI.
* **New Content**
  * Added a new RSS feed item for a recent blog post.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../deployment/terraform/reference/page.tsx   |   8 +-
 apps/docs/components/Params.tsx               |   7 +-
 .../docs/features/docs/Reference.sections.tsx |  20 ++-
 apps/docs/features/docs/Reference.ui.tsx      |  29 ++---
 apps/docs/package.json                        |   2 +-
 .../Auth/AuthProvidersForm/FormField.tsx      |  12 +-
 .../interfaces/Linter/LinterDataGrid.tsx      |   6 +-
 .../studio/components/interfaces/Markdown.tsx |  46 ++++---
 apps/studio/package.json                      |   4 +-
 apps/www/components/Pricing/PricingFAQs.tsx   |   9 +-
 .../components/Sections/FeaturesSection.tsx   |  12 +-
 .../components/Sections/ParagraphSection.tsx  |   8 +-
 apps/www/package.json                         |   2 +-
 apps/www/pages/careers.tsx                    |  25 ++--
 apps/www/pages/ga.tsx                         |  22 ++--
 apps/www/public/rss.xml                       |   7 ++
 packages/marketing/package.json               |   2 +-
 packages/ui-patterns/package.json             |   2 +-
 .../prepackaged/DocsAi/DocsAiPage.tsx         |  21 ++--
 .../ui-patterns/src/SqlToRest/sql-to-rest.tsx |  13 +-
 pnpm-lock.yaml                                | 114 ++----------------
 21 files changed, 153 insertions(+), 218 deletions(-)

diff --git a/apps/docs/app/guides/deployment/terraform/reference/page.tsx b/apps/docs/app/guides/deployment/terraform/reference/page.tsx
index 7c8606c2888..e4515a05839 100644
--- a/apps/docs/app/guides/deployment/terraform/reference/page.tsx
+++ b/apps/docs/app/guides/deployment/terraform/reference/page.tsx
@@ -156,8 +156,8 @@ function Resources({ schema }: { schema: any }) {
                                 <li key={nestedAttribute}>
                                   {nestedAttribute}
                                   <ul>
-                                    <li>
-                                      <ReactMarkdown className="*:!m-0">
+                                    <li className="*:!m-0">
+                                      <ReactMarkdown>
                                         {
                                           schema[resource].block.attributes[attribute].nested_type
                                             .attributes[nestedAttribute].description
@@ -285,8 +285,8 @@ function DataSources({ schema }: { schema: any }) {
                                 <li key={nestedAttribute}>
                                   {nestedAttribute}
                                   <ul>
-                                    <li>
-                                      <ReactMarkdown className="*:!m-0">
+                                    <li className="*:!m-0">
+                                      <ReactMarkdown>
                                         {
                                           schema[dataSource].block.attributes[attribute].nested_type
                                             .attributes[nestedAttribute].description
diff --git a/apps/docs/components/Params.tsx b/apps/docs/components/Params.tsx
index 322d84b53f0..90e51a7aff8 100644
--- a/apps/docs/components/Params.tsx
+++ b/apps/docs/components/Params.tsx
@@ -1,5 +1,4 @@
-import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
-
+import ReactMarkdown from 'react-markdown'
 import { Badge } from 'ui'
 
 type IParamProps = any
@@ -22,7 +21,9 @@ const Param = ({ name, isOptional, type, description, children, isPrimitive }: I
         <span className="text-foreground-muted text-xs">{type ?? 'no type'}</span>
       </div>
       {description && (
-        <ReactMarkdown className="text-sm text-foreground-lighter m-0">{description}</ReactMarkdown>
+        <div className="text-sm text-foreground-lighter m-0">
+          <ReactMarkdown>{description}</ReactMarkdown>
+        </div>
       )}
       {children}
     </div>
diff --git a/apps/docs/features/docs/Reference.sections.tsx b/apps/docs/features/docs/Reference.sections.tsx
index 6b060455a56..8c6bf9365ee 100644
--- a/apps/docs/features/docs/Reference.sections.tsx
+++ b/apps/docs/features/docs/Reference.sections.tsx
@@ -172,12 +172,8 @@ async function CliCommandSection({ link, section }: CliCommandSectionProps) {
   return (
     <RefSubLayout.Section columns="double" link={link} {...section}>
       <StickyHeader title={command.title} className="col-[1_/_-1]" monoFont={true} />
-      <div className="w-full min-w-0">
-        {command.description && (
-          <ReactMarkdown className="prose w-full break-words mb-8">
-            {command.description}
-          </ReactMarkdown>
-        )}
+      <div className="w-full min-w-0 prose break-words mb-8">
+        {command.description && <ReactMarkdown>{command.description}</ReactMarkdown>}
         {command.usage && (
           <div className="mb-8">
             <h3 className="mb-2 text-base text-foreground">Usage</h3>
@@ -224,9 +220,9 @@ async function CliCommandSection({ link, section }: CliCommandSectionProps) {
                     )}
                   </div>
                   {flag.description && (
-                    <ReactMarkdown className="prose break-words text-sm">
-                      {flag.description}
-                    </ReactMarkdown>
+                    <div className="prose break-words text-sm">
+                      <ReactMarkdown>{flag.description}</ReactMarkdown>
+                    </div>
                   )}
                 </li>
               ))}
@@ -346,9 +342,9 @@ async function ApiEndpointSection({ link, section, servicePath }: ApiEndpointSec
           </code>
         </div>
         {endpointDetails.description && (
-          <ReactMarkdown className="prose break-words mb-8">
-            {endpointDetails.description}
-          </ReactMarkdown>
+          <div className="prose break-words mb-8">
+            <ReactMarkdown>{endpointDetails.description}</ReactMarkdown>
+          </div>
         )}
         {endpointDetails['x-oauth-scope'] && (
           <section>
diff --git a/apps/docs/features/docs/Reference.ui.tsx b/apps/docs/features/docs/Reference.ui.tsx
index 30721abeaab..8a5d0893b81 100644
--- a/apps/docs/features/docs/Reference.ui.tsx
+++ b/apps/docs/features/docs/Reference.ui.tsx
@@ -1,16 +1,3 @@
-import { isEqual } from 'lodash-es'
-import { ChevronRight, XCircle } from 'lucide-react'
-import type { HTMLAttributes, PropsWithChildren } from 'react'
-import ReactMarkdown from 'react-markdown'
-
-import {
-  Badge,
-  cn,
-  Collapsible_Shadcn_,
-  CollapsibleContent_Shadcn_,
-  CollapsibleTrigger_Shadcn_,
-} from 'ui'
-
 import ApiSchema from '~/components/ApiSchema'
 import { MDXRemoteBase } from '~/features/docs/MdxBase'
 import { MDXRemoteRefs } from '~/features/docs/Reference.mdx'
@@ -23,6 +10,18 @@ import type {
 import { TYPESPEC_NODE_ANONYMOUS } from '~/features/docs/Reference.typeSpec'
 import { ReferenceSectionWrapper } from '~/features/docs/Reference.ui.client'
 import { normalizeMarkdown } from '~/features/docs/Reference.utils'
+import { isEqual } from 'lodash-es'
+import { ChevronRight, XCircle } from 'lucide-react'
+import type { HTMLAttributes, PropsWithChildren } from 'react'
+import ReactMarkdown from 'react-markdown'
+import {
+  Badge,
+  cn,
+  Collapsible_Shadcn_,
+  CollapsibleContent_Shadcn_,
+  CollapsibleTrigger_Shadcn_,
+} from 'ui'
+
 import { getTypeDisplayFromSchema, IApiEndPoint, type ISchema } from './Reference.api.utils'
 import { API_REFERENCE_REQUEST_BODY_SCHEMA_DATA_ATTRIBUTES } from './Reference.ui.shared'
 
@@ -353,7 +352,9 @@ export function ApiSchemaParamDetails({ param }: { param: IApiEndPoint['paramete
         )}
       </div>
       {param.description && (
-        <ReactMarkdown className="prose break-words text-sm">{param.description}</ReactMarkdown>
+        <div className="prose break-words text-sm">
+          <ReactMarkdown>{param.description}</ReactMarkdown>
+        </div>
       )}
       {param.schema && <ApiSchemaParamSubdetails schema={param.schema} />}
     </li>
diff --git a/apps/docs/package.json b/apps/docs/package.json
index aaaeb678049..4d80f452054 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -106,7 +106,7 @@
     "react-error-boundary": "^4.0.12",
     "react-hook-form": "^7.71.2",
     "react-intersection-observer": "^9.5.3",
-    "react-markdown": "^8.0.3",
+    "react-markdown": "^10.1.0",
     "react-use": "^17.5.0",
     "rehype-katex": "^7.0.0",
     "rehype-slug": "^5.1.0",
diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
index c1626730f6b..f6cef18b566 100644
--- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
+++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
@@ -327,13 +327,11 @@ const FormField = ({
                   label={properties.title}
                   description={
                     description ? (
-                      <ReactMarkdown
-                        unwrapDisallowed
-                        disallowedElements={['p']}
-                        className="form-field-markdown"
-                      >
-                        {description}
-                      </ReactMarkdown>
+                      <div className="form-field-markdown">
+                        <ReactMarkdown unwrapDisallowed disallowedElements={['p']}>
+                          {description}
+                        </ReactMarkdown>
+                      </div>
                     ) : null
                   }
                 >
diff --git a/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx b/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx
index 7cc7c6dfae9..abb7aa2dcce 100644
--- a/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx
+++ b/apps/studio/components/interfaces/Linter/LinterDataGrid.tsx
@@ -71,7 +71,11 @@ const LinterDataGrid = ({
       name: 'Description',
       description: undefined,
       minWidth: 400,
-      value: (row: any) => <ReactMarkdown className="text-xs">{row.description}</ReactMarkdown>,
+      value: (row: any) => (
+        <div className="text-xs">
+          <ReactMarkdown>{row.description}</ReactMarkdown>
+        </div>
+      ),
     },
   ]
 
diff --git a/apps/studio/components/interfaces/Markdown.tsx b/apps/studio/components/interfaces/Markdown.tsx
index 480b432d89d..ee462c7e8be 100644
--- a/apps/studio/components/interfaces/Markdown.tsx
+++ b/apps/studio/components/interfaces/Markdown.tsx
@@ -1,17 +1,34 @@
 import { PropsWithChildren } from 'react'
-import { ReactMarkdown, ReactMarkdownOptions } from 'react-markdown/lib/react-markdown'
+import ReactMarkdown, { type Options } from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { cn } from 'ui'
 
 import { InlineLink } from '@/components/ui/InlineLink'
 
-interface MarkdownProps extends Omit<ReactMarkdownOptions, 'children' | 'node'> {
+interface MarkdownProps extends Omit<Options, 'children' | 'node'> {
   className?: string
   /** @deprecated  Should remove this and just take `children` instead */
   content?: string
   extLinks?: boolean
 }
 
+const H3 = ({
+  children,
+}: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) => (
+  <h3 className="mb-1">{children}</h3>
+)
+const Code = ({
+  children,
+}: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>) => (
+  <code className="text-code-inline">{children}</code>
+)
+const A = ({
+  href,
+  children,
+}: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>) => (
+  <InlineLink href={href ?? '/'}>{children}</InlineLink>
+)
+
 export const Markdown = ({
   children,
   className,
@@ -20,17 +37,18 @@ export const Markdown = ({
   ...props
 }: PropsWithChildren<MarkdownProps>) => {
   return (
-    <ReactMarkdown
-      remarkPlugins={[remarkGfm]}
-      components={{
-        h3: ({ children }) => <h3 className="mb-1">{children}</h3>,
-        code: ({ children }) => <code className="text-code-inline">{children}</code>,
-        a: ({ href, children }) => <InlineLink href={href ?? '/'}>{children}</InlineLink>,
-      }}
-      {...props}
-      className={cn('text-sm', className)}
-    >
-      {(children as string) ?? content}
-    </ReactMarkdown>
+    <div className={cn('text-sm', className)}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          h3: H3,
+          code: Code,
+          a: A,
+        }}
+        {...props}
+      >
+        {(children as string) ?? content}
+      </ReactMarkdown>
+    </div>
   )
 }
diff --git a/apps/studio/package.json b/apps/studio/package.json
index 1c84df9123d..d96746a7ff7 100644
--- a/apps/studio/package.json
+++ b/apps/studio/package.json
@@ -122,12 +122,12 @@
     "react-hook-form": "^7.71.2",
     "react-inlinesvg": "^4.0.4",
     "react-intersection-observer": "^9.5.3",
-    "react-markdown": "^8.0.3",
+    "react-markdown": "^10.1.0",
     "react-resizable": "3.0.5",
     "react-simple-maps": "4.0.0-beta.6",
     "react-use": "^17.5.0",
     "recharts": "catalog:",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "shared-data": "workspace:*",
     "sonner": "^1.5.0",
     "sql-formatter": "^15.0.0",
diff --git a/apps/www/components/Pricing/PricingFAQs.tsx b/apps/www/components/Pricing/PricingFAQs.tsx
index c843d30f0da..58a1ddb75cf 100644
--- a/apps/www/components/Pricing/PricingFAQs.tsx
+++ b/apps/www/components/Pricing/PricingFAQs.tsx
@@ -1,9 +1,8 @@
+import pricingFaq from '~/data/PricingFAQ.json'
 import React from 'react'
 import ReactMarkdown from 'react-markdown'
 import { Accordion } from 'ui'
 
-import pricingFaq from '~/data/PricingFAQ.json'
-
 const PricingFAQs = () => {
   return (
     <div className="mx-auto max-w-5xl gap-y-10 gap-x-10 lg:grid-cols-2">
@@ -25,9 +24,9 @@ const PricingFAQs = () => {
                     header={<span className="text-foreground">{faq.question}</span>}
                     id={`faq--${i.toString()}`}
                   >
-                    <ReactMarkdown className="text-foreground-lighter prose">
-                      {faq.answer}
-                    </ReactMarkdown>
+                    <div className="prose text-foreground-lighter">
+                      <ReactMarkdown>{faq.answer}</ReactMarkdown>
+                    </div>
                   </Accordion.Item>
                 </div>
               )
diff --git a/apps/www/components/Sections/FeaturesSection.tsx b/apps/www/components/Sections/FeaturesSection.tsx
index d4a515abdc3..56533069848 100644
--- a/apps/www/components/Sections/FeaturesSection.tsx
+++ b/apps/www/components/Sections/FeaturesSection.tsx
@@ -1,11 +1,11 @@
-import { LazyMotion, domAnimation, m, useInView } from 'framer-motion'
+import SectionContainer from '~/components/Layouts/SectionContainer'
+import { getAnimation, INITIAL_BOTTOM } from '~/lib/animations'
+import { domAnimation, LazyMotion, m, useInView } from 'framer-motion'
 import { ArrowUpRight } from 'lucide-react'
 import Link from 'next/link'
 import { ReactNode, useRef } from 'react'
 import ReactMarkdown from 'react-markdown'
 import { Button, cn } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
-import { INITIAL_BOTTOM, getAnimation } from '~/lib/animations'
 
 interface Feature {
   icon: string
@@ -114,9 +114,9 @@ const Feature = ({
       )}
       <div className="text-sm lg:text-base">
         <h2 className="text-base">{feature.title}</h2>
-        <ReactMarkdown className="prose pt-1 text-sm text-foreground-lighter">
-          {feature.text}
-        </ReactMarkdown>
+        <div className="prose pt-1 text-sm text-foreground-lighter">
+          <ReactMarkdown>{feature.text}</ReactMarkdown>
+        </div>
       </div>
     </m.div>
   )
diff --git a/apps/www/components/Sections/ParagraphSection.tsx b/apps/www/components/Sections/ParagraphSection.tsx
index 8e354846ab7..c53b10c1c40 100644
--- a/apps/www/components/Sections/ParagraphSection.tsx
+++ b/apps/www/components/Sections/ParagraphSection.tsx
@@ -1,9 +1,9 @@
+import SectionContainer from '~/components/Layouts/SectionContainer'
 import { ArrowUpRight } from 'lucide-react'
 import Link from 'next/link'
 import { ReactNode } from 'react'
 import ReactMarkdown from 'react-markdown'
 import { Button, cn } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
 
 interface Feature {
   icon: string
@@ -48,10 +48,8 @@ const FeaturesSection = ({
         </div>
       </div>
       {content && (
-        <div className="col-span-full lg:col-start-6 lg:col-span-7">
-          <ReactMarkdown className="prose !max-w-none text-foreground-light">
-            {content}
-          </ReactMarkdown>
+        <div className="col-span-full lg:col-start-6 lg:col-span-7 prose !max-w-none text-foreground-light">
+          <ReactMarkdown>{content}</ReactMarkdown>
         </div>
       )}
     </div>
diff --git a/apps/www/package.json b/apps/www/package.json
index 03c536560ad..7b1c93d0155 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -75,7 +75,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-countdown": "^2.3.5",
     "react-dom": "catalog:",
-    "react-markdown": "^9.0.1",
+    "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.6",
     "react-transition-group": "^4.4.1",
     "react-use": "^17.4.0",
diff --git a/apps/www/pages/careers.tsx b/apps/www/pages/careers.tsx
index d0815a2c401..5e88358ca1f 100644
--- a/apps/www/pages/careers.tsx
+++ b/apps/www/pages/careers.tsx
@@ -1,4 +1,10 @@
 import { GlobeAltIcon } from '@heroicons/react/outline'
+import Globe from '~/components/Globe'
+import DefaultLayout from '~/components/Layouts/Default'
+import SectionContainer from '~/components/Layouts/SectionContainer'
+import career from '~/data/career.json'
+import { filterGenericJob, groupJobsByTeam, JobItemProps, PLACEHOLDER_JOB_ID } from '~/lib/careers'
+import Styles from '~/styles/career.module.css'
 import { GetServerSideProps } from 'next'
 import { NextSeo } from 'next-seo'
 import Image from 'next/image'
@@ -7,14 +13,6 @@ import { useRouter } from 'next/router'
 import ReactMarkdown from 'react-markdown'
 import { Badge, Button, buttonVariants, cn, Separator } from 'ui'
 import { z } from 'zod'
-import Styles from '~/styles/career.module.css'
-
-import Globe from '~/components/Globe'
-import DefaultLayout from '~/components/Layouts/Default'
-import SectionContainer from '~/components/Layouts/SectionContainer'
-
-import career from '~/data/career.json'
-import { filterGenericJob, groupJobsByTeam, JobItemProps, PLACEHOLDER_JOB_ID } from '~/lib/careers'
 
 const ContributorSchema = z.object({
   login: z.string(),
@@ -137,9 +135,10 @@ const CareerPage = ({ jobs, placeholderJob, contributors }: CareersPageProps) =>
                 >
                   <div className="hidden md:block border-t-[1px] lg:border-t-2 border-brand w-[60px] lg:w-[100px]"></div>
                   <h2 className="text-3xl lg:text-4xl pt-3 tracking-[-1px]">{company.number}</h2>
-                  <ReactMarkdown className="text-foreground-light text-sm lg:text-base">
-                    {company.text}
-                  </ReactMarkdown>
+
+                  <div className="text-foreground-light text-sm lg:text-base">
+                    <ReactMarkdown>{company.text}</ReactMarkdown>
+                  </div>
                 </div>
               )
             })}
@@ -387,7 +386,9 @@ const CareerPage = ({ jobs, placeholderJob, contributors }: CareersPageProps) =>
                   <div className="h-full flex items-start space-x-6 w-full" key={i}>
                     <div className="h-fit text-sm lg:text-base">
                       <h3 className="text-base">{benefits.title}</h3>
-                      <ReactMarkdown className="prose pt-1 text-sm">{benefits.text}</ReactMarkdown>
+                      <div className="prose pt-1 text-sm">
+                        <ReactMarkdown>{benefits.text}</ReactMarkdown>
+                      </div>
                     </div>
                   </div>
                 )
diff --git a/apps/www/pages/ga.tsx b/apps/www/pages/ga.tsx
index 5f88ce895e8..febe3749190 100644
--- a/apps/www/pages/ga.tsx
+++ b/apps/www/pages/ga.tsx
@@ -1,3 +1,4 @@
+import DefaultLayout from '~/components/Layouts/Default'
 import { NextSeo } from 'next-seo'
 import { useTheme } from 'next-themes'
 import dynamic from 'next/dynamic'
@@ -6,9 +7,8 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React from 'react'
 import ReactMarkdown from 'react-markdown'
-
 import { ExpandableVideo } from 'ui-patterns/ExpandableVideo'
-import DefaultLayout from '~/components/Layouts/Default'
+
 import ImageGrid from '../components/ImageGrid'
 import SectionContainer from '../components/Layouts/SectionContainer'
 import { data as pageData } from '../data/ga'
@@ -99,9 +99,9 @@ export default function IndexPage() {
                       <h2 className="text-xl md:text-2xl lg:text-4xl pt-1.5 lg:pt-3 tracking-[-1.5px] font-mono">
                         {highlight.number}
                       </h2>
-                      <ReactMarkdown className="text-foreground-light text-sm lg:text-base lg:mt-3">
-                        {highlight.text}
-                      </ReactMarkdown>
+                      <div className="text-foreground-light text-sm lg:text-base lg:mt-3">
+                        <ReactMarkdown>{highlight.text}</ReactMarkdown>
+                      </div>
                     </div>
                   )
                 }
@@ -155,9 +155,9 @@ export default function IndexPage() {
                     <h2 className="text-xl md:text-2xl lg:text-4xl pt-1.5 lg:pt-3 tracking-[-1.5px] font-mono">
                       {highlight.number}
                     </h2>
-                    <ReactMarkdown className="text-foreground-light text-sm lg:text-base lg:mt-3">
-                      {highlight.text}
-                    </ReactMarkdown>
+                    <div className="text-foreground-light text-sm lg:text-base lg:mt-3">
+                      <ReactMarkdown>{highlight.text}</ReactMarkdown>
+                    </div>
                   </div>
                 )
               }
@@ -198,9 +198,9 @@ export default function IndexPage() {
                         {highlight.number}
                       </h2>
                     )}
-                    <ReactMarkdown className="text-foreground-light text-sm lg:text-base lg:mt-3">
-                      {highlight.text}
-                    </ReactMarkdown>
+                    <div className="text-foreground-light text-sm lg:text-base lg:mt-3">
+                      <ReactMarkdown>{highlight.text}</ReactMarkdown>
+                    </div>
                   </div>
                 )
               }
diff --git a/apps/www/public/rss.xml b/apps/www/public/rss.xml
index 1337de59768..ca62eab4296 100644
--- a/apps/www/public/rss.xml
+++ b/apps/www/public/rss.xml
@@ -13,6 +13,13 @@
   <description>We&apos;re transferring the Stripe Sync Engine from supabase/stripe-sync-engine to stripe/sync-engine</description>
   <pubDate>Tue, 14 Apr 2026 00:00:00 -0700</pubDate>
 </item>
+<item>
+  <guid>https://supabase.com/blog/supabase-agent-skills</guid>
+  <title>AI Agents Know About Supabase. They Don&apos;t Always Use It Right.</title>
+  <link>https://supabase.com/blog/supabase-agent-skills</link>
+  <description>Introducing Supabase Agent Skills: an open-source set of instructions that teach AI coding agents how to build on Supabase correctly.</description>
+  <pubDate>Thu, 09 Apr 2026 00:00:00 -0700</pubDate>
+</item>
 <item>
   <guid>https://supabase.com/blog/custom-oauth-oidc-providers</guid>
   <title>Custom OIDC Providers for Supabase Auth</title>
diff --git a/packages/marketing/package.json b/packages/marketing/package.json
index c6a4d761e29..0576c33fb7e 100644
--- a/packages/marketing/package.json
+++ b/packages/marketing/package.json
@@ -19,7 +19,7 @@
   "dependencies": {
     "@types/react": "catalog:",
     "react": "catalog:",
-    "react-markdown": "^8.0.3",
+    "react-markdown": "^10.1.0",
     "server-only": "^0.0.1",
     "shiki": "^4.0.1",
     "ui": "workspace:*",
diff --git a/packages/ui-patterns/package.json b/packages/ui-patterns/package.json
index ae16d063bad..0340751f831 100644
--- a/packages/ui-patterns/package.json
+++ b/packages/ui-patterns/package.json
@@ -813,7 +813,7 @@
     "react-error-boundary": "^4.0.12",
     "react-hook-form": "^7.71.2",
     "react-intersection-observer": "^9.8.2",
-    "react-markdown": "^9.0.1",
+    "react-markdown": "^10.1.0",
     "react-medium-image-zoom": "^5.2.4",
     "react-syntax-highlighter": "^15.6.6",
     "react-use": "^17.5.0",
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
index 4c897f57463..1230dd566ce 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
@@ -245,16 +245,17 @@ function AiMessages({ messages }: { messages: Array<Message> }) {
                     {message.status === MessageStatus.Pending && (
                       <span className="inline-block h-[1lh] w-[0.8lh] mt-1 bg-border-strong animate-bounce" />
                     )}
-                    <ReactMarkdown
-                      remarkPlugins={[remarkGfm]}
-                      components={{
-                        ...markdownComponents,
-                        a: (props) => <a {...props} target="_blank" rel="noopener noreferrer" />,
-                      }}
-                      className="prose dark:prose-dark break-words"
-                    >
-                      {message.content}
-                    </ReactMarkdown>
+                    <div className="prose dark:prose-dark break-words">
+                      <ReactMarkdown
+                        remarkPlugins={[remarkGfm]}
+                        components={{
+                          ...markdownComponents,
+                          a: (props) => <a {...props} target="_blank" rel="noopener noreferrer" />,
+                        }}
+                      >
+                        {message.content}
+                      </ReactMarkdown>
+                    </div>
                     {message.sources && message.sources.length > 0 && (
                       <div className="mt-4 pt-4 border-t border-border-muted">
                         <p className="text-sm text-foreground-muted mb-2">Sources:</p>
diff --git a/packages/ui-patterns/src/SqlToRest/sql-to-rest.tsx b/packages/ui-patterns/src/SqlToRest/sql-to-rest.tsx
index e648130f397..8456cd4bc2f 100644
--- a/packages/ui-patterns/src/SqlToRest/sql-to-rest.tsx
+++ b/packages/ui-patterns/src/SqlToRest/sql-to-rest.tsx
@@ -415,8 +415,8 @@ export default function SqlToRest({
               <h3 className="my-1 text-base text-inherit">Assumptions</h3>
               <ol className="my-0 text-foreground">
                 {relevantAssumptions.map((assumption) => (
-                  <li>
-                    <Markdown className="text-sm">{assumption}</Markdown>
+                  <li className="text-sm">
+                    <Markdown>{assumption}</Markdown>
                   </li>
                 ))}
               </ol>
@@ -432,9 +432,11 @@ export default function SqlToRest({
                   className="flex flex-col items-stretch justify-start bg-surface-100 rounded border border-default px-4"
                 >
                   <Collapsible.Trigger asChild>
-                    <button type="button" className="flex justify-between items-center p-3">
+                    <button
+                      type="button"
+                      className="flex justify-between items-center p-3 text-sm text-left"
+                    >
                       <Markdown
-                        className="text-sm text-left"
                         components={{
                           p: ({ children }: PropsWithChildren) => <p className="m-0">{children}</p>,
                         }}
@@ -445,9 +447,8 @@ export default function SqlToRest({
                     </button>
                   </Collapsible.Trigger>
                   <Collapsible.Content>
-                    <div className="text-foreground flex flex-col justify-start items-center px-3 pb-4">
+                    <div className="text-foreground flex flex-col justify-start items-center px-3 pb-4 text-sm">
                       <Markdown
-                        className="text-sm"
                         components={{
                           code: (props: any) => <CodeBlock hideLineNumbers {...props} />,
                         }}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ea717e0bfdd..805398f4214 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -503,8 +503,8 @@ importers:
         specifier: ^9.5.3
         version: 9.8.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-markdown:
-        specifier: ^8.0.3
-        version: 8.0.7(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1)
+        specifier: ^10.1.0
+        version: 10.1.0(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1)
       react-use:
         specifier: ^17.5.0
         version: 17.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1133,8 +1133,8 @@ importers:
         specifier: ^9.5.3
         version: 9.8.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-markdown:
-        specifier: ^8.0.3
-        version: 8.0.7(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1)
+        specifier: ^10.1.0
+        version: 10.1.0(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1)
       react-resizable:
         specifier: 3.0.5
         version: 3.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1148,8 +1148,8 @@ importers:
         specifier: 'catalog:'
         version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       remark-gfm:
-        specifier: ^3.0.1
-        version: 3.0.1(supports-color@8.1.1)
+        specifier: ^4.0.0
+        version: 4.0.1(supports-color@8.1.1)
       shared-data:
         specifier: workspace:*
         version: link:../../packages/shared-data
@@ -1849,8 +1849,8 @@ importers:
         specifier: 'catalog:'
         version: 18.3.1(react@18.3.1)
       react-markdown:
-        specifier: ^9.0.1
-        version: 9.0.1(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1)
+        specifier: ^10.1.0
+        version: 10.1.0(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1)
       react-syntax-highlighter:
         specifier: ^15.6.6
         version: 15.6.6(react@18.3.1)
@@ -2385,8 +2385,8 @@ importers:
         specifier: 'catalog:'
         version: 18.3.1
       react-markdown:
-        specifier: ^8.0.3
-        version: 8.0.7(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1)
+        specifier: ^10.1.0
+        version: 10.1.0(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1)
       server-only:
         specifier: ^0.0.1
         version: 0.0.1
@@ -2763,8 +2763,8 @@ importers:
         specifier: ^9.8.2
         version: 9.8.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-markdown:
-        specifier: ^9.0.1
-        version: 9.0.1(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1)
+        specifier: ^10.1.0
+        version: 10.1.0(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1)
       react-medium-image-zoom:
         specifier: ^5.2.4
         version: 5.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -12927,9 +12927,6 @@ packages:
   hast-util-to-text@4.0.0:
     resolution: {integrity: sha512-EWiE1FSArNBPUo1cKWtzqgnuRQwEeQbQtnFJRYV1hb1BWDgrAlBU0ExptvZMM/KSA82cDpm2sFGf3Dmc5Mza3w==}
 
-  hast-util-whitespace@2.0.1:
-    resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==}
-
   hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
 
@@ -13157,9 +13154,6 @@ packages:
     resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  inline-style-parser@0.1.1:
-    resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==}
-
   inline-style-parser@0.2.4:
     resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
 
@@ -16372,18 +16366,6 @@ packages:
       '@types/react': '>=18'
       react: '>=18'
 
-  react-markdown@8.0.7:
-    resolution: {integrity: sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==}
-    peerDependencies:
-      '@types/react': '>=16'
-      react: '>=16'
-
-  react-markdown@9.0.1:
-    resolution: {integrity: sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==}
-    peerDependencies:
-      '@types/react': '>=18'
-      react: '>=18'
-
   react-medium-image-zoom@5.2.4:
     resolution: {integrity: sha512-XLu/fLqpbmhiDAGA6yie78tDv4kh8GxvS7kKQArSOvCvm5zvgItoh4h01NAAvnezQ60ovsTeedHiHG3eG9CcGg==}
     peerDependencies:
@@ -16680,9 +16662,6 @@ packages:
   remark-frontmatter@5.0.0:
     resolution: {integrity: sha512-XTFYvNASMe5iPN0719nPrdItC9aU0ssC4v14mH1BCi1u0n1gAocqcujWUrByftZTbLhRtiKRyjYTSIOcr69UVQ==}
 
-  remark-gfm@3.0.1:
-    resolution: {integrity: sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==}
-
   remark-gfm@4.0.1:
     resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
 
@@ -16701,9 +16680,6 @@ packages:
   remark-parse@11.0.0:
     resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
 
-  remark-rehype@10.1.0:
-    resolution: {integrity: sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw==}
-
   remark-rehype@11.1.1:
     resolution: {integrity: sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==}
 
@@ -17543,9 +17519,6 @@ packages:
   style-to-js@1.1.16:
     resolution: {integrity: sha512-/Q6ld50hKYPH3d/r6nr117TZkHR0w0kGGIVfpG9N6D8NymRPM9RqCUv4pRpJ62E5DqOYx2AFpbZMyCPnjQCnOw==}
 
-  style-to-object@0.4.2:
-    resolution: {integrity: sha512-1JGpfPB3lo42ZX8cuPrheZbfQ6kqPPnPHlKMyeRYtfKD+0jG+QsXgXN57O/dvJlzlB2elI6dGmrPnl5VPQFPaA==}
-
   style-to-object@1.0.8:
     resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
 
@@ -31348,8 +31321,6 @@ snapshots:
       hast-util-is-element: 3.0.0
       unist-util-find-after: 5.0.0
 
-  hast-util-whitespace@2.0.1: {}
-
   hast-util-whitespace@3.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -31575,8 +31546,6 @@ snapshots:
 
   ini@4.1.1: {}
 
-  inline-style-parser@0.1.1: {}
-
   inline-style-parser@0.2.4: {}
 
   inline-style-prefixer@7.0.0:
@@ -35629,45 +35598,6 @@ snapshots:
       remark-parse: 11.0.0(supports-color@8.1.1)
       remark-rehype: 11.1.1
       unified: 11.0.5
-      unist-util-visit: 5.0.0
-      vfile: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
-  react-markdown@8.0.7(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1):
-    dependencies:
-      '@types/hast': 2.3.6
-      '@types/prop-types': 15.7.8
-      '@types/react': 18.3.3
-      '@types/unist': 2.0.8
-      comma-separated-tokens: 2.0.3
-      hast-util-whitespace: 2.0.1
-      prop-types: 15.8.1
-      property-information: 6.3.0
-      react: 18.3.1
-      react-is: 18.3.1
-      remark-parse: 10.0.2(supports-color@8.1.1)
-      remark-rehype: 10.1.0
-      space-separated-tokens: 2.0.2
-      style-to-object: 0.4.2
-      unified: 10.1.2
-      unist-util-visit: 4.1.2
-      vfile: 5.3.7
-    transitivePeerDependencies:
-      - supports-color
-
-  react-markdown@9.0.1(@types/react@18.3.3)(react@18.3.1)(supports-color@8.1.1):
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/react': 18.3.3
-      devlop: 1.1.0
-      hast-util-to-jsx-runtime: 2.3.6(supports-color@8.1.1)
-      html-url-attributes: 3.0.0
-      mdast-util-to-hast: 13.2.1
-      react: 18.3.1
-      remark-parse: 11.0.0(supports-color@8.1.1)
-      remark-rehype: 11.1.1
-      unified: 11.0.5
       unist-util-visit: 5.1.0
       vfile: 6.0.3
     transitivePeerDependencies:
@@ -36091,15 +36021,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  remark-gfm@3.0.1(supports-color@8.1.1):
-    dependencies:
-      '@types/mdast': 3.0.15
-      mdast-util-gfm: 2.0.2(supports-color@8.1.1)
-      micromark-extension-gfm: 2.0.3
-      unified: 10.1.2
-    transitivePeerDependencies:
-      - supports-color
-
   remark-gfm@4.0.1(supports-color@8.1.1):
     dependencies:
       '@types/mdast': 4.0.4
@@ -36153,13 +36074,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  remark-rehype@10.1.0:
-    dependencies:
-      '@types/hast': 2.3.6
-      '@types/mdast': 3.0.15
-      mdast-util-to-hast: 12.3.0
-      unified: 10.1.2
-
   remark-rehype@11.1.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -37245,10 +37159,6 @@ snapshots:
     dependencies:
       style-to-object: 1.0.8
 
-  style-to-object@0.4.2:
-    dependencies:
-      inline-style-parser: 0.1.1
-
   style-to-object@1.0.8:
     dependencies:
       inline-style-parser: 0.2.4