UI: Fix banner preview

.changeset/calm-hounds-enjoy.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Fix banner preview

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',

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>