Merge branch 'main' into feat/added-shadcn-dashboard

2026-07-09 06:55:07 +00:00 · 2026-04-08 18:15:55 +05:30
parent 6b5aa16668 e9546e87ff
commit 4bdaf48f9b
37 changed files with 2023 additions and 279 deletions
--- a/apps/v4/app/(app)/create/components/copy-preset.tsx
+++ b/apps/v4/app/(app)/create/components/copy-preset.tsx
@@ -10,6 +10,7 @@ import { usePresetCode } from "@/app/(app)/create/hooks/use-design-system"
 export function CopyPreset({ className }: React.ComponentProps<typeof Button>) {
  const presetCode = usePresetCode()
  const [hasCopied, setHasCopied] = React.useState(false)
+  const label = hasCopied ? "Copied" : `--preset ${presetCode}`

  React.useEffect(() => {
    if (hasCopied) {
@@ -32,12 +33,13 @@ export function CopyPreset({ className }: React.ComponentProps<typeof Button>) {
    <Button
      variant="outline"
      onClick={handleCopy}
+      title={label}
      className={cn(
        "touch-manipulation bg-transparent! px-2! py-0! text-sm! transition-none select-none hover:bg-muted! pointer-coarse:h-10!",
        className
      )}
    >
-      <span>{hasCopied ? "Copied" : `--preset ${presetCode}`}</span>
+      <span className="block min-w-0 truncate">{label}</span>
    </Button>
  )
 }
--- a/apps/v4/app/(app)/create/components/customizer.tsx
+++ b/apps/v4/app/(app)/create/components/customizer.tsx
@@ -23,12 +23,12 @@ import { FontPicker } from "@/app/(app)/create/components/font-picker"
 import { IconLibraryPicker } from "@/app/(app)/create/components/icon-library-picker"
 import { MainMenu } from "@/app/(app)/create/components/main-menu"
 import { MenuColorPicker } from "@/app/(app)/create/components/menu-picker"
+import { OpenPreset } from "@/app/(app)/create/components/open-preset"
 import { RadiusPicker } from "@/app/(app)/create/components/radius-picker"
 import { RandomButton } from "@/app/(app)/create/components/random-button"
 import { ResetDialog } from "@/app/(app)/create/components/reset-button"
 import { StylePicker } from "@/app/(app)/create/components/style-picker"
 import { ThemePicker } from "@/app/(app)/create/components/theme-picker"
-import { V0Button } from "@/app/(app)/create/components/v0-button"
 import { FONT_HEADING_OPTIONS, FONTS } from "@/app/(app)/create/lib/fonts"
 import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"

@@ -102,8 +102,12 @@ export function Customizer({
        </FieldGroup>
      </CardContent>
      <CardFooter className="flex min-w-0 gap-2 md:flex-col md:rounded-b-none md:**:[button,a]:w-full">
-        <CopyPreset className="flex-1 md:flex-none" />
-        <RandomButton className="flex-1 md:flex-none" />
+        <CopyPreset className="min-w-0 flex-1 md:flex-none" />
+        <OpenPreset
+          className="max-w-20 min-w-0 flex-1 sm:max-w-none md:flex-none"
+          label={isMobile ? "Open" : "Open Preset"}
+        />
+        <RandomButton className="max-w-20 min-w-0 flex-1 sm:max-w-none md:flex-none" />
        <ActionMenu itemsByBase={itemsByBase} />
        <ResetDialog />
      </CardFooter>
--- a/apps/v4/app/(app)/create/components/main-menu.tsx
+++ b/apps/v4/app/(app)/create/components/main-menu.tsx
@@ -17,6 +17,7 @@ import {
 } from "@/app/(app)/create/components/picker"
 import { useActionMenuTrigger } from "@/app/(app)/create/hooks/use-action-menu"
 import { useHistory } from "@/app/(app)/create/hooks/use-history"
+import { useOpenPresetTrigger } from "@/app/(app)/create/hooks/use-open-preset"
 import { useRandom } from "@/app/(app)/create/hooks/use-random"
 import { useReset } from "@/app/(app)/create/hooks/use-reset"
 import { useThemeToggle } from "@/app/(app)/create/hooks/use-theme-toggle"
@@ -27,6 +28,7 @@ export function MainMenu({ className }: React.ComponentProps<typeof Button>) {
  const [isMac, setIsMac] = React.useState(false)
  const { canGoBack, canGoForward, goBack, goForward } = useHistory()
  const { openActionMenu } = useActionMenuTrigger()
+  const { openPreset } = useOpenPresetTrigger()
  const { randomize } = useRandom()
  const { toggleTheme } = useThemeToggle()
  const { setShowResetDialog } = useReset()
@@ -55,6 +57,9 @@ export function MainMenu({ className }: React.ComponentProps<typeof Button>) {
              Navigate...
              <PickerShortcut>{isMac ? "⌘P" : "Ctrl+P"}</PickerShortcut>
            </PickerItem>
+            <PickerItem onClick={openPreset}>
+              Open Preset... <PickerShortcut>O</PickerShortcut>
+            </PickerItem>
            <PickerItem onClick={randomize}>
              Shuffle <PickerShortcut>R</PickerShortcut>
            </PickerItem>
--- a/apps/v4/app/(app)/create/components/open-preset.tsx
+++ b/apps/v4/app/(app)/create/components/open-preset.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import Script from "next/script"
+
+import { cn } from "@/lib/utils"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { Button } from "@/styles/base-nova/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/styles/base-nova/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/styles/base-nova/ui/drawer"
+import { Field, FieldContent, FieldLabel } from "@/styles/base-nova/ui/field"
+import { Input } from "@/styles/base-nova/ui/input"
+import {
+  OPEN_PRESET_FORWARD_TYPE,
+  useOpenPreset,
+} from "@/app/(app)/create/hooks/use-open-preset"
+import { parsePresetInput } from "@/app/(app)/create/lib/parse-preset-input"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+const PRESET_EXAMPLE = "b2D0wqNxT"
+const PRESET_TITLE = "Open Preset"
+const PRESET_DESCRIPTION = "Paste a preset code to load a saved configuration."
+
+export function OpenPreset({
+  className,
+  label = "Open Preset",
+}: React.ComponentProps<typeof Button> & {
+  label?: string
+}) {
+  const [input, setInput] = React.useState("")
+  const [, setParams] = useDesignSystemSearchParams()
+  const isMobile = useIsMobile()
+  const { open, setOpen } = useOpenPreset()
+
+  const nextPreset = React.useMemo(() => parsePresetInput(input), [input])
+  const isInvalid = input.trim().length > 0 && nextPreset === null
+
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean) => {
+      setOpen(nextOpen)
+
+      if (!nextOpen) {
+        setInput("")
+      }
+    },
+    [setOpen]
+  )
+
+  const handleSubmit = React.useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault()
+
+      if (!nextPreset) {
+        return
+      }
+
+      setParams({ preset: nextPreset })
+      handleOpenChange(false)
+    },
+    [handleOpenChange, nextPreset, setParams]
+  )
+
+  const triggerClassName = cn(
+    "touch-manipulation bg-transparent! px-2! py-0! text-sm! transition-none select-none hover:bg-muted! pointer-coarse:h-10!",
+    className
+  )
+
+  const desktopTrigger = (
+    <Button variant="outline" className={triggerClassName} />
+  )
+
+  const fields = (
+    <Field data-invalid={isInvalid || undefined}>
+      <FieldLabel htmlFor="preset-code" className="sr-only">
+        Preset code
+      </FieldLabel>
+      <FieldContent>
+        <Input
+          id="preset-code"
+          value={input}
+          onChange={(event) => setInput(event.target.value)}
+          placeholder={`${PRESET_EXAMPLE} or --preset ${PRESET_EXAMPLE}`}
+          autoCapitalize="none"
+          autoCorrect="off"
+          spellCheck={false}
+          aria-invalid={isInvalid}
+          className="h-10 md:h-8"
+        />
+      </FieldContent>
+    </Field>
+  )
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={handleOpenChange}>
+        <DrawerTrigger asChild>
+          <Button variant="outline" className={triggerClassName}>
+            {label}
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent className="dark rounded-t-2xl!">
+          <DrawerHeader>
+            <DrawerTitle className="text-xl">{PRESET_TITLE}</DrawerTitle>
+            <DrawerDescription>{PRESET_DESCRIPTION}</DrawerDescription>
+          </DrawerHeader>
+          <form onSubmit={handleSubmit}>
+            <div className="px-4 py-2">{fields}</div>
+            <DrawerFooter>
+              <Button type="submit" className="h-10" disabled={!nextPreset}>
+                Open
+              </Button>
+              <DrawerClose asChild>
+                <Button variant="outline" type="button" className="h-10">
+                  Cancel
+                </Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </form>
+        </DrawerContent>
+      </Drawer>
+    )
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger render={desktopTrigger}>{label}</DialogTrigger>
+      <DialogContent className="dark">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>{PRESET_TITLE}</DialogTitle>
+            <DialogDescription>{PRESET_DESCRIPTION}</DialogDescription>
+          </DialogHeader>
+          <div className="py-4">{fields}</div>
+          <DialogFooter>
+            <DialogClose render={<Button variant="outline" type="button" />}>
+              Cancel
+            </DialogClose>
+            <Button type="submit" disabled={!nextPreset}>
+              Open
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export function OpenPresetScript() {
+  return (
+    <Script
+      id="open-preset-listener"
+      strategy="beforeInteractive"
+      dangerouslySetInnerHTML={{
+        __html: `
+            (function() {
+              // Forward O key.
+              document.addEventListener('keydown', function(e) {
+                if (e.key === 'o' && !e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
+                  if (
+                    (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+                    e.target instanceof HTMLInputElement ||
+                    e.target instanceof HTMLTextAreaElement ||
+                    e.target instanceof HTMLSelectElement
+                  ) {
+                    return;
+                  }
+                  e.preventDefault();
+                  if (window.parent && window.parent !== window) {
+                    window.parent.postMessage({
+                      type: '${OPEN_PRESET_FORWARD_TYPE}',
+                      key: e.key
+                    }, '*');
+                  }
+                }
+              });
+
+            })();
+          `,
+      }}
+    />
+  )
+}
--- a/apps/v4/app/(app)/create/components/preview.tsx
+++ b/apps/v4/app/(app)/create/components/preview.tsx
@@ -11,6 +11,7 @@ import { DARK_MODE_FORWARD_TYPE } from "@/app/(app)/create/components/mode-switc
 import { PreviewSwitcher } from "@/app/(app)/create/components/preview-switcher"
 import { RANDOMIZE_FORWARD_TYPE } from "@/app/(app)/create/components/random-button"
 import { sendToIframe } from "@/app/(app)/create/hooks/use-iframe-sync"
+import { OPEN_PRESET_FORWARD_TYPE } from "@/app/(app)/create/hooks/use-open-preset"
 import { RESET_FORWARD_TYPE } from "@/app/(app)/create/hooks/use-reset"
 import {
  serializeDesignSystemSearchParams,
@@ -20,78 +21,6 @@ import {
 // Hoisted — avoids recreating on every message event. (js-hoist-regexp)
 const MAC_REGEX = /Mac|iPhone|iPad|iPod/

-// Hoisted — only uses module-level constants, no component state. (rendering-hoist-jsx)
-function handleMessage(event: MessageEvent) {
-  if (
-    typeof window === "undefined" ||
-    event.origin !== window.location.origin
-  ) {
-    return
-  }
-
-  const type = event.data.type
-  if (type === CMD_K_FORWARD_TYPE) {
-    const isMac = MAC_REGEX.test(navigator.userAgent)
-    document.dispatchEvent(
-      new KeyboardEvent("keydown", {
-        key: event.data.key || "k",
-        metaKey: isMac,
-        ctrlKey: !isMac,
-        bubbles: true,
-        cancelable: true,
-      })
-    )
-  } else if (type === RANDOMIZE_FORWARD_TYPE) {
-    document.dispatchEvent(
-      new KeyboardEvent("keydown", {
-        key: event.data.key || "r",
-        bubbles: true,
-        cancelable: true,
-      })
-    )
-  } else if (type === UNDO_FORWARD_TYPE) {
-    const isMac = MAC_REGEX.test(navigator.userAgent)
-    document.dispatchEvent(
-      new KeyboardEvent("keydown", {
-        key: "z",
-        metaKey: isMac,
-        ctrlKey: !isMac,
-        bubbles: true,
-        cancelable: true,
-      })
-    )
-  } else if (type === REDO_FORWARD_TYPE) {
-    const isMac = MAC_REGEX.test(navigator.userAgent)
-    document.dispatchEvent(
-      new KeyboardEvent("keydown", {
-        key: "z",
-        shiftKey: true,
-        metaKey: isMac,
-        ctrlKey: !isMac,
-        bubbles: true,
-        cancelable: true,
-      })
-    )
-  } else if (type === RESET_FORWARD_TYPE) {
-    document.dispatchEvent(
-      new KeyboardEvent("keydown", {
-        key: "R",
-        shiftKey: true,
-        bubbles: true,
-        cancelable: true,
-      })
-    )
-  } else if (type === DARK_MODE_FORWARD_TYPE) {
-    document.dispatchEvent(
-      new KeyboardEvent("keydown", {
-        key: event.data.key || "d",
-        bubbles: true,
-        cancelable: true,
-      })
-    )
-  }
-}
-
 export function Preview() {
  const [params] = useDesignSystemSearchParams()
  const iframeRef = React.useRef<HTMLIFrameElement>(null)
@@ -117,6 +46,89 @@ export function Preview() {
  }, [params])

  React.useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      const iframeWindow = iframeRef.current?.contentWindow
+      if (
+        !iframeWindow ||
+        event.origin !== window.location.origin ||
+        event.source !== iframeWindow ||
+        !event.data ||
+        typeof event.data !== "object"
+      ) {
+        return
+      }
+
+      const type = event.data.type
+      if (type === CMD_K_FORWARD_TYPE) {
+        const isMac = MAC_REGEX.test(navigator.userAgent)
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: event.data.key || "k",
+            metaKey: isMac,
+            ctrlKey: !isMac,
+            bubbles: true,
+            cancelable: true,
+          })
+        )
+      } else if (type === RANDOMIZE_FORWARD_TYPE) {
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: event.data.key || "r",
+            bubbles: true,
+            cancelable: true,
+          })
+        )
+      } else if (type === OPEN_PRESET_FORWARD_TYPE) {
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: event.data.key || "o",
+            bubbles: true,
+            cancelable: true,
+          })
+        )
+      } else if (type === UNDO_FORWARD_TYPE) {
+        const isMac = MAC_REGEX.test(navigator.userAgent)
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: "z",
+            metaKey: isMac,
+            ctrlKey: !isMac,
+            bubbles: true,
+            cancelable: true,
+          })
+        )
+      } else if (type === REDO_FORWARD_TYPE) {
+        const isMac = MAC_REGEX.test(navigator.userAgent)
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: "z",
+            shiftKey: true,
+            metaKey: isMac,
+            ctrlKey: !isMac,
+            bubbles: true,
+            cancelable: true,
+          })
+        )
+      } else if (type === RESET_FORWARD_TYPE) {
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: "R",
+            shiftKey: true,
+            bubbles: true,
+            cancelable: true,
+          })
+        )
+      } else if (type === DARK_MODE_FORWARD_TYPE) {
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: event.data.key || "d",
+            bubbles: true,
+            cancelable: true,
+          })
+        )
+      }
+    }
+
    window.addEventListener("message", handleMessage)
    return () => {
      window.removeEventListener("message", handleMessage)
--- a/apps/v4/app/(app)/create/components/random-button.tsx
+++ b/apps/v4/app/(app)/create/components/random-button.tsx
@@ -28,7 +28,7 @@ export function RandomButton({
      )}
      {...props}
    >
-      <span className="w-full text-center font-medium">Shuffle</span>
+      <span className="w-full truncate text-center font-medium">Shuffle</span>
    </Button>
  )
 }
--- a/apps/v4/app/(app)/create/hooks/use-open-preset.tsx
+++ b/apps/v4/app/(app)/create/hooks/use-open-preset.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import * as React from "react"
+import useSWR from "swr"
+
+const OPEN_PRESET_KEY = "create:open-preset-open"
+export const OPEN_PRESET_FORWARD_TYPE = "open-preset-forward"
+
+function isEditableTarget(target: EventTarget | null) {
+  return (
+    (target instanceof HTMLElement && target.isContentEditable) ||
+    target instanceof HTMLInputElement ||
+    target instanceof HTMLTextAreaElement ||
+    target instanceof HTMLSelectElement
+  )
+}
+
+export function useOpenPreset() {
+  const { data: open = false, mutate: setOpenData } = useSWR<boolean>(
+    OPEN_PRESET_KEY,
+    {
+      fallbackData: false,
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+      revalidateOnReconnect: false,
+    }
+  )
+
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean) => {
+      void setOpenData(nextOpen, { revalidate: false })
+    },
+    [setOpenData]
+  )
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (
+        e.key === "o" &&
+        !e.shiftKey &&
+        !e.metaKey &&
+        !e.ctrlKey &&
+        !e.altKey
+      ) {
+        if (isEditableTarget(e.target)) {
+          return
+        }
+
+        e.preventDefault()
+        void setOpenData(true, { revalidate: false })
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => {
+      document.removeEventListener("keydown", down)
+    }
+  }, [setOpenData])
+
+  return {
+    open,
+    setOpen: handleOpenChange,
+  }
+}
+
+export function useOpenPresetTrigger() {
+  const { mutate: setOpenData } = useSWR<boolean>(OPEN_PRESET_KEY, {
+    fallbackData: false,
+    revalidateOnFocus: false,
+    revalidateIfStale: false,
+    revalidateOnReconnect: false,
+  })
+
+  const openPreset = React.useCallback(() => {
+    void setOpenData(true, { revalidate: false })
+  }, [setOpenData])
+
+  return {
+    openPreset,
+  }
+}
--- a/apps/v4/app/(app)/create/lib/parse-preset-input.test.ts
+++ b/apps/v4/app/(app)/create/lib/parse-preset-input.test.ts
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest"
+
+import { parsePresetInput } from "./parse-preset-input"
+
+describe("parsePresetInput", () => {
+  it("accepts a raw preset code", () => {
+    expect(parsePresetInput("b0")).toBe("b0")
+  })
+
+  it("accepts a --preset flag", () => {
+    expect(parsePresetInput(" --preset b0 ")).toBe("b0")
+  })
+
+  it("rejects invalid preset input", () => {
+    expect(parsePresetInput("open sesame")).toBeNull()
+  })
+})
--- a/apps/v4/app/(app)/create/lib/parse-preset-input.ts
+++ b/apps/v4/app/(app)/create/lib/parse-preset-input.ts
@@ -0,0 +1,15 @@
+import { isPresetCode } from "shadcn/preset"
+
+const PRESET_FLAG_PATTERN = /^--preset\b\s+(.+)$/i
+
+export function parsePresetInput(value: string) {
+  const input = value.trim()
+
+  if (!input) {
+    return null
+  }
+
+  const preset = input.match(PRESET_FLAG_PATTERN)?.[1]?.trim() ?? input
+
+  return isPresetCode(preset) ? preset : null
+}
--- a/apps/v4/app/(create)/preview/[base]/[name]/page.tsx
+++ b/apps/v4/app/(create)/preview/[base]/[name]/page.tsx
@@ -10,6 +10,7 @@ import { ActionMenuScript } from "@/app/(app)/create/components/action-menu"
 import { DesignSystemProvider } from "@/app/(app)/create/components/design-system-provider"
 import { HistoryScript } from "@/app/(app)/create/components/history-buttons"
 import { DarkModeScript } from "@/app/(app)/create/components/mode-switcher"
+import { OpenPresetScript } from "@/app/(app)/create/components/open-preset"
 import { PreviewStyle } from "@/app/(app)/create/components/preview-style"
 import { RandomizeScript } from "@/app/(app)/create/components/random-button"
 import {
@@ -139,6 +140,7 @@ export default async function BlockPage({
      <PreventScrollOnFocusScript />
      <PreviewStyle />
      <ActionMenuScript />
+      <OpenPresetScript />
      <RandomizeScript />
      <HistoryScript />
      <DarkModeScript />
--- a/apps/v4/components/directory-add-button.tsx
+++ b/apps/v4/components/directory-add-button.tsx
@@ -6,7 +6,7 @@ import { IconCheck, IconCopy, IconPlus } from "@tabler/icons-react"
 import { useConfig } from "@/hooks/use-config"
 import { useIsMobile } from "@/hooks/use-mobile"
 import { copyToClipboardWithMeta } from "@/components/copy-button"
-import { Button } from "@/registry/new-york-v4/ui/button"
+import { Button } from "@/styles/base-nova/ui/button"
 import {
  Dialog,
  DialogClose,
@@ -15,8 +15,7 @@ import {
  DialogFooter,
  DialogHeader,
  DialogTitle,
-  DialogTrigger,
-} from "@/registry/new-york-v4/ui/dialog"
+} from "@/styles/base-nova/ui/dialog"
 import {
  Drawer,
  DrawerClose,
@@ -25,42 +24,74 @@ import {
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/new-york-v4/ui/drawer"
+} from "@/styles/base-nova/ui/drawer"
 import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
-} from "@/registry/new-york-v4/ui/tabs"
+} from "@/styles/base-nova/ui/tabs"
 import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
+} from "@/styles/base-nova/ui/tooltip"
+
+const DirectoryAddContext = React.createContext<{
+  open: (registry: { name: string }) => void
+}>({
+  open: () => {},
+})
+
+export function useDirectoryAdd() {
+  return React.useContext(DirectoryAddContext)
+}

 export function DirectoryAddButton({
  registry,
 }: {
  registry: { name: string }
+}) {
+  const { open } = useDirectoryAdd()
+
+  return (
+    <Button
+      size="sm"
+      variant="outline"
+      className="relative z-10"
+      onClick={() => open(registry)}
+    >
+      Add <IconPlus />
+    </Button>
+  )
+}
+
+export function DirectoryAddProvider({
+  children,
+}: {
+  children: React.ReactNode
 }) {
  const [config, setConfig] = useConfig()
  const [hasCopied, setHasCopied] = React.useState(false)
-  const [open, setOpen] = React.useState(false)
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [selectedRegistry, setSelectedRegistry] = React.useState<{
+    name: string
+  } | null>(null)
  const isMobile = useIsMobile()

  const packageManager = config.packageManager || "pnpm"

  const commands = React.useMemo(() => {
+    if (!selectedRegistry) return null
    return {
-      pnpm: `pnpm dlx shadcn@latest registry add ${registry.name}`,
-      npm: `npx shadcn@latest registry add ${registry.name}`,
-      yarn: `yarn dlx shadcn@latest registry add ${registry.name}`,
-      bun: `bunx --bun shadcn@latest registry add ${registry.name}`,
+      pnpm: `pnpm dlx shadcn@latest registry add ${selectedRegistry.name}`,
+      npm: `npx shadcn@latest registry add ${selectedRegistry.name}`,
+      yarn: `yarn dlx shadcn@latest registry add ${selectedRegistry.name}`,
+      bun: `bunx --bun shadcn@latest registry add ${selectedRegistry.name}`,
    }
-  }, [registry.name])
+  }, [selectedRegistry])

-  const command = commands[packageManager]
+  const command = commands?.[packageManager] ?? ""

  React.useEffect(() => {
    if (hasCopied) {
@@ -74,19 +105,23 @@ export function DirectoryAddButton({
      name: "copy_registry_add_command",
      properties: {
        command,
-        registry: registry.name,
+        registry: selectedRegistry?.name ?? "",
      },
    })
    setHasCopied(true)
-  }, [command, registry.name])
+  }, [command, selectedRegistry?.name])

-  const Trigger = (
-    <Button size="sm" variant="outline" className="relative z-10">
-      Add <IconPlus />
-    </Button>
+  const contextValue = React.useMemo(
+    () => ({
+      open: (registry: { name: string }) => {
+        setSelectedRegistry(registry)
+        setIsOpen(true)
+      },
+    }),
+    []
  )

-  const Content = (
+  const Content = commands ? (
    <Tabs
      value={packageManager}
      onValueChange={(value) => {
@@ -95,30 +130,28 @@ export function DirectoryAddButton({
          packageManager: value as "pnpm" | "npm" | "yarn" | "bun",
        })
      }}
-      className="gap-0 overflow-hidden rounded-lg border"
+      className="gap-0 overflow-hidden rounded-xl border"
    >
-      <div className="flex items-center gap-2 border-b p-2">
-        <TabsList className="h-auto rounded-none bg-transparent p-0 font-mono *:data-[slot=tabs-trigger]:border *:data-[slot=tabs-trigger]:border-transparent *:data-[slot=tabs-trigger]:pt-0.5 *:data-[slot=tabs-trigger]:shadow-none! *:data-[slot=tabs-trigger]:data-[state=active]:border-input">
+      <div className="flex items-center gap-2 border-b p-1.5">
+        <TabsList className="h-auto *:data-[slot=tabs-trigger]:pt-0">
          <TabsTrigger value="pnpm">pnpm</TabsTrigger>
          <TabsTrigger value="npm">npm</TabsTrigger>
          <TabsTrigger value="yarn">yarn</TabsTrigger>
          <TabsTrigger value="bun">bun</TabsTrigger>
        </TabsList>
        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              size="icon-sm"
-              variant="ghost"
-              className="ml-auto size-7 rounded-lg"
-              onClick={handleCopy}
-            >
-              {hasCopied ? (
-                <IconCheck className="size-4" />
-              ) : (
-                <IconCopy className="size-4" />
-              )}
-              <span className="sr-only">Copy command</span>
-            </Button>
+          <TooltipTrigger
+            render={
+              <Button
+                size="icon-sm"
+                variant="ghost"
+                className="ml-auto"
+                onClick={handleCopy}
+              />
+            }
+          >
+            {hasCopied ? <IconCheck /> : <IconCopy />}
+            <span className="sr-only">Copy command</span>
          </TooltipTrigger>
          <TooltipContent>
            {hasCopied ? "Copied!" : "Copy command"}
@@ -135,47 +168,48 @@ export function DirectoryAddButton({
        </TabsContent>
      ))}
    </Tabs>
-  )
-
-  if (isMobile) {
-    return (
-      <Drawer open={open} onOpenChange={setOpen}>
-        <DrawerTrigger asChild>{Trigger}</DrawerTrigger>
-        <DrawerContent>
-          <DrawerHeader>
-            <DrawerTitle>Add Registry</DrawerTitle>
-            <DrawerDescription>
-              Run this command to add {registry.name} to your project.
-            </DrawerDescription>
-          </DrawerHeader>
-          <div className="px-4">{Content}</div>
-          <DrawerFooter>
-            <DrawerClose asChild>
-              <Button size="sm">Done</Button>
-            </DrawerClose>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
-    )
-  }
+  ) : null

  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{Trigger}</DialogTrigger>
-      <DialogContent className="dialog-ring animate-none! rounded-xl sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Add Registry</DialogTitle>
-          <DialogDescription>
-            Run this command to add {registry.name} to your project.
-          </DialogDescription>
-        </DialogHeader>
-        {Content}
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button size="sm">Done</Button>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DirectoryAddContext value={contextValue}>
+      {children}
+      {isMobile ? (
+        <Drawer open={isOpen} onOpenChange={setIsOpen}>
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>Add Registry</DrawerTitle>
+              <DrawerDescription>
+                Run this command to add {selectedRegistry?.name} to your
+                project.
+              </DrawerDescription>
+            </DrawerHeader>
+            <div className="px-4">{Content}</div>
+            <DrawerFooter>
+              <DrawerClose asChild>
+                <Button size="sm">Done</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      ) : (
+        <Dialog open={isOpen} onOpenChange={setIsOpen}>
+          <DialogContent className="animate-none! sm:max-w-md">
+            <DialogHeader>
+              <DialogTitle>Add Registry</DialogTitle>
+              <DialogDescription>
+                Run this command to add {selectedRegistry?.name} to your
+                project.
+              </DialogDescription>
+            </DialogHeader>
+            {Content}
+            <DialogFooter>
+              <DialogClose render={<Button size="sm" variant="outline" />}>
+                Done
+              </DialogClose>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
+    </DirectoryAddContext>
  )
 }
--- a/apps/v4/components/directory-list.tsx
+++ b/apps/v4/components/directory-list.tsx
@@ -1,12 +1,20 @@
 "use client"

 import * as React from "react"
-import { IconArrowUpRight } from "@tabler/icons-react"
+import { usePathname } from "next/navigation"
+import {
+  IconArrowUpRight,
+  IconChevronLeft,
+  IconChevronRight,
+} from "@tabler/icons-react"

+import { cn } from "@/lib/utils"
 import { useSearchRegistry } from "@/hooks/use-search-registry"
-import { DirectoryAddButton } from "@/components/directory-add-button"
-import globalRegistries from "@/registry/directory.json"
-import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  DirectoryAddButton,
+  DirectoryAddProvider,
+} from "@/components/directory-add-button"
+import { Button, buttonVariants } from "@/styles/base-nova/ui/button"
 import {
  Item,
  ItemActions,
@@ -17,9 +25,16 @@ import {
  ItemMedia,
  ItemSeparator,
  ItemTitle,
-} from "@/registry/new-york-v4/ui/item"
+} from "@/styles/base-nova/ui/item"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+} from "@/styles/base-nova/ui/pagination"
+import { Skeleton } from "@/styles/base-nova/ui/skeleton"

-import { SearchDirectory } from "./search-directory"
+import { SearchDirectory } from "./directory-search"

 function getHomepageUrl(homepage: string) {
  const url = new URL(homepage)
@@ -29,55 +44,308 @@ function getHomepageUrl(homepage: string) {
  return url.toString()
 }

+function getPageHref(pathname: string, query: string, page: number) {
+  const searchParams = new URLSearchParams()
+
+  if (query) {
+    searchParams.set("q", query)
+  }
+
+  if (page > 1) {
+    searchParams.set("page", page.toString())
+  }
+
+  const search = searchParams.toString()
+
+  return search ? `${pathname}?${search}` : pathname
+}
+
+function getPageNumbers(current: number, total: number) {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1) as (
+      | number
+      | "ellipsis"
+    )[]
+  }
+
+  const pages: (number | "ellipsis")[] = [1]
+
+  // Show ellipsis or page 2 directly if only one number would be hidden.
+  if (current > 4) {
+    pages.push("ellipsis")
+  } else if (current >= 4) {
+    pages.push(2)
+  }
+
+  const start = Math.max(2, current - 1)
+  const end = Math.min(total - 1, current + 1)
+  for (let i = start; i <= end; i++) {
+    pages.push(i)
+  }
+
+  // Show ellipsis or second-to-last page directly if only one number would be hidden.
+  if (current < total - 3) {
+    pages.push("ellipsis")
+  } else if (current <= total - 3) {
+    pages.push(total - 1)
+  }
+
+  pages.push(total)
+
+  return pages
+}
+
+type DirectoryPaginationLinkProps = React.ComponentProps<"a"> & {
+  isActive?: boolean
+  size?: React.ComponentProps<typeof Button>["size"]
+}
+
+function DirectoryPaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: DirectoryPaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size,
+        }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DirectoryPaginationPrevious({
+  className,
+  text = "Previous",
+  ...props
+}: DirectoryPaginationLinkProps & { text?: string }) {
+  return (
+    <DirectoryPaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("pl-1.5!", className)}
+      {...props}
+    >
+      <IconChevronLeft className="cn-rtl-flip size-4" />
+      <span className="hidden sm:block">{text}</span>
+    </DirectoryPaginationLink>
+  )
+}
+
+function DirectoryPaginationNext({
+  className,
+  text = "Next",
+  ...props
+}: DirectoryPaginationLinkProps & { text?: string }) {
+  return (
+    <DirectoryPaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("pr-1.5!", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">{text}</span>
+      <IconChevronRight className="cn-rtl-flip size-4" />
+    </DirectoryPaginationLink>
+  )
+}
+
 export function DirectoryList() {
-  const { registries } = useSearchRegistry()
+  const pathname = usePathname()
+  const {
+    isLoading,
+    paginatedRegistries,
+    page,
+    query,
+    registries,
+    totalPages,
+    setPage,
+    setQuery,
+  } = useSearchRegistry()
+  const previousHref =
+    page > 1 ? getPageHref(pathname, query, page - 1) : undefined
+  const nextHref =
+    page < totalPages ? getPageHref(pathname, query, page + 1) : undefined
+
+  const handlePageChange = React.useCallback(
+    (
+      event: React.MouseEvent<HTMLAnchorElement>,
+      targetPage: number,
+      disabled = false
+    ) => {
+      if (
+        event.defaultPrevented ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey
+      ) {
+        return
+      }
+
+      if (disabled || targetPage === page) {
+        event.preventDefault()
+        return
+      }
+
+      event.preventDefault()
+      void setPage(targetPage)
+    },
+    [page, setPage]
+  )

  return (
-    <div className="mt-6">
-      <SearchDirectory />
+    <DirectoryAddProvider>
+      <div className="mt-6">
+        {isLoading ? (
+          <DirectoryListSkeleton />
+        ) : (
+          <>
+            <SearchDirectory
+              query={query}
+              registriesCount={registries.length}
+              setQuery={setQuery}
+            />
+            <ItemGroup className="my-8">
+              {paginatedRegistries.map((registry, index) => (
+                <React.Fragment key={registry.name}>
+                  <Item className="group/item relative gap-6 px-0">
+                    <ItemMedia
+                      variant="image"
+                      dangerouslySetInnerHTML={{ __html: registry.logo }}
+                      className="grayscale *:[svg]:size-8 *:[svg]:fill-foreground"
+                    />
+                    <ItemContent>
+                      <ItemTitle>
+                        <a
+                          href={getHomepageUrl(registry.homepage)}
+                          target="_blank"
+                          rel="noopener noreferrer external"
+                          className="group flex items-center gap-1"
+                        >
+                          {registry.name}{" "}
+                          <IconArrowUpRight className="size-4 opacity-0 group-hover:opacity-100" />
+                        </a>
+                      </ItemTitle>
+                      {registry.description && (
+                        <ItemDescription className="text-pretty">
+                          {registry.description}
+                        </ItemDescription>
+                      )}
+                    </ItemContent>
+                    <ItemActions className="relative z-10 hidden self-start sm:flex">
+                      <DirectoryAddButton registry={registry} />
+                    </ItemActions>
+                    <ItemFooter className="justify-start pl-16 sm:hidden">
+                      <Button size="sm" variant="outline">
+                        View <IconArrowUpRight />
+                      </Button>
+                      <DirectoryAddButton registry={registry} />
+                    </ItemFooter>
+                  </Item>
+                  {index < paginatedRegistries.length - 1 && (
+                    <ItemSeparator className="my-1" />
+                  )}
+                </React.Fragment>
+              ))}
+            </ItemGroup>
+            {totalPages > 1 && (
+              <Pagination>
+                <PaginationContent>
+                  <PaginationItem>
+                    <DirectoryPaginationPrevious
+                      href={previousHref}
+                      aria-disabled={page <= 1 || undefined}
+                      tabIndex={page <= 1 ? -1 : undefined}
+                      onClick={(event) =>
+                        handlePageChange(event, page - 1, page <= 1)
+                      }
+                      className={cn(
+                        page <= 1
+                          ? "pointer-events-none opacity-50"
+                          : "cursor-pointer"
+                      )}
+                    />
+                  </PaginationItem>
+                  {getPageNumbers(page, totalPages).map((p, i) =>
+                    p === "ellipsis" ? (
+                      <PaginationItem key={`ellipsis-${i}`}>
+                        <PaginationEllipsis />
+                      </PaginationItem>
+                    ) : (
+                      <PaginationItem key={p}>
+                        <DirectoryPaginationLink
+                          href={getPageHref(pathname, query, p)}
+                          isActive={p === page}
+                          onClick={(event) => handlePageChange(event, p)}
+                          className="cursor-pointer"
+                        >
+                          {p}
+                        </DirectoryPaginationLink>
+                      </PaginationItem>
+                    )
+                  )}
+                  <PaginationItem>
+                    <DirectoryPaginationNext
+                      href={nextHref}
+                      aria-disabled={page >= totalPages || undefined}
+                      tabIndex={page >= totalPages ? -1 : undefined}
+                      onClick={(event) =>
+                        handlePageChange(event, page + 1, page >= totalPages)
+                      }
+                      className={cn(
+                        page >= totalPages
+                          ? "pointer-events-none opacity-50"
+                          : "cursor-pointer"
+                      )}
+                    />
+                  </PaginationItem>
+                </PaginationContent>
+              </Pagination>
+            )}
+          </>
+        )}
+      </div>
+    </DirectoryAddProvider>
+  )
+}
+
+function DirectoryListSkeleton() {
+  return (
+    <>
+      <Skeleton className="h-8 w-full rounded-lg" />
      <ItemGroup className="my-8">
-        {registries.map((registry, index) => (
+        {Array.from({ length: 5 }, (_, index) => (
          <React.Fragment key={index}>
-            <Item className="group/item relative gap-6 px-0">
-              <ItemMedia
-                variant="image"
-                dangerouslySetInnerHTML={{ __html: registry.logo }}
-                className="grayscale *:[svg]:size-8 *:[svg]:fill-foreground"
-              />
+            <Item className="relative items-start gap-6 px-0">
+              <Skeleton className="size-8 rounded-lg" />
              <ItemContent>
-                <ItemTitle>
-                  <a
-                    href={getHomepageUrl(registry.homepage)}
-                    target="_blank"
-                    rel="noopener noreferrer external"
-                    className="group flex items-center gap-1"
-                  >
-                    {registry.name}{" "}
-                    <IconArrowUpRight className="size-4 opacity-0 group-hover:opacity-100" />
-                  </a>
-                </ItemTitle>
-                {registry.description && (
-                  <ItemDescription className="text-pretty">
-                    {registry.description}
-                  </ItemDescription>
-                )}
+                <Skeleton className="h-4 w-32 sm:w-40" />
+                <Skeleton className="mt-1.5 h-4 w-full max-w-md" />
+                <Skeleton className="mt-1 h-4 w-3/4 max-w-sm" />
              </ItemContent>
-              <ItemActions className="relative z-10 hidden self-start sm:flex">
-                <DirectoryAddButton registry={registry} />
+              <ItemActions className="hidden self-start sm:flex">
+                <Skeleton className="h-7 w-16 rounded-lg" />
              </ItemActions>
-              <ItemFooter className="justify-start pl-16 sm:hidden">
-                <Button size="sm" variant="outline">
-                  View <IconArrowUpRight />
-                </Button>
-                <DirectoryAddButton registry={registry} />
+              <ItemFooter className="justify-start gap-2 pl-16 sm:hidden">
+                <Skeleton className="h-9 w-20 rounded-lg" />
+                <Skeleton className="h-9 w-24 rounded-lg" />
              </ItemFooter>
            </Item>
-            {index < globalRegistries.length - 1 && (
-              <ItemSeparator className="my-1" />
-            )}
+            {index < 4 && <ItemSeparator className="my-1" />}
          </React.Fragment>
        ))}
      </ItemGroup>
-    </div>
+    </>
  )
 }
--- a/apps/v4/components/directory-search.tsx
+++ b/apps/v4/components/directory-search.tsx
@@ -1,23 +1,24 @@
-import * as React from "react"
+"use client"
+
 import { Search, X } from "lucide-react"

-import { useSearchRegistry } from "@/hooks/use-search-registry"
-import { Field } from "@/registry/new-york-v4/ui/field"
+import { Field } from "@/styles/base-nova/ui/field"
 import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
-} from "@/registry/new-york-v4/ui/input-group"
-
-export const SearchDirectory = () => {
-  const { query, registries, setQuery } = useSearchRegistry()
-
-  const onQueryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value
-    setQuery(value)
-  }
+} from "@/styles/base-nova/ui/input-group"

+export function SearchDirectory({
+  query,
+  registriesCount,
+  setQuery,
+}: {
+  query: string
+  registriesCount: number
+  setQuery: (value: string | null) => void
+}) {
  return (
    <Field>
      <InputGroup>
@@ -25,14 +26,15 @@ export const SearchDirectory = () => {
          <Search />
        </InputGroupAddon>
        <InputGroupInput
+          className="h-full"
          placeholder="Search"
          value={query}
-          onChange={onQueryChange}
+          onChange={(e) => setQuery(e.target.value)}
        />
        <InputGroupAddon align="inline-end">
          <span className="text-muted-foreground tabular-nums sm:text-xs">
-            {registries.length}{" "}
-            {registries.length === 1 ? "registry" : "registries"}
+            {registriesCount}{" "}
+            {registriesCount === 1 ? "registry" : "registries"}
          </span>
        </InputGroupAddon>
        <InputGroupAddon
--- a/apps/v4/content/docs/(root)/cli.mdx
+++ b/apps/v4/content/docs/(root)/cli.mdx
@@ -5,7 +5,7 @@ description: Use the shadcn CLI to add components to your project.

 ## init

-Use the `init` command to initialize configuration and dependencies for a new project.
+Use the `init` command to initialize configuration and dependencies for an existing project, or create a new project with `--name`.

 The `init` command installs dependencies, adds the `cn` util and configures CSS variables for the project.

@@ -21,26 +21,26 @@ Usage: shadcn init [options] [components...]
 initialize your project and install dependencies

 Arguments:
-  components              name, url or local path to component
+  components                 names, url or local path to component

 Options:
  -t, --template <template>  the template to use. (next, vite, start, react-router, laravel, astro)
  -b, --base <base>          the component library to use. (radix, base)
-  -p, --preset [name]        use a preset configuration. (name, URL, or preset code)
-  -n, --name <name>          the name for the new project.
-  -d, --defaults             use default configuration. (default: false)
+  -p, --preset [name]        use a preset configuration
  -y, --yes                  skip confirmation prompt. (default: true)
+  -d, --defaults             use default configuration: --template=next --preset=nova (default: false)
  -f, --force                force overwrite of existing configuration. (default: false)
  -c, --cwd <cwd>            the working directory. defaults to the current directory.
+  -n, --name <name>          the name for the new project.
  -s, --silent               mute output. (default: false)
-  --monorepo                 scaffold a monorepo project.
-  --no-monorepo              skip the monorepo prompt.
-  --reinstall                re-install existing UI components.
-  --no-reinstall             do not re-install existing UI components.
-  --rtl                      enable RTL support.
-  --no-rtl                   disable RTL support.
  --css-variables            use css variables for theming. (default: true)
  --no-css-variables         do not use css variables for theming.
+  --monorepo                 scaffold a monorepo project.
+  --no-monorepo              skip the monorepo prompt.
+  --rtl                      enable RTL support.
+  --no-rtl                   disable RTL support.
+  --reinstall                re-install existing UI components.
+  --no-reinstall             do not re-install existing UI components.
  -h, --help                 display help for command
 ```

@@ -85,6 +85,34 @@ Options:

 ---

+## apply
+
+Use the `apply` command to apply a preset to an existing project.
+
+```bash
+npx shadcn@latest apply --preset a2r6bw
+```
+
+**Options**
+
+```bash
+Usage: shadcn apply [options] [preset]
+
+apply a preset to an existing project
+
+Arguments:
+  preset             the preset to apply
+
+Options:
+  --preset <preset>  preset configuration to apply
+  -y, --yes          skip confirmation prompt. (default: false)
+  -c, --cwd <cwd>    the working directory. defaults to the current directory.
+  -s, --silent       mute output. (default: false)
+  -h, --help         display help for command
+```
+
+---
+
 ## view

 Use the `view` command to view items from the registry before installing them.
--- a/apps/v4/content/docs/(root)/directory.mdx
+++ b/apps/v4/content/docs/(root)/directory.mdx
@@ -3,14 +3,9 @@ title: Registry Directory
 description: Discover community registries for shadcn/ui components and blocks.
 ---

-import { TriangleAlertIcon } from "lucide-react"
-
 These registries are built into the CLI with no additional configuration required. To add a component, run: `npx shadcn add @<registry>/<component>`.

-<Callout
-  type="warning"
-  className="border-amber-200 bg-amber-50 font-semibold dark:border-amber-900 dark:bg-amber-950"
->
+<Callout className="bg-muted font-semibold">
  Community registries are maintained by third-party developers. Always review
  code on installation to ensure it meets your security and quality standards.
 </Callout>
--- a/apps/v4/content/docs/changelog/2026-04-shadcn-apply.mdx
+++ b/apps/v4/content/docs/changelog/2026-04-shadcn-apply.mdx
@@ -0,0 +1,21 @@
+---
+title: April 2026 - shadcn apply
+description: Switch presets in existing projects without starting over.
+date: 2026-04-08
+---
+
+We added `shadcn apply` so you can switch presets in an existing project without starting over.
+
+When you run `npx shadcn@latest apply` in an existing project, we apply a new preset, reinstall your existing components, and update your theme, colors, CSS variables, fonts, and icons.
+
+```bash
+npx shadcn@latest apply --preset b2D0vQ7G4
+```
+
+The CLI keeps the current base and RTL settings from your existing project, even when the preset URL was generated with different values.
+
+<Button asChild size="sm">
+  <Link href="/create" className="mt-6 no-underline!">
+    Try a Preset
+  </Link>
+</Button>
--- a/apps/v4/hooks/use-search-registry.ts
+++ b/apps/v4/hooks/use-search-registry.ts
@@ -1,7 +1,10 @@
-import { debounce, useQueryState } from "nuqs"
+import { debounce, parseAsInteger, useQueryState } from "nuqs"

+import { useMounted } from "@/hooks/use-mounted"
 import globalRegistries from "@/registry/directory.json"

+const PAGE_SIZE = 10
+
 const normalizeQuery = (query: string) =>
  query.toLowerCase().replaceAll(" ", "").replaceAll("@", "")

@@ -25,15 +28,44 @@ const searchDirectory = (query: string | null) => {
  return globalRegistries.filter((registry) => finderFn(registry, query))
 }

-export const useSearchRegistry = () => {
+export function useSearchRegistry() {
+  const mounted = useMounted()
  const [query, setQuery] = useQueryState("q", {
    defaultValue: "",
    limitUrlUpdates: debounce(250),
  })

+  const [page, setPage] = useQueryState("page", {
+    ...parseAsInteger,
+    defaultValue: 1,
+    history: "push",
+  })
+
+  const currentQuery = mounted ? query : ""
+  const currentPageValue = mounted ? page : 1
+
+  const registries = searchDirectory(currentQuery)
+  const totalPages = Math.ceil(registries.length / PAGE_SIZE)
+
+  // Clamp page to valid range.
+  const currentPage = Math.max(1, Math.min(currentPageValue, totalPages))
+
+  const paginatedRegistries = registries.slice(
+    (currentPage - 1) * PAGE_SIZE,
+    currentPage * PAGE_SIZE
+  )
+
  return {
-    query,
-    registries: searchDirectory(query),
-    setQuery,
+    isLoading: !mounted,
+    query: currentQuery,
+    setQuery: (value: string | null) => {
+      setQuery(value)
+      setPage(null)
+    },
+    registries,
+    paginatedRegistries,
+    page: currentPage,
+    totalPages,
+    setPage,
  }
 }
--- a/apps/v4/package.json
+++ b/apps/v4/package.json
@@ -76,7 +76,7 @@
    "rehype-pretty-code": "^0.14.1",
    "rimraf": "^6.0.1",
    "server-only": "^0.0.1",
-    "shadcn": "4.1.2",
+    "shadcn": "4.2.0",
    "shiki": "^1.10.1",
    "sonner": "^2.0.0",
    "swr": "^2.3.6",
--- a/apps/v4/public/r/registries.json
+++ b/apps/v4/public/r/registries.json
@@ -1030,5 +1030,11 @@
    "homepage": "https://shadcndashboard.dev",
    "url": "https://shadcndashboard.dev/r/{name}.json",
    "description": "ShadcnDashboard is a collection of modern, production-ready dashboard layouts, components, and UI patterns built on top of shadcn/ui and Tailwind CSS. It’s designed to help developers build clean, scalable, and data-driven dashboards faster—without compromising on performance, accessibility, or customization."
+  },
+  {
+    "name": "@termcn",
+    "homepage": "https://termcn.vercel.app",
+    "url": "https://termcn.vercel.app/r/{name}.json",
+    "description": "Beautiful terminal UIs, made simple. Ready to use, customizable terminal UI components for React."
  }
 ]
--- a/apps/v4/registry/directory.json
+++ b/apps/v4/registry/directory.json
@@ -1203,5 +1203,12 @@
    "url": "https://shadcndashboard.dev/r/{name}.json",
    "description": "ShadcnDashboard is a collection of modern, production-ready dashboard layouts, components, and UI patterns built on top of shadcn/ui and Tailwind CSS. It’s designed to help developers build clean, scalable, and data-driven dashboards faster—without compromising on performance, accessibility, or customization.",
    "logo": "<svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'><rect width='40' height='40' rx='20' fill='#053B25'/><path d='M32.1327 19.501C31.5178 19.6123 30.8844 19.6705 30.2375 19.6705C24.3886 19.6705 19.6471 14.9189 19.6471 9.05765C19.6471 8.89469 19.6507 8.73258 19.658 8.57141C13.8411 9.10533 9.28516 14.0074 9.28516 19.9759C9.28516 26.301 14.4019 31.4286 20.7137 31.4286C27.0256 31.4286 32.1423 26.301 32.1423 19.9759C32.1423 19.8168 32.1391 19.6585 32.1327 19.501Z' fill='#C2FD75'/></svg>"
+  },
+  {
+    "name": "@termcn",
+    "homepage": "https://termcn.vercel.app",
+    "url": "https://termcn.vercel.app/r/{name}.json",
+    "description": "Beautiful terminal UIs, made simple. Ready to use, customizable terminal UI components for React.",
+    "logo": "<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'><script/><rect x='16' y='16' width='224' height='224' rx='28' stroke='#000' stroke-width='7'/><path d='m42 56 32 24-32 24' stroke='#fff' stroke-width='10' stroke-linecap='round' stroke-linejoin='round' fill='none'/><path d='m208.8 156.8-48 48M199.2 104 108 195.2' stroke='#fff' stroke-width='19.2' stroke-linecap='round' fill='none'/></svg>"
  }
 ]