feat(command-menu): add styles group linking to shadcn/create (#11052)

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

apps/v4/components/command-menu.tsx

@@ -6,6 +6,7 @@ import { IconArrowRight } from "@tabler/icons-react"
 import { useDocsSearch } from "fumadocs-core/search/client"
 import { CornerDownLeftIcon, SquareDashedIcon } from "lucide-react"
 import { Dialog as DialogPrimitive } from "radix-ui"
+import { encodePreset } from "shadcn/preset"
 
 import { type Color, type ColorPalette } from "@/lib/colors"
 import { trackEvent } from "@/lib/events"
@@ -36,6 +37,7 @@ import {
 } from "@/registry/new-york-v4/ui/dialog"
 import { Separator } from "@/registry/new-york-v4/ui/separator"
 import { Spinner } from "@/registry/new-york-v4/ui/spinner"
+import { STYLES } from "@/registry/styles"
 
 export function CommandMenu({
   tree,
@@ -56,7 +58,7 @@ export function CommandMenu({
   const [open, setOpen] = React.useState(false)
   const [renderDelayedGroups, setRenderDelayedGroups] = React.useState(false)
   const [selectedType, setSelectedType] = React.useState<
-    "color" | "page" | "component" | "block" | null
+    "color" | "page" | "component" | "block" | "style" | null
   >(null)
   const [copyPayload, setCopyPayload] = React.useState("")
 
@@ -208,6 +210,40 @@ export function CommandMenu({
     )
   }, [navItems, runCommand, router])
 
+  const stylesSection = React.useMemo(() => {
+    return (
+      <CommandGroup
+        heading="Styles"
+        className="p-0! **:[[cmdk-group-heading]]:scroll-mt-16 **:[[cmdk-group-heading]]:p-3! **:[[cmdk-group-heading]]:pb-1!"
+      >
+        {STYLES.map((style) => (
+          <CommandMenuItem
+            key={style.name}
+            value={`Style ${style.title} ${style.description}`}
+            keywords={["style", "preset", style.name, style.title]}
+            onHighlight={() => {
+              setSelectedType("style")
+              setCopyPayload("")
+            }}
+            onSelect={() => {
+              runCommand(() =>
+                router.push(
+                  `/create?preset=${encodePreset({ style: style.name })}`
+                )
+              )
+            }}
+          >
+            {style.icon}
+            {style.title}
+            <span className="ml-auto text-xs font-normal text-muted-foreground">
+              Open style in shadcn/create
+            </span>
+          </CommandMenuItem>
+        ))}
+      </CommandGroup>
+    )
+  }, [runCommand, router])
+
   const pageGroupsSection = React.useMemo(() => {
     return tree.children.map((group) => {
       if (group.type !== "folder") {
@@ -425,6 +461,7 @@ export function CommandMenu({
               {query.isLoading ? "Searching..." : "No results found."}
             </CommandEmpty>
             {navItemsSection}
+            {stylesSection}
             {renderDelayedGroups ? (
               <>
                 {pageGroupsSection}
@@ -448,6 +485,7 @@ export function CommandMenu({
               ? "Go to Page"
               : null}
             {selectedType === "color" ? "Copy OKLCH" : null}
+            {selectedType === "style" ? "Open in shadcn/create" : null}
           </div>
           {copyPayload && (
             <>