UI: Fix Banner component z-index

.changeset/rotten-needles-drop.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Fix Banner component z-index

apps/docs/components/preview/index.tsx

@@ -224,8 +224,10 @@ export default {
   banner: (
     <Wrapper>
       <div className="flex flex-col gap-4">
-        <Banner>Be careful, Fumadocs v99 has released</Banner>
-        <Banner id="99">Be careful, this banner can be closed</Banner>
+        <Banner className="z-0">Be careful, Fumadocs v99 has released</Banner>
+        <Banner className="z-0" id="99">
+          Be careful, this banner can be closed
+        </Banner>
       </div>
     </Wrapper>
   ),

packages/ui/src/components/banner.tsx

@@ -25,7 +25,7 @@ export function Banner({
       id={id}
       {...props}
       className={cn(
-        'relative flex h-12 flex-row items-center justify-center bg-fd-secondary px-4 text-center text-sm font-medium',
+        'relative z-40 flex h-12 flex-row items-center justify-center bg-fd-secondary px-4 text-center text-sm font-medium',
         !open && 'hidden',
         props.className,
       )}

packages/ui/src/components/layout/nav.tsx

@@ -51,7 +51,7 @@ export function NavBox({
     <header
       {...props}
       className={cn(
-        'sticky top-0 z-50 border-b transition-colors',
+        'sticky top-0 z-40 border-b transition-colors',
         transparent
           ? 'border-transparent'
           : 'border-fd-foreground/10 bg-fd-background/60 backdrop-blur-md',