From b5b9d99a407215ba4166034d328877fa6b74b959 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Mon, 19 Oct 2026 20:58:10 +0530
Subject: [PATCH 1/2] Add a panel layout to CliCommand

A borderless strip with an Install heading and the package manager picker
beside it, and the command wrapping on a plate instead of scrolling, for
narrow spots. Copies record which layout they came from.
---
 components/cli-command.tsx | 127 ++++++++++++++++++++++++-------------
 1 file changed, 82 insertions(+), 45 deletions(-)

diff --git a/components/cli-command.tsx b/components/cli-command.tsx
index e6ffc83..5dec508 100644
--- a/components/cli-command.tsx
+++ b/components/cli-command.tsx
@@ -108,6 +108,12 @@ export interface CliCommandProps {
   bun?: string
   /** Initial package manager when nothing is stored yet */
   defaultManager?: PackageManager
+  /**
+   * `card` (default) is the framed block for docs pages. `panel` is the
+   * borderless strip at the foot of the props panel, where the command
+   * wraps instead of scrolling.
+   */
+  variant?: "card" | "panel"
   className?: string
 }
 
@@ -126,6 +132,7 @@ export function CliCommand({
   yarn,
   bun,
   defaultManager = "pnpm",
+  variant = "card",
   className,
 }: CliCommandProps) {
   const manager = useSyncExternalStore(
@@ -134,8 +141,7 @@ export function CliCommand({
     () => defaultManager
   )
 
-  const resolvedCommand =
-    command ?? (item ? commandForItem(item, github) : "")
+  const resolvedCommand = command ?? (item ? commandForItem(item, github) : "")
 
   const fromCommand = resolvedCommand ? buildCommands(resolvedCommand) : null
   const commands: Record<PackageManager, string> = {
@@ -159,6 +165,78 @@ export function CliCommand({
     window.dispatchEvent(new Event(MANAGER_EVENT))
   }
 
+  const managerSelect = (
+    <div className="flex items-center gap-2">
+      <span
+        className="flex size-5 items-center justify-center"
+        aria-hidden
+        title={active.label}
+      >
+        <ActiveIcon className={cn("size-4", active.colorClass)} />
+      </span>
+      <Select
+        value={manager}
+        onValueChange={onManagerChange}
+        items={SELECT_ITEMS}
+      >
+        <SelectTrigger
+          size="sm"
+          aria-label="Package manager"
+          className="h-auto min-h-0 w-auto justify-start gap-0.5 border-transparent bg-transparent px-0 py-0 text-sm font-medium text-foreground/90 shadow-none hover:bg-transparent focus-visible:border-transparent focus-visible:ring-0"
+        >
+          <SelectValue className="flex-none" />
+        </SelectTrigger>
+        <SelectContent align="start" alignItemWithTrigger={false}>
+          <SelectGroup>
+            {PACKAGE_MANAGERS.map(({ value, label }) => (
+              <SelectItem key={value} value={value}>
+                {label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+
+  const copyButton = (
+    <CopyButton
+      text={activeCommand}
+      label="Copy command"
+      errorMessage="Couldn’t copy command"
+      onCopied={() =>
+        trackEvent("cli_command_copied", {
+          package_manager: manager,
+          source: github ? "github" : "registry",
+          placement: variant,
+          ...(item ? { item } : {}),
+        })
+      }
+    />
+  )
+
+  if (variant === "panel") {
+    return (
+      <figure
+        data-slot="cli-command"
+        className={cn("not-prose m-0 px-3 pt-1 pb-3", className)}
+      >
+        <figcaption className="flex h-10 items-center justify-between gap-3 px-3">
+          <span className="text-[13px] font-medium text-foreground">
+            Install
+          </span>
+          {managerSelect}
+        </figcaption>
+        <div className="flex items-start gap-2 rounded-lg bg-plate py-1.5 pr-1.5 pl-3">
+          <pre className="min-w-0 flex-1 py-1 font-mono text-[12.5px] leading-5 break-words whitespace-pre-wrap text-foreground">
+            <code>{activeCommand}</code>
+          </pre>
+          {copyButton}
+        </div>
+      </figure>
+    )
+  }
+
   return (
     <figure
       data-slot="cli-command"
@@ -168,55 +246,14 @@ export function CliCommand({
       )}
     >
       <div className="flex h-10 items-center justify-between gap-3 border-b px-3.5">
-        <div className="flex items-center gap-2">
-          <span
-            className="flex size-5 items-center justify-center"
-            aria-hidden
-            title={active.label}
-          >
-            <ActiveIcon className={cn("size-4", active.colorClass)} />
-          </span>
-          <Select
-            value={manager}
-            onValueChange={onManagerChange}
-            items={SELECT_ITEMS}
-          >
-            <SelectTrigger
-              size="sm"
-              aria-label="Package manager"
-              className="h-auto min-h-0 w-auto justify-start gap-0.5 border-transparent bg-transparent px-0 py-0 text-sm font-medium text-foreground/90 shadow-none hover:bg-transparent focus-visible:border-transparent focus-visible:ring-0"
-            >
-              <SelectValue className="flex-none" />
-            </SelectTrigger>
-            <SelectContent align="start" alignItemWithTrigger={false}>
-              <SelectGroup>
-                {PACKAGE_MANAGERS.map(({ value, label }) => (
-                  <SelectItem key={value} value={value}>
-                    {label}
-                  </SelectItem>
-                ))}
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </div>
+        {managerSelect}
       </div>
 
       <div className="flex items-center gap-2 py-1.5 pr-1.5 pl-3.5">
         <pre className="min-w-0 flex-1 overflow-x-auto py-1 font-mono text-[13px] leading-6 text-foreground">
           <code>{activeCommand}</code>
         </pre>
-        <CopyButton
-          text={activeCommand}
-          label="Copy command"
-          errorMessage="Couldn’t copy command"
-          onCopied={() =>
-            trackEvent("cli_command_copied", {
-              package_manager: manager,
-              source: github ? "github" : "registry",
-              ...(item ? { item } : {}),
-            })
-          }
-        />
+        {copyButton}
       </div>
     </figure>
   )

From c6a23e1bedb73b9ec4988149c022d7d819b89ec1 Mon Sep 17 00:00:00 2001
From: radiumcoders <radiumcoders@gmail.com>
Date: Mon, 19 Oct 2026 20:58:10 +0530
Subject: [PATCH 2/2] Pin the install command to the foot of the props panel

On component pages the panel now ends in the shadcn add command for that
component, held at the bottom while the props scroll, so it's in reach the
moment the props look right.
---
 app/docs/[[...slug]]/page.tsx |  2 +-
 components/docs-stage.tsx     | 27 +++++++++++++++++++++++----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/app/docs/[[...slug]]/page.tsx b/app/docs/[[...slug]]/page.tsx
index 2a1cde0..005e9b5 100644
--- a/app/docs/[[...slug]]/page.tsx
+++ b/app/docs/[[...slug]]/page.tsx
@@ -83,7 +83,7 @@ export default async function Page(props: {
   // The outline rides inside the sheet, beside the article.
   if (component) {
     return (
-      <DocsStage>
+      <DocsStage item={params.slug?.at(-1)}>
         {/* Same gutter and radius as the stage above it. */}
         <div className="px-2 md:px-3">
           <div
diff --git a/components/docs-stage.tsx b/components/docs-stage.tsx
index f6d53fe..366e694 100644
--- a/components/docs-stage.tsx
+++ b/components/docs-stage.tsx
@@ -2,6 +2,7 @@
 
 import { useCallback, useMemo, useState, type ReactNode } from "react"
 
+import { CliCommand } from "@/components/cli-command"
 import { PreviewStageContext } from "@/components/component-preview"
 
 /**
@@ -9,8 +10,17 @@ import { PreviewStageContext } from "@/components/component-preview"
  * top, edge to edge, with the props in a panel beside it, so you can tune
  * the component while you watch it. The page (`children`) follows below.
  * The page's ComponentPreview and ComponentControls move themselves in.
+ * With an `item`, the panel ends in its install command, so it's in reach
+ * the moment the props look right.
  */
-export function DocsStage({ children }: { children: ReactNode }) {
+export function DocsStage({
+  children,
+  item,
+}: {
+  children: ReactNode
+  /** Registry item name for the install command, e.g. `"folio"`. */
+  item?: string
+}) {
   const [slot, setSlot] = useState<HTMLElement | null>(null)
   const [controlsSlot, setControlsSlot] = useState<HTMLElement | null>(null)
   const [hasControls, setHasControls] = useState(false)
@@ -43,11 +53,20 @@ export function DocsStage({ children }: { children: ReactNode }) {
           />
         </div>
         <aside
-          ref={setControlsSlot}
           aria-label="Props"
           hidden={!hasControls}
-          className="overflow-hidden rounded-[1.25rem] bg-sheet [--background:var(--sheet)] xl:w-80 xl:shrink-0 xl:overflow-y-auto 2xl:w-[22rem]"
-        />
+          className="flex flex-col overflow-hidden rounded-[1.25rem] bg-sheet [--background:var(--sheet)] xl:w-80 xl:shrink-0 xl:overflow-y-auto 2xl:w-[22rem]"
+        >
+          <div ref={setControlsSlot} />
+          {item ? (
+            // Pinned to the foot of the panel while the props scroll.
+            <CliCommand
+              item={item}
+              variant="panel"
+              className="mt-auto border-t border-border/60 bg-sheet/90 backdrop-blur-md xl:sticky xl:bottom-0"
+            />
+          ) : null}
+        </aside>
       </div>
       {children}
     </PreviewStageContext.Provider>