From 3981cd0496ba1ed046ff1d4a0b42a5aeb25bf618 Mon Sep 17 00:00:00 2001
From: Dominik Ferber <dominik.ferber@gmail.com>
Date: Thu, 9 Jul 2026 14:27:58 +0300
Subject: [PATCH 1/5] add Vercel Flags banner

---
 apps/docs/app/[lang]/home/[code]/layout.tsx  | 19 +++++++++++++++----
 apps/docs/app/[lang]/home/[code]/page.tsx    | 18 +++++++++---------
 apps/docs/app/[lang]/home/[code]/toggles.tsx |  4 +---
 apps/docs/flags.ts                           |  4 ++--
 4 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/apps/docs/app/[lang]/home/[code]/layout.tsx b/apps/docs/app/[lang]/home/[code]/layout.tsx
index 10ce2457..1bd91e39 100644
--- a/apps/docs/app/[lang]/home/[code]/layout.tsx
+++ b/apps/docs/app/[lang]/home/[code]/layout.tsx
@@ -1,6 +1,8 @@
 import { HomeLayout } from '@/components/geistdocs/home-layout';
 import { enableBannerFlag, rootFlags } from '@/flags';
 import { source } from '@/lib/geistdocs/source';
+import { ArrowRight } from 'lucide-react';
+import Link from 'next/link';
 
 export default async function Layout({
   children,
@@ -11,10 +13,19 @@ export default async function Layout({
   return (
     <>
       {bannerFlag ? (
-        <div className="text-pretty bg-gray-1000 py-3 text-center text-background-100 text-xs md:text-sm">
-          Flags SDK is the simplest way to use feature flags in Next.js and
-          SvelteKit.
-        </div>
+        <Link
+          href="/providers/vercel"
+          className="group flex items-center justify-center gap-x-2 gap-y-1 bg-gray-1000 px-4 py-3 text-center text-background-100 text-xs md:text-sm"
+        >
+          <span className="inline-flex shrink-0 items-center rounded-full bg-background-100/15 px-2 py-0.5 font-medium text-[10px] uppercase tracking-wide md:text-[11px]">
+            New
+          </span>
+          <span className="text-pretty">
+            Vercel Flags is now available — connect your flags with the{' '}
+            <code className="font-mono">@flags-sdk/vercel</code> adapter.
+          </span>
+          <ArrowRight className="hidden size-3.5 shrink-0 transition-transform group-hover:translate-x-0.5 sm:inline-block" />
+        </Link>
       ) : null}
       <HomeLayout tree={source.pageTree[lang]}>
         <div className="bg-background-200 pt-0 pb-32">{children}</div>
diff --git a/apps/docs/app/[lang]/home/[code]/page.tsx b/apps/docs/app/[lang]/home/[code]/page.tsx
index 8cc85f18..9d7272ec 100644
--- a/apps/docs/app/[lang]/home/[code]/page.tsx
+++ b/apps/docs/app/[lang]/home/[code]/page.tsx
@@ -121,10 +121,11 @@ export default async function HomePage({
             </div>
             <div className="divide-y">
               <FlagToggle
-                value={ditheredHeroFlag}
-                flagKey={enableDitheredHeroFlag.key}
-                label={enableDitheredHeroFlag.key}
-                description={enableDitheredHeroFlag.description}
+                value={bannerFlag}
+                flagKey={enableBannerFlag.key}
+                label={enableBannerFlag.key}
+                description={enableBannerFlag.description}
+                scroll
               />
               <FlagSelect
                 value={heroTextFlag}
@@ -134,11 +135,10 @@ export default async function HomePage({
                 options={enableHeroTextFlag.options}
               />
               <FlagToggle
-                value={bannerFlag}
-                flagKey={enableBannerFlag.key}
-                label={enableBannerFlag.key}
-                description={enableBannerFlag.description}
-                scroll
+                value={ditheredHeroFlag}
+                flagKey={enableDitheredHeroFlag.key}
+                label={enableDitheredHeroFlag.key}
+                description={enableDitheredHeroFlag.description}
               />
             </div>
           </div>
diff --git a/apps/docs/app/[lang]/home/[code]/toggles.tsx b/apps/docs/app/[lang]/home/[code]/toggles.tsx
index cc81b9b8..43a10880 100644
--- a/apps/docs/app/[lang]/home/[code]/toggles.tsx
+++ b/apps/docs/app/[lang]/home/[code]/toggles.tsx
@@ -89,9 +89,7 @@ export const FlagToggle = ({
         id={flagKey}
         checked={override === null ? value : override}
         onCheckedChange={(nextValue) => {
-          document.cookie = nextValue
-            ? `${flagKey}=1; max-age=${oneYearInSeconds}; path=/`
-            : `${flagKey}=; max-age=0; path=/`;
+          document.cookie =  `${flagKey}=${nextValue ? "1" : "0"}; max-age=${oneYearInSeconds}; path=/`
           sessionStorage.setItem('toast', message(flagKey));
           setOverride(nextValue);
           initSlowConnectionWarning();
diff --git a/apps/docs/flags.ts b/apps/docs/flags.ts
index cf8090db..b01bece5 100644
--- a/apps/docs/flags.ts
+++ b/apps/docs/flags.ts
@@ -6,7 +6,7 @@ export const enableBannerFlag = flag({
   options: [false, true],
   decide({ cookies }) {
     const on = cookies.get(this.key)?.value;
-    return on !== undefined;
+    return on !== "0"; // default on
   },
 });
 
@@ -16,7 +16,7 @@ export const enableDitheredHeroFlag = flag({
   options: [false, true],
   decide({ cookies }) {
     const on = cookies.get(this.key)?.value;
-    return on !== undefined;
+    return on === "1"; // default off
   },
 });
 

From 287dc1eb670aac46307799589c7a83d3c3c40dce Mon Sep 17 00:00:00 2001
From: Dominik Ferber <dominik.ferber@gmail.com>
Date: Thu, 9 Jul 2026 14:30:44 +0300
Subject: [PATCH 2/5] change Learn more links

---
 apps/docs/content/docs/providers/vercel.mdx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/docs/content/docs/providers/vercel.mdx b/apps/docs/content/docs/providers/vercel.mdx
index b7da1271..dde2aa2b 100644
--- a/apps/docs/content/docs/providers/vercel.mdx
+++ b/apps/docs/content/docs/providers/vercel.mdx
@@ -8,12 +8,12 @@ The `@flags-sdk/vercel` package connects the Flags SDK to Vercel's own feature f
   Connect my existing Flags SDK setup to Vercel Flags. Install `@flags-sdk/vercel`, pull the `FLAGS` and `FLAGS_SECRET` environment variables, update my flag declarations to use `vercelAdapter`, add or reuse an `identify` function for targeting entities, create the Flags Explorer discovery endpoint, and run the relevant type checks or build when finished.
 </CopyPrompt>
 
-<LearnMore icon="arrow" href="https://vercel.com/docs/flags/vercel-flags" target="_blank">
-  Learn more about Vercel Flags
+<LearnMore icon="arrow" href="https://vercel.com/blog/vercel-flags-platform-native-feature-flags" target="_blank">
+  Vercel Flags is now available — read the announcement
 </LearnMore>
 
-<LearnMore icon="arrow" href="/providers">
-  Learn more about Adapters
+<LearnMore icon="arrow" href="https://vercel.com/docs/flags/vercel-flags" target="_blank">
+  Learn more about Vercel Flags
 </LearnMore>
 
 ## Installation

From f0d92d50c326bfe5a1922dd22e37485aff550442 Mon Sep 17 00:00:00 2001
From: Dominik Ferber <dominik.ferber@gmail.com>
Date: Thu, 9 Jul 2026 14:54:31 +0300
Subject: [PATCH 3/5] format

---
 apps/docs/app/[lang]/home/[code]/layout.tsx  | 4 ++--
 apps/docs/app/[lang]/home/[code]/toggles.tsx | 2 +-
 apps/docs/flags.ts                           | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/docs/app/[lang]/home/[code]/layout.tsx b/apps/docs/app/[lang]/home/[code]/layout.tsx
index 1bd91e39..0904f4ba 100644
--- a/apps/docs/app/[lang]/home/[code]/layout.tsx
+++ b/apps/docs/app/[lang]/home/[code]/layout.tsx
@@ -1,8 +1,8 @@
+import { ArrowRight } from 'lucide-react';
+import Link from 'next/link';
 import { HomeLayout } from '@/components/geistdocs/home-layout';
 import { enableBannerFlag, rootFlags } from '@/flags';
 import { source } from '@/lib/geistdocs/source';
-import { ArrowRight } from 'lucide-react';
-import Link from 'next/link';
 
 export default async function Layout({
   children,
diff --git a/apps/docs/app/[lang]/home/[code]/toggles.tsx b/apps/docs/app/[lang]/home/[code]/toggles.tsx
index 43a10880..df4e5a01 100644
--- a/apps/docs/app/[lang]/home/[code]/toggles.tsx
+++ b/apps/docs/app/[lang]/home/[code]/toggles.tsx
@@ -89,7 +89,7 @@ export const FlagToggle = ({
         id={flagKey}
         checked={override === null ? value : override}
         onCheckedChange={(nextValue) => {
-          document.cookie =  `${flagKey}=${nextValue ? "1" : "0"}; max-age=${oneYearInSeconds}; path=/`
+          document.cookie = `${flagKey}=${nextValue ? '1' : '0'}; max-age=${oneYearInSeconds}; path=/`;
           sessionStorage.setItem('toast', message(flagKey));
           setOverride(nextValue);
           initSlowConnectionWarning();
diff --git a/apps/docs/flags.ts b/apps/docs/flags.ts
index b01bece5..13b099b9 100644
--- a/apps/docs/flags.ts
+++ b/apps/docs/flags.ts
@@ -6,7 +6,7 @@ export const enableBannerFlag = flag({
   options: [false, true],
   decide({ cookies }) {
     const on = cookies.get(this.key)?.value;
-    return on !== "0"; // default on
+    return on !== '0'; // default on
   },
 });
 
@@ -16,7 +16,7 @@ export const enableDitheredHeroFlag = flag({
   options: [false, true],
   decide({ cookies }) {
     const on = cookies.get(this.key)?.value;
-    return on === "1"; // default off
+    return on === '1'; // default off
   },
 });
 

From b235f4f81fa137338776632fbf7a088e6c4e7cfe Mon Sep 17 00:00:00 2001
From: Dominik Ferber <dominik.ferber@gmail.com>
Date: Thu, 9 Jul 2026 14:56:22 +0300
Subject: [PATCH 4/5] fix

---
 apps/docs/content/docs/providers/vercel.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/content/docs/providers/vercel.mdx b/apps/docs/content/docs/providers/vercel.mdx
index dde2aa2b..a32d133e 100644
--- a/apps/docs/content/docs/providers/vercel.mdx
+++ b/apps/docs/content/docs/providers/vercel.mdx
@@ -2,7 +2,7 @@
 title: 'Vercel'
 ---
 
-The `@flags-sdk/vercel` package connects the Flags SDK to Vercel's own feature flags platform called Vercel Flags, allowing you to manage flags directly in your Vercel projects.
+Vercel Flags is a feature flag provider built into Vercel's platform, allowing you to manage flags directly in your Vercel projects. The `@flags-sdk/vercel` package connects the Flags SDK to Vercel Flags.
 
 <CopyPrompt text="Connect my existing Flags SDK setup to Vercel Flags. Install `@flags-sdk/vercel`, pull the `FLAGS` and `FLAGS_SECRET` environment variables, update my flag declarations to use `vercelAdapter`, add or reuse an `identify` function for targeting entities, create the Flags Explorer discovery endpoint, and run the relevant type checks or build when finished.">
   Connect my existing Flags SDK setup to Vercel Flags. Install `@flags-sdk/vercel`, pull the `FLAGS` and `FLAGS_SECRET` environment variables, update my flag declarations to use `vercelAdapter`, add or reuse an `identify` function for targeting entities, create the Flags Explorer discovery endpoint, and run the relevant type checks or build when finished.

From 1b737ac86872e5b8423d444caf92c6eeae1c00f1 Mon Sep 17 00:00:00 2001
From: Dominik Ferber <dominik.ferber@gmail.com>
Date: Thu, 9 Jul 2026 14:56:45 +0300
Subject: [PATCH 5/5] change title

---
 apps/docs/content/docs/providers/vercel.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/content/docs/providers/vercel.mdx b/apps/docs/content/docs/providers/vercel.mdx
index a32d133e..a8de3155 100644
--- a/apps/docs/content/docs/providers/vercel.mdx
+++ b/apps/docs/content/docs/providers/vercel.mdx
@@ -1,5 +1,5 @@
 ---
-title: 'Vercel'
+title: 'Vercel Flags'
 ---
 
 Vercel Flags is a feature flag provider built into Vercel's platform, allowing you to manage flags directly in your Vercel projects. The `@flags-sdk/vercel` package connects the Flags SDK to Vercel Flags.