fix(docs): allow customizable preview stage height and expand navbar stage

content/docs/components/navigation/navbar.mdx

@@ -7,7 +7,7 @@ import { PreviewComponents } from "@/components/docs/preview-components";
 import { NavBarDemo } from "@/components/docs/navbar-demo";
 import { Tabs, Tab } from "fumadocs-ui/components/tabs";
 
-<PreviewComponents registryName="navbar" fullBleed>
+<PreviewComponents registryName="navbar" fullBleed stageClassName="min-h-[26rem]">
   <NavBarDemo />
 </PreviewComponents>
 

src/components/docs/preview-card.tsx

@@ -13,6 +13,8 @@ interface PreviewCardProps {
   registryName: string;
   /** Skip the centered padding — for components that span the full width, like NavBar. */
   fullBleed?: boolean;
+  /** Additional classes for the stage container. */
+  stageClassName?: string;
   children: ReactNode;
 }
 
@@ -42,7 +44,12 @@ function openWith(target: "v0" | "lovable" | "bolt", registryName: string) {
   window.open(url, "_blank", "noopener,noreferrer");
 }
 
-export function PreviewCard({ registryName, fullBleed, children }: PreviewCardProps) {
+export function PreviewCard({
+  registryName,
+  fullBleed,
+  stageClassName,
+  children,
+}: PreviewCardProps) {
   const { theme, dark, setTheme, setDark } = usePreviewPrefs();
   const [replayKey, setReplayKey] = useState(0);
   const [themeOpen, setThemeOpen] = useState(false);
@@ -157,9 +164,14 @@ export function PreviewCard({ registryName, fullBleed, children }: PreviewCardPr
       >
         <div key={replayKey}>
           {fullBleed ? (
-            <div className="min-h-[340px]">{children}</div>
+            <div className={cn("min-h-[22rem]", stageClassName)}>{children}</div>
           ) : (
-            <div className="flex min-h-[420px] flex-col items-center justify-center gap-8 px-4 py-14 sm:px-10">
+            <div
+              className={cn(
+                "flex min-h-[420px] flex-col items-center justify-center gap-8 px-4 py-14 sm:px-10",
+                stageClassName,
+              )}
+            >
               {children}
             </div>
           )}

src/components/docs/preview-components.tsx

@@ -14,6 +14,8 @@ interface PreviewComponentsProps {
   demo?: string;
   /** Skip the centered padding around the demo — for full-width components. */
   fullBleed?: boolean;
+  /** Additional classes for the preview stage container. */
+  stageClassName?: string;
   children: React.ReactNode;
 }
 
@@ -29,6 +31,7 @@ export function PreviewComponents({
   registryName,
   demo,
   fullBleed,
+  stageClassName,
   children,
 }: PreviewComponentsProps) {
   const path = demo ?? `components/docs/${registryName}-demo.tsx`;
@@ -39,7 +42,11 @@ export function PreviewComponents({
   return (
     <Tabs items={["Preview", "Code"]} className="border-none bg-transparent">
       <Tab value="Preview" className="mt-3 border-none bg-transparent p-0">
-        <PreviewCard registryName={registryName} fullBleed={fullBleed}>
+        <PreviewCard
+          registryName={registryName}
+          fullBleed={fullBleed}
+          stageClassName={stageClassName}
+        >
           {children}
         </PreviewCard>
       </Tab>