diff --git a/.changeset/calm-hounds-enjoy.md b/.changeset/calm-hounds-enjoy.md
new file mode 100644
index 000000000..40c31cf4a
--- /dev/null
+++ b/.changeset/calm-hounds-enjoy.md
@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Fix banner preview
diff --git a/apps/docs/app/(home)/showcase/page.tsx b/apps/docs/app/(home)/showcase/page.tsx
index 708b7990e..efc03e6e2 100644
--- a/apps/docs/app/(home)/showcase/page.tsx
+++ b/apps/docs/app/(home)/showcase/page.tsx
@@ -21,6 +21,7 @@ import OpenPanel from '@/public/showcases/openpanel.png';
 import Supastarter from '@/public/showcases/supastarter.png';
 import BetterAuth from '@/public/showcases/better-auth.png';
 import LaunchFast from '@/public/showcases/launchfast.png';
+import ArkType from '@/public/showcases/arktype.png';
 
 export const metadata = createMetadata({
   title: 'Showcase',
@@ -54,9 +55,9 @@ export default function Showcase(): React.ReactElement {
       url: 'https://million.dev',
     },
     {
-      image: Yeecord,
-      name: 'Yeecord Docs',
-      url: 'https://yeecord.com',
+      image: BetterAuth,
+      name: 'Better Auth',
+      url: 'https://better-auth.com',
     },
     { image: Nuqs, name: 'nuqs', url: 'https://nuqs.47ng.com' },
     {
@@ -70,9 +71,9 @@ export default function Showcase(): React.ReactElement {
       url: 'https://docs.hiro.so/stacks',
     },
     {
-      image: BetterAuth,
-      name: 'Better Auth',
-      url: 'https://better-auth.com',
+      image: ArkType,
+      name: 'Arktype',
+      url: 'https://arktype.io',
     },
     {
       image: OpenPanel,
@@ -89,6 +90,11 @@ export default function Showcase(): React.ReactElement {
       name: 'Sunar',
       url: 'https://sunar.js.org',
     },
+    {
+      image: Yeecord,
+      name: 'Yeecord Docs',
+      url: 'https://yeecord.com',
+    },
     {
       image: Supastarter,
       name: 'SupaStarter',
diff --git a/apps/docs/public/showcases/arktype.png b/apps/docs/public/showcases/arktype.png
new file mode 100644
index 000000000..0ba86e1a0
Binary files /dev/null and b/apps/docs/public/showcases/arktype.png differ
diff --git a/apps/docs/public/showcases/better-auth.png b/apps/docs/public/showcases/better-auth.png
index 7ddd4a5be..9468966cf 100644
Binary files a/apps/docs/public/showcases/better-auth.png and b/apps/docs/public/showcases/better-auth.png differ
diff --git a/packages/ui/src/components/banner.tsx b/packages/ui/src/components/banner.tsx
index 6129419c9..801820328 100644
--- a/packages/ui/src/components/banner.tsx
+++ b/packages/ui/src/components/banner.tsx
@@ -48,11 +48,14 @@ export function Banner({
       id={id}
       {...props}
       className={cn(
-        'sticky top-0 z-40 flex h-[var(--fd-banner-height)] flex-row items-center justify-center bg-fd-secondary px-4 text-center text-sm font-medium',
+        'sticky top-0 z-40 flex flex-row items-center justify-center bg-fd-secondary px-4 text-center text-sm font-medium',
         variant === 'rainbow' && 'bg-fd-background',
         !open && 'hidden',
         props.className,
       )}
+      style={{
+        height,
+      }}
     >
       {changeLayout && open ? (
         <style>