Use siteConfig instead of NEXT_PUBLIC_APP_URL for root layout metadata

The metadata in the root layout referenced process.env.NEXT_PUBLIC_APP_URL
with non-null assertions, but this env var is not guaranteed to be set
(only .env.example exists). This caused `new URL(undefined)` to throw
during SSR, resulting in a blank page on /create (and all other routes).

Replace all NEXT_PUBLIC_APP_URL references in metadata with siteConfig.url
and siteConfig.ogImage, which are already defined and used elsewhere in
the same metadata block.

https://claude.ai/code/session_01Ez3f6QxR3MxNq6YfAeqrcH

.github/workflows/deprecated.yml

@@ -1,78 +0,0 @@
-name: Deprecated
-
-on:
-  pull_request_target:
-    types: [opened, synchronize]
-
-permissions:
-  issues: write
-  contents: read
-  pull-requests: write
-
-jobs:
-  deprecated:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout PR
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-          fetch-depth: 0
-
-      - name: Get changed files
-        id: changed-files
-        uses: tj-actions/changed-files@v46
-        with:
-          files: |
-            apps/www/**
-          files_ignore: |
-            apps/www/public/r/**
-          base_sha: ${{ github.event.pull_request.base.sha }}
-          sha: ${{ github.event.pull_request.head.sha }}
-
-      - name: Comment on PR if www files changed
-        if: steps.changed-files.outputs.any_changed == 'true'
-        uses: actions/github-script@v7
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const changedFiles = `${{ steps.changed-files.outputs.all_changed_files }}`.split(' ');
-            const wwwFiles = changedFiles.filter(file =>
-              file.startsWith('apps/www/') &&
-              !file.startsWith('apps/www/public/r/') &&
-              file !== 'apps/www/package.json'
-            );
-
-            if (wwwFiles.length > 0) {
-              const comment = `Looks like this PR modifies files in \`apps/www\`, which is deprecated.
-
-              Consider applying the change to \`apps/v4\` if relevant.`;
-
-              await github.rest.issues.createComment({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: context.issue.number,
-                body: comment
-              });
-
-              // Add deprecated label
-              await github.rest.issues.addLabels({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: context.issue.number,
-                labels: ['deprecated']
-              });
-            } else {
-              // Remove deprecated label if no www files are changed
-              try {
-                await github.rest.issues.removeLabel({
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  issue_number: context.issue.number,
-                  name: 'deprecated'
-                });
-              } catch (error) {
-                // Label doesn't exist, which is fine
-                console.log('Deprecated label not found, skipping removal');
-              }
-            }

.github/workflows/validate-registries.yml

@@ -16,7 +16,7 @@ jobs:
   check-registry-sync:
     if: github.event_name == 'pull_request'
     runs-on: ubuntu-latest
-    name: Check registry sync
+    name: check-registry-sync
     permissions:
       contents: read
       pull-requests: write
@@ -66,6 +66,44 @@ jobs:
         with:
           node-version: 20
 
+      - name: Block reserved registry namespaces
+        env:
+          RESERVED_NAMESPACES: "@shadcn,@ui,@blocks,@components,@block,@component,@util,@utils,@registry,@lib,@hook,@hooks,@theme,@themes,@chart,@charts"
+        run: |
+          node <<'EOF'
+          const fs = require("node:fs")
+
+          const files = [
+            "apps/v4/public/r/registries.json",
+            "apps/v4/registry/directory.json",
+          ]
+          const reservedNamespaces = new Set(
+            process.env.RESERVED_NAMESPACES.split(",").filter(Boolean)
+          )
+
+          function readNames(filePath) {
+            return JSON.parse(fs.readFileSync(filePath, "utf8")).map(
+              (entry) => entry.name
+            )
+          }
+
+          const violations = files.flatMap((filePath) => {
+            return readNames(filePath)
+              .filter((name) => reservedNamespaces.has(name))
+              .map((name) => `${filePath}: ${name}`)
+          })
+
+          if (violations.length > 0) {
+            console.error("Reserved registry namespaces are not allowed:")
+
+            for (const violation of violations) {
+              console.error(`- ${violation}`)
+            }
+
+            process.exit(1)
+          }
+          EOF
+
       - uses: pnpm/action-setup@v4
         name: Install pnpm
         id: pnpm-install

apps/v4/app/(create)/components/customizer.tsx

@@ -8,8 +8,6 @@ import {
   CardHeader,
 } from "@/examples/base/ui/card"
 import { FieldGroup } from "@/examples/base/ui/field"
-import { Separator } from "@/examples/base/ui/separator"
-import { CardTitle } from "@/examples/radix/ui/card"
 import { type RegistryItem } from "shadcn/schema"
 
 import { useIsMobile } from "@/hooks/use-mobile"
@@ -23,7 +21,6 @@ import { FontPicker } from "@/app/(create)/components/font-picker"
 import { IconLibraryPicker } from "@/app/(create)/components/icon-library-picker"
 import { MainMenu } from "@/app/(create)/components/main-menu"
 import { MenuColorPicker } from "@/app/(create)/components/menu-picker"
-import { ProjectForm } from "@/app/(create)/components/project-form"
 import { RadiusPicker } from "@/app/(create)/components/radius-picker"
 import { RandomButton } from "@/app/(create)/components/random-button"
 import { ResetDialog } from "@/app/(create)/components/reset-button"
@@ -58,7 +55,7 @@ export function Customizer({
       </CardHeader>
       <CardContent className="no-scrollbar min-h-0 flex-1 overflow-x-auto overflow-y-hidden md:overflow-y-auto">
         <FieldGroup className="flex-row gap-2.5 py-px md:flex-col md:gap-3.25">
-          <BasePicker isMobile={isMobile} anchorRef={anchorRef} />
+          {isMobile && <BasePicker isMobile={isMobile} anchorRef={anchorRef} />}
           <StylePicker
             styles={STYLES}
             isMobile={isMobile}

apps/v4/app/(create)/components/menu-picker.tsx

@@ -104,7 +104,7 @@ export function MenuColorPicker({
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-xs text-muted-foreground">Menu</div>
-            <div className="text-sm font-medium text-foreground">
+            <div className="line-clamp-1 text-sm font-medium text-foreground">
               {currentMenu?.label}
             </div>
           </div>

apps/v4/app/(create)/components/project-form.tsx

@@ -35,6 +35,7 @@ import { HugeiconsIcon } from "@hugeicons/react"
 import { cn } from "@/lib/utils"
 import { useConfig } from "@/hooks/use-config"
 import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { BASES, type BaseName } from "@/registry/config"
 import { usePresetCode } from "@/app/(create)/hooks/use-design-system"
 import {
   useDesignSystemSearchParams,
@@ -129,68 +130,74 @@ export function ProjectForm({
       <DialogTrigger render={<Button className={cn(className)} />}>
         Create Project
       </DialogTrigger>
-      <DialogContent className="min-w-0 sm:max-w-sm">
+      <DialogContent className="no-scrollbar max-h-[calc(100svh-2rem)] overflow-y-auto sm:max-w-sm">
         <DialogHeader>
           <DialogTitle>Create Project</DialogTitle>
           <DialogDescription>
-            Pick a template and configure your project. Available for all major
-            React frameworks.
+            Pick a template and configure your project.
           </DialogDescription>
         </DialogHeader>
-        <FieldGroup>
-          <Field>
-            <FieldLabel className="sr-only">Template</FieldLabel>
-            <TemplateGrid template={params.template} setParams={setParams} />
-          </Field>
-          <FieldSeparator />
-          <FieldSet>
-            <FieldLegend variant="label" className="sr-only">
-              Options
-            </FieldLegend>
-            <Field
-              orientation="horizontal"
-              data-disabled={hasMonorepo ? undefined : "true"}
-            >
-              <FieldLabel htmlFor="monorepo">
-                <span
-                  className="size-4 text-foreground [&_svg]:size-4 [&_svg]:fill-current"
-                  dangerouslySetInnerHTML={{
-                    __html: TURBOREPO_LOGO,
-                  }}
-                />
-                Create a monorepo
-              </FieldLabel>
-              <Switch
-                id="monorepo"
-                checked={params.template?.endsWith("-monorepo") ?? false}
-                disabled={!hasMonorepo}
-                onCheckedChange={(checked) => {
-                  const framework = getFramework(params.template ?? "next")
-                  setParams({
-                    template: getTemplateValue(
-                      framework,
-                      checked === true
-                    ) as typeof params.template,
-                  })
-                }}
-              />
+        <div>
+          <FieldGroup>
+            <Field>
+              <FieldLabel>Template</FieldLabel>
+              <TemplateGrid template={params.template} setParams={setParams} />
             </Field>
             <FieldSeparator />
-            <Field orientation="horizontal">
-              <FieldLabel htmlFor="rtl">
-                <HugeiconsIcon icon={Globe02Icon} className="size-4" />
-                Enable RTL support
-              </FieldLabel>
-              <Switch
-                id="rtl"
-                checked={params.rtl}
-                onCheckedChange={(checked) =>
-                  setParams({ rtl: checked === true })
-                }
-              />
+            <Field className="-mt-2">
+              <FieldLabel>Base</FieldLabel>
+              <BaseGrid base={params.base} setParams={setParams} />
             </Field>
-          </FieldSet>
-        </FieldGroup>
+            <FieldSeparator />
+            <FieldSet>
+              <FieldLegend variant="label" className="sr-only">
+                Options
+              </FieldLegend>
+              <Field
+                orientation="horizontal"
+                data-disabled={hasMonorepo ? undefined : "true"}
+              >
+                <FieldLabel htmlFor="monorepo">
+                  <span
+                    className="size-4 text-foreground [&_svg]:size-4 [&_svg]:fill-current"
+                    dangerouslySetInnerHTML={{
+                      __html: TURBOREPO_LOGO,
+                    }}
+                  />
+                  Create a monorepo
+                </FieldLabel>
+                <Switch
+                  id="monorepo"
+                  checked={params.template?.endsWith("-monorepo") ?? false}
+                  disabled={!hasMonorepo}
+                  onCheckedChange={(checked) => {
+                    const framework = getFramework(params.template ?? "next")
+                    setParams({
+                      template: getTemplateValue(
+                        framework,
+                        checked === true
+                      ) as typeof params.template,
+                    })
+                  }}
+                />
+              </Field>
+              <FieldSeparator />
+              <Field orientation="horizontal">
+                <FieldLabel htmlFor="rtl">
+                  <HugeiconsIcon icon={Globe02Icon} className="size-4" />
+                  Enable RTL support
+                </FieldLabel>
+                <Switch
+                  id="rtl"
+                  checked={params.rtl}
+                  onCheckedChange={(checked) =>
+                    setParams({ rtl: checked === true })
+                  }
+                />
+              </Field>
+            </FieldSet>
+          </FieldGroup>
+        </div>
         <DialogFooter className="min-w-0">
           <div className="flex w-full min-w-0 flex-col gap-3">
             <Tabs
@@ -310,3 +317,52 @@ const TemplateGrid = React.memo(function TemplateGrid({
     </RadioGroup>
   )
 })
+
+const BaseGrid = React.memo(function BaseGrid({
+  base,
+  setParams,
+}: {
+  base: DesignSystemSearchParams["base"]
+  setParams: ReturnType<typeof useDesignSystemSearchParams>[1]
+}) {
+  const handleBaseChange = React.useCallback(
+    (value: string) => {
+      setParams({ base: value as BaseName })
+    },
+    [setParams]
+  )
+
+  return (
+    <RadioGroup
+      value={base}
+      onValueChange={handleBaseChange}
+      aria-label="Base"
+      className="grid grid-cols-2 gap-2"
+    >
+      {BASES.map((item) => (
+        <FieldLabel
+          key={item.name}
+          htmlFor={`base-${item.name}`}
+          className="py-1"
+        >
+          <Field className="gap-0" orientation="horizontal">
+            <FieldContent className="flex flex-col items-center justify-center gap-2">
+              <div
+                className="size-6 text-foreground [&_svg]:size-6 *:[svg]:text-foreground!"
+                dangerouslySetInnerHTML={{
+                  __html: item.meta?.logo ?? "",
+                }}
+              />
+              <FieldTitle className="text-xs">{item.title}</FieldTitle>
+            </FieldContent>
+            <RadioGroupItem
+              value={item.name}
+              id={`base-${item.name}`}
+              className="sr-only absolute"
+            />
+          </Field>
+        </FieldLabel>
+      ))}
+    </RadioGroup>
+  )
+})

apps/v4/app/layout.tsx

@@ -20,7 +20,7 @@ export const metadata: Metadata = {
     default: siteConfig.name,
     template: `%s - ${siteConfig.name}`,
   },
-  metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL!),
+  metadataBase: new URL(siteConfig.url),
   description: siteConfig.description,
   keywords: ["Next.js", "React", "Tailwind CSS", "Components", "shadcn"],
   authors: [
@@ -33,13 +33,13 @@ export const metadata: Metadata = {
   openGraph: {
     type: "website",
     locale: "en_US",
-    url: process.env.NEXT_PUBLIC_APP_URL!,
+    url: siteConfig.url,
     title: siteConfig.name,
     description: siteConfig.description,
     siteName: siteConfig.name,
     images: [
       {
-        url: `${process.env.NEXT_PUBLIC_APP_URL}/opengraph-image.png`,
+        url: siteConfig.ogImage,
         width: 1200,
         height: 630,
         alt: siteConfig.name,
@@ -50,7 +50,7 @@ export const metadata: Metadata = {
     card: "summary_large_image",
     title: siteConfig.name,
     description: siteConfig.description,
-    images: [`${process.env.NEXT_PUBLIC_APP_URL}/opengraph-image.png`],
+    images: [siteConfig.ogImage],
     creator: "@shadcn",
   },
   icons: {

apps/v4/components/mode-switcher.tsx

@@ -7,12 +7,6 @@ import { useTheme } from "next-themes"
 import { cn } from "@/lib/utils"
 import { useMetaColor } from "@/hooks/use-meta-color"
 import { Button } from "@/registry/new-york-v4/ui/button"
-import { Kbd } from "@/registry/new-york-v4/ui/kbd"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
 
 export const DARK_MODE_FORWARD_TYPE = "dark-mode-forward"
 
@@ -35,40 +29,33 @@ export function ModeSwitcher({
   }, [resolvedTheme, setTheme])
 
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant={variant}
-          size="icon"
-          className={cn("group/toggle extend-touch-target size-8", className)}
-          onClick={toggleTheme}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="size-4.5"
-          >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
-            <path d="M12 3l0 18" />
-            <path d="M12 9l4.65 -4.65" />
-            <path d="M12 14.3l7.37 -7.37" />
-            <path d="M12 19.6l8.85 -8.85" />
-          </svg>
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent className="flex items-center gap-2 pr-1">
-        Toggle Mode <Kbd>D</Kbd>
-      </TooltipContent>
-    </Tooltip>
+    <Button
+      variant={variant}
+      size="icon"
+      className={cn("group/toggle extend-touch-target size-8", className)}
+      onClick={toggleTheme}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4.5"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+        <path d="M12 3l0 18" />
+        <path d="M12 9l4.65 -4.65" />
+        <path d="M12 14.3l7.37 -7.37" />
+        <path d="M12 19.6l8.85 -8.85" />
+      </svg>
+      <span className="sr-only">Toggle theme</span>
+    </Button>
   )
 }
 

apps/v4/content/docs/(root)/figma.mdx

@@ -16,7 +16,7 @@ description: Every component recreated in Figma. With customizable props, typogr
 
 ## Paid
 
-- [shadcn/ui kit](https://shadcndesign.com) by [ Matt Wierzbicki](https://x.com/matsugfx) - A premium, always up-to-date UI kit for Figma - shadcn/ui compatible and optimized for smooth design-to-dev handoff.
+- [shadcn/ui kit](https://shadcndesign.com) by [Matt Wierzbicki](https://x.com/matsugfx) - A premium, always up-to-date UI kit for Figma - shadcn/ui compatible and optimized for smooth design-to-dev handoff.
 - [Shadcraft UI Kit](https://shadcraft.com) - The most advanced shadcn-compatible kit with instant theming via [tweakcn](https://tweakcn.com), a pro library of components and templates, and complete coverage of shadcn components and blocks.
 - [shadcn/studio UI Kit](https://shadcnstudio.com/figma) - Accelerate design & development with a shadcn/ui compatible Figma kit with updated components, 550+ blocks, 10+ templates, 20+ themes, and an AI tool that converts designs into shadcn/ui code.
 - [Shadcnblocks.com](https://www.shadcnblocks.com) - A Premium Shadcn Figma UI Kit with components, 500+ pro blocks, shadcn theme variables, light/dark mode and Figma MCP ready.

apps/v4/content/docs/(root)/index.mdx

@@ -27,7 +27,7 @@ shadcn/ui hands you the actual component code. You have full control to customiz
 
 _In a typical library, if you need to change a button’s behavior, you have to override styles or wrap the component. With shadcn/ui, you simply edit the button code directly._
 
-<Accordion collapsible>
+<Accordion type="single" collapsible>
   <AccordionItem value="faq-1" className="border-none">
     <AccordionTrigger>
       How do I pull upstream updates in an Open Code approach?

apps/v4/content/docs/(root)/new.mdx

@@ -3,7 +3,7 @@ title: Your project is ready!
 description: You've created a new project with shadcn/ui.
 ---
 
-Here's a few things you can do to get started building with shadcn/ui.
+Here are a few things you can do to get started building with shadcn/ui.
 
 ## Add Components
 

apps/v4/content/docs/(root)/react-19.mdx

@@ -121,7 +121,7 @@ The process for adding components is the same as above. Select a flag to resolve
 
 ## Upgrade Status
 
-To make it easy for you track the progress of the upgrade, I've created a table below with React 19 support status for the shadcn/ui dependencies.
+To make it easy for you to track the progress of the upgrade, here is a table with the React 19 support status for the shadcn/ui dependencies.
 
 - ✅ - Works with React 19 using npm, pnpm, and bun.
 - 🚧 - Works with React 19 using pnpm and bun. Requires flag for npm. PR is in progress.

apps/v4/content/docs/(root)/tailwind-v4.mdx

@@ -193,7 +193,7 @@ Here's how you do it:
 }
 ```
 
-This change makes it much simpler to access your theme variables in both utility classes and outside of CSS for eg. using color values in JavaScript.
+This change makes it much simpler to access your theme variables in both utility classes and outside of CSS, e.g. using color values in JavaScript.
 
 ### 3. Update colors for charts
 
@@ -281,7 +281,7 @@ function AccordionItem({
 
 We've deprecated `tailwindcss-animate` in favor of `tw-animate-css`.
 
-New project will have `tw-animate-css` installed by default.
+New projects will have `tw-animate-css` installed by default.
 
 For existing projects, follow the steps below to migrate.
 

apps/v4/content/docs/changelog/2024-03-blocks.mdx

@@ -6,7 +6,7 @@ date: 2024-03-22
 
 One of the most requested features since launch has been layouts: admin dashboards with sidebar, marketing page sections, cards and more.
 
-**Today, we're launching [**Blocks**](/blocks)**.
+**Today, we're launching [Blocks](/blocks).**
 
 <a href="/blocks">
   <Image

apps/v4/content/docs/changelog/2024-03-breadcrumb-otp.mdx

@@ -22,4 +22,4 @@ A fully featured input OTP component. It has support for numeric and alphanumeri
 
 [Read the docs](/docs/components/input-otp)
 
-If you have a [v0](https://v0.dev), the new components are available for generation.
+If you have a [v0](https://v0.dev) account, the new components are available for generation.

apps/v4/content/docs/changelog/2024-08-npx-shadcn-init.mdx

@@ -8,10 +8,10 @@ The new CLI is now available. It's a complete rewrite with a lot of new features
 
 This is a major step towards distributing code that you and your LLMs can access and use.
 
-1. First up, the cli now has support for all major React framework out of the box. Next.js, Remix, Vite and Laravel. And when you init into a new app, we update your existing Tailwind files instead of overriding.
-2. A component now ship its own dependencies. Take the accordion for example, it can define its Tailwind keyframes. When you add it to your project, we'll update your tailwind.config.ts file accordingly.
+1. First up, the CLI now has support for all major React frameworks out of the box. Next.js, Remix, Vite and Laravel. And when you init into a new app, we update your existing Tailwind files instead of overriding.
+2. A component now ships its own dependencies. Take the accordion for example, it can define its Tailwind keyframes. When you add it to your project, we'll update your tailwind.config.ts file accordingly.
 3. You can also install remote components using url. `npx shadcn add https://acme.com/registry/navbar.json`.
-4. We have also improve the init command. It does framework detection and can even init a brand new Next.js app in one command. `npx shadcn init`.
+4. We have also improved the init command. It does framework detection and can even init a brand new Next.js app in one command. `npx shadcn init`.
 5. We have created a new schema that you can use to ship your own component registry. And since it has support for urls, you can even use it to distribute private components.
 6. And a few more updates like better error handling and monorepo support.
 
@@ -42,4 +42,4 @@ To update an existing project to use the new CLI, update your `components.json`
 }
 ```
 
-If you're using a different import alias prefix eg `~`, replace `@` with your prefix.
+If you're using a different import alias prefix, e.g. `~`, replace `@` with your prefix.

apps/v4/content/docs/changelog/2025-04-cross-framework.mdx

@@ -1,9 +1,9 @@
 ---
-title: March 2025 - Cross-framework Route Support
-description: The shadcn CLI can now auto-detect your framework and adapts routes for you.
+title: April 2025 - Cross-framework Route Support
+description: The shadcn CLI can now auto-detect your framework and adapt routes for you.
 date: 2025-04-09
 ---
 
-The shadcn CLI can now auto-detect your framework and adapts routes for you.
+The shadcn CLI can now auto-detect your framework and adapt routes for you.
 
 Works with all frameworks including Laravel, Vite and React Router.

apps/v4/content/docs/changelog/2025-04-mcp.mdx

@@ -10,7 +10,7 @@ We're working on zero-config MCP support for shadcn/ui registry. One command `np
   src="/images/mcp.jpeg"
   width="1432"
   height="1050"
-  alt="Lift Mode"
+  alt="MCP Server"
   className="mt-6 w-full overflow-hidden rounded-lg border"
 />
 

apps/v4/content/docs/changelog/2025-04-shadcn-2-5.mdx

@@ -1,5 +1,5 @@
 ---
-title: March 2025 - shadcn 2.5.0
+title: April 2025 - shadcn 2.5.0
 description: Resolve anywhere - registries can now place files anywhere in an app.
 date: 2025-04-26
 ---

apps/v4/content/docs/changelog/2025-06-radix-ui.mdx

@@ -13,7 +13,7 @@ npx shadcn@latest migrate radix
 It will automatically update all imports in your `ui` components and install `radix-ui` as a dependency.
 
 ```diff showLineNumbers title="components/ui/alert-dialog.tsx"
-- import * as AlertDialogPrimitive from "@radix-ui/react-dialog"
+- import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 + import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
 ```
 

apps/v4/content/docs/changelog/2025-08-cli-3-mcp.mdx

@@ -91,7 +91,7 @@ Need to keep your components private? We've got you covered. Configure authentic
 
 Your private components stay private. Perfect for enterprise teams with proprietary UI libraries.
 
-We support all major authentication methods: basic auth, bearer token, api key query params and custom headers.
+We support all major authentication methods: basic auth, bearer token, API key query params and custom headers.
 
 See the [authentication docs](/docs/registry/authentication) for more details.
 
@@ -125,7 +125,7 @@ Preview components before installing them. Search across multiple registries. Se
   src="/images/mcp.jpeg"
   width="1432"
   height="1050"
-  alt="Lift Mode"
+  alt="MCP Server"
   className="mt-6 w-full overflow-hidden rounded-lg border"
 />
 
@@ -175,7 +175,7 @@ Missing environment variables? The CLI tells you exactly what's needed:
 Registry "@private" requires the following environment variables:
   • REGISTRY_TOKEN
 
-Set the required environment variables to your .env or .env.local file.
+Set the required environment variables in your .env or .env.local file.
 ```
 
 Registry authors can provide custom error messages in their responses to help users and AI agents understand and fix issues quickly.

apps/v4/content/docs/changelog/2025-09-registry-index.mdx

@@ -6,7 +6,7 @@ date: 2025-09-02
 
 We've created an index of open source registries that you can install items from.
 
-You can search, view and add items from the registry index without configuring the `.components.json` file.
+You can search, view and add items from the registry index without configuring the `components.json` file.
 
 They'll be automatically added to your `components.json` file for you.
 

apps/v4/content/docs/changelog/2025-10-new-components.mdx

@@ -173,7 +173,7 @@ You can also add buttons to the input group.
   className="[&_.preview]:h-[300px] [&_pre]:h-[300px]!"
 />
 
-Or text, labels, tooltips,...
+Or text, labels, tooltips, ...
 
 <ComponentPreview
   name="input-group-text"
@@ -266,7 +266,7 @@ between vertical and horizontal layouts based on container width. Done.
   className="[&_.preview]:h-[600px] [&_pre]:h-[600px]!"
 />
 
-Wait here's more. Wrap your fields in `FieldLabel` to create a selectable field group. Really easy. And it looks great.
+Wait, here's more. Wrap your fields in `FieldLabel` to create a selectable field group. Really easy. And it looks great.
 
 <ComponentPreview
   name="field-choice-card"

apps/v4/content/docs/changelog/2025-12-shadcn-create.mdx

@@ -14,7 +14,7 @@ Today, we're changing that: **npx shadcn create**.
 
 Customize Everything. Pick your component library, icons, base color, theme, fonts and create your own version of shadcn/ui.
 
-We're starting with **5 new visual styles,** designed to help your UI actually feel like _your_ UI.
+We're starting with **5 new visual styles**, designed to help your UI actually feel like _your_ UI.
 
 - **Vega** – The classic shadcn/ui look.
 - **Nova** – Reduced padding and margins for compact layouts.

apps/v4/content/docs/changelog/2026-03-cli-v4.mdx

@@ -34,7 +34,7 @@ Use it to scaffold projects from custom config, share with your team or publish
 
 ## Switching presets
 
-When you're working on a new app, it can take a few tries to find something you like so we've made switching presets really easy. Run init --preset in your app, and the cli will take care of reconfiguring everything including your components.
+When you're working on a new app, it can take a few tries to find something you like so we've made switching presets really easy. Run `init --preset` in your app, and the CLI will take care of reconfiguring everything, including your components.
 
 ```bash
 npx shadcn@latest init --preset ad3qkJ7

apps/v4/content/docs/components/base/alert-dialog.mdx

@@ -161,7 +161,7 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
 
 ### size
 
-Use the `size` props on the `AlertDialogContent` component to control the size of the alert dialog. It accepts the following values:
+Use the `size` prop on the `AlertDialogContent` component to control the size of the alert dialog. It accepts the following values:
 
 | Prop   | Type                | Default     |
 | ------ | ------------------- | ----------- |

apps/v4/content/docs/components/base/button.mdx

@@ -135,7 +135,7 @@ To create a button group, use the `ButtonGroup` component. See the [Button Group
 
 <ComponentPreview styleName="base-nova" name="button-group-demo" />
 
-### Link
+### As Link
 
 You can use the `buttonVariants` helper to make a link look like a button.
 

apps/v4/content/docs/components/base/carousel.mdx

@@ -182,7 +182,7 @@ You can pass options to the carousel using the `opts` prop. See the [Embla Carou
 
 ## API
 
-Use a state and the `setApi` props to get an instance of the carousel API.
+Use a state and the `setApi` prop to get an instance of the carousel API.
 
 <ComponentPreview
   styleName="base-nova"
@@ -319,4 +319,4 @@ The `direction` option accepts `"ltr"` or `"rtl"` and should match the `dir` pro
 
 ## API Reference
 
-See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on props and plugins.
+See the [Embla Carousel docs](https://www.embla-carousel.com/api/) for more information on props and plugins.

apps/v4/content/docs/components/base/chart.mdx

@@ -384,7 +384,7 @@ Charts have built-in support for theming. You can use css variables (recommended
     --chart-2: oklch(0.6 0.118 184.704);
   }
 
-  .dark: {
+  .dark {
     --chart-1: oklch(0.488 0.243 264.376);
     --chart-2: oklch(0.696 0.17 162.48);
   }

apps/v4/content/docs/components/base/combobox.mdx

@@ -222,7 +222,7 @@ Use `ComboboxGroup` and `ComboboxSeparator` to group items.
 
 ### Custom Items
 
-You can render custom component inside `ComboboxItem`.
+You can render a custom component inside `ComboboxItem`.
 
 <ComponentPreview styleName="base-nova" name="combobox-custom" />
 
@@ -240,7 +240,7 @@ Use the `disabled` prop to disable the combobox.
 
 ### Auto Highlight
 
-Use the `autoHighlight` prop automatically highlight the first item on filter.
+Use the `autoHighlight` prop to automatically highlight the first item on filter.
 
 <ComponentPreview styleName="base-nova" name="combobox-auto-highlight" />
 

apps/v4/content/docs/components/base/data-table.mdx

@@ -316,13 +316,13 @@ You can use the same approach to format other cells and headers.
 
 ## Row Actions
 
-Let's add row actions to our table. We'll use a `<Dropdown />` component for this.
+Let's add row actions to our table. We'll use a `<DropdownMenu />` component for this.
 
 <Steps className="mb-0 pt-2">
 
 ### Update columns definition
 
-Update our columns definition to add a new `actions` column. The `actions` cell returns a `<Dropdown />` component.
+Update our columns definition to add a new `actions` column. The `actions` cell returns a `<DropdownMenu />` component.
 
 ```tsx showLineNumbers title="app/payments/columns.tsx" {4,6-14,18-45}
 "use client"
@@ -472,7 +472,7 @@ Let's make the email column sortable.
 
 ### Update `<DataTable>`
 
-```tsx showLineNumbers title="app/payments/data-table.tsx" showLineNumbers {3,6,10,18,25-29}
+```tsx showLineNumbers title="app/payments/data-table.tsx" {3,6,10,18,25-29}
 "use client"
 
 import * as React from "react"

apps/v4/content/docs/components/base/dropdown-menu.mdx

@@ -82,8 +82,8 @@ import {
       <DropdownMenuLabel>My Account</DropdownMenuLabel>
       <DropdownMenuItem>Profile</DropdownMenuItem>
       <DropdownMenuItem>Billing</DropdownMenuItem>
-      <DropdownMenuSeparator />
     </DropdownMenuGroup>
+    <DropdownMenuSeparator />
     <DropdownMenuGroup>
       <DropdownMenuItem>Team</DropdownMenuItem>
       <DropdownMenuItem>Subscription</DropdownMenuItem>

apps/v4/content/docs/components/base/input-otp.mdx

@@ -1,6 +1,6 @@
 ---
 title: Input OTP
-description: Accessible one-time password component with copy paste functionality.
+description: Accessible one-time password component with copy-paste functionality.
 base: base
 component: true
 links:

apps/v4/content/docs/components/base/scroll-area.mdx

@@ -59,7 +59,7 @@ npm install @base-ui/react
 ## Usage
 
 ```tsx showLineNumbers
-import { ScrollArea } from "@/components/ui/scroll-area"
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
 ```
 
 ```tsx showLineNumbers

apps/v4/content/docs/components/base/sonner.mdx

@@ -31,7 +31,7 @@ Sonner is built and maintained by [emilkowalski](https://twitter.com/emilkowalsk
 npx shadcn@latest add sonner
 ```
 
-<Step>Add the Toaster component</Step>
+<Step>Add the Toaster component.</Step>
 
 ```tsx title="app/layout.tsx" {1,9} showLineNumbers
 import { Toaster } from "@/components/ui/sonner"
@@ -71,7 +71,7 @@ npm install sonner next-themes
   styleName="base-nova"
 />
 
-<Step>Add the Toaster component</Step>
+<Step>Add the Toaster component.</Step>
 
 ```tsx showLineNumbers title="app/layout.tsx" {1,8}
 import { Toaster } from "@/components/ui/sonner"

apps/v4/content/docs/components/base/spinner.mdx

@@ -88,13 +88,13 @@ Use the `size-*` utility class to change the size of the spinner.
 
 ### Button
 
-Add a spinner to a button to indicate a loading state. Remember to use the `data-icon="inline-start"` prop to add the spinner to the start of the button and the `data-icon="inline-end"` prop to add the spinner to the end of the button.
+Add a spinner to a button to indicate a loading state. Place the `<Spinner />` before the label with `data-icon="inline-start"` for a start position, or after the label with `data-icon="inline-end"` for an end position.
 
 <ComponentPreview styleName="base-nova" name="spinner-button" />
 
 ### Badge
 
-Add a spinner to a badge to indicate a loading state. Remember to use the `data-icon="inline-start"` prop to add the spinner to the start of the badge and the `data-icon="inline-end"` prop to add the spinner to the end of the badge.
+Add a spinner to a badge to indicate a loading state. Place the `<Spinner />` before the label with `data-icon="inline-start"` for a start position, or after the label with `data-icon="inline-end"` for an end position.
 
 <ComponentPreview styleName="base-nova" name="spinner-badge" />
 

apps/v4/content/docs/components/base/typography.mdx

@@ -1,6 +1,6 @@
 ---
 title: Typography
-description: Styles for headings, paragraphs, lists...etc
+description: Styles for headings, paragraphs, lists, etc.
 base: base
 component: true
 ---

apps/v4/content/docs/components/radix/alert-dialog.mdx

@@ -161,7 +161,7 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
 
 ### size
 
-Use the `size` props on the `AlertDialogContent` component to control the size of the alert dialog. It accepts the following values:
+Use the `size` prop on the `AlertDialogContent` component to control the size of the alert dialog. It accepts the following values:
 
 | Prop   | Type                | Default     |
 | ------ | ------------------- | ----------- |

apps/v4/content/docs/components/radix/button.mdx

@@ -135,7 +135,7 @@ To create a button group, use the `ButtonGroup` component. See the [Button Group
 
 <ComponentPreview styleName="radix-nova" name="button-group-demo" />
 
-### Link
+### As Child
 
 You can use the `asChild` prop on `<Button />` to make another component look like a button. Here's an example of a link that looks like a button.
 

apps/v4/content/docs/components/radix/carousel.mdx

@@ -319,4 +319,4 @@ The `direction` option accepts `"ltr"` or `"rtl"` and should match the `dir` pro
 
 ## API Reference
 
-See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on props and plugins.
+See the [Embla Carousel docs](https://www.embla-carousel.com/api/) for more information on props and plugins.

apps/v4/content/docs/components/radix/chart.mdx

@@ -384,7 +384,7 @@ Charts have built-in support for theming. You can use css variables (recommended
     --chart-2: oklch(0.6 0.118 184.704);
   }
 
-  .dark: {
+  .dark {
     --chart-1: oklch(0.488 0.243 264.376);
     --chart-2: oklch(0.696 0.17 162.48);
   }

apps/v4/content/docs/components/radix/combobox.mdx

@@ -222,7 +222,7 @@ Use `ComboboxGroup` and `ComboboxSeparator` to group items.
 
 ### Custom Items
 
-You can render custom component inside `ComboboxItem`.
+You can render a custom component inside `ComboboxItem`.
 
 <ComponentPreview styleName="base-nova" name="combobox-custom" />
 
@@ -240,7 +240,7 @@ Use the `disabled` prop to disable the combobox.
 
 ### Auto Highlight
 
-Use the `autoHighlight` prop automatically highlight the first item on filter.
+Use the `autoHighlight` prop to automatically highlight the first item on filter.
 
 <ComponentPreview styleName="base-nova" name="combobox-auto-highlight" />
 

apps/v4/content/docs/components/radix/data-table.mdx

@@ -316,13 +316,13 @@ You can use the same approach to format other cells and headers.
 
 ## Row Actions
 
-Let's add row actions to our table. We'll use a `<Dropdown />` component for this.
+Let's add row actions to our table. We'll use a `<DropdownMenu />` component for this.
 
 <Steps className="mb-0 pt-2">
 
 ### Update columns definition
 
-Update our columns definition to add a new `actions` column. The `actions` cell returns a `<Dropdown />` component.
+Update our columns definition to add a new `actions` column. The `actions` cell returns a `<DropdownMenu />` component.
 
 ```tsx showLineNumbers title="app/payments/columns.tsx" {4,6-14,18-45}
 "use client"
@@ -472,7 +472,7 @@ Let's make the email column sortable.
 
 ### Update `<DataTable>`
 
-```tsx showLineNumbers title="app/payments/data-table.tsx" showLineNumbers {3,6,10,18,25-28}
+```tsx showLineNumbers title="app/payments/data-table.tsx" {3,6,10,18,25-28}
 "use client"
 
 import * as React from "react"

apps/v4/content/docs/components/radix/dropdown-menu.mdx

@@ -83,8 +83,8 @@ import {
       <DropdownMenuItem>Profile</DropdownMenuItem>
       <DropdownMenuItem>Billing</DropdownMenuItem>
     </DropdownMenuGroup>
+    <DropdownMenuSeparator />
     <DropdownMenuGroup>
-      <DropdownMenuSeparator />
       <DropdownMenuItem>Team</DropdownMenuItem>
       <DropdownMenuItem>Subscription</DropdownMenuItem>
     </DropdownMenuGroup>

apps/v4/content/docs/components/radix/input-otp.mdx

@@ -1,6 +1,6 @@
 ---
 title: Input OTP
-description: Accessible one-time password component with copy paste functionality.
+description: Accessible one-time password component with copy-paste functionality.
 base: radix
 component: true
 links:

apps/v4/content/docs/components/radix/scroll-area.mdx

@@ -59,7 +59,7 @@ npm install radix-ui
 ## Usage
 
 ```tsx showLineNumbers
-import { ScrollArea } from "@/components/ui/scroll-area"
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
 ```
 
 ```tsx showLineNumbers

apps/v4/content/docs/components/radix/spinner.mdx

@@ -88,13 +88,13 @@ Use the `size-*` utility class to change the size of the spinner.
 
 ### Button
 
-Add a spinner to a button to indicate a loading state. Remember to use the `data-icon="inline-start"` prop to add the spinner to the start of the button and the `data-icon="inline-end"` prop to add the spinner to the end of the button.
+Add a spinner to a button to indicate a loading state. Place the `<Spinner />` before the label with `data-icon="inline-start"` for a start position, or after the label with `data-icon="inline-end"` for an end position.
 
 <ComponentPreview styleName="radix-nova" name="spinner-button" />
 
 ### Badge
 
-Add a spinner to a badge to indicate a loading state. Remember to use the `data-icon="inline-start"` prop to add the spinner to the start of the badge and the `data-icon="inline-end"` prop to add the spinner to the end of the badge.
+Add a spinner to a badge to indicate a loading state. Place the `<Spinner />` before the label with `data-icon="inline-start"` for a start position, or after the label with `data-icon="inline-end"` for an end position.
 
 <ComponentPreview styleName="radix-nova" name="spinner-badge" />
 

apps/v4/content/docs/components/radix/typography.mdx

@@ -1,6 +1,6 @@
 ---
 title: Typography
-description: Styles for headings, paragraphs, lists...etc
+description: Styles for headings, paragraphs, lists, etc.
 base: radix
 component: true
 ---

apps/v4/content/docs/dark-mode/next.mdx

@@ -1,6 +1,6 @@
 ---
 title: Next.js
-description: Adding dark mode to your next app.
+description: Adding dark mode to your Next.js app.
 ---
 
 <Steps>

apps/v4/content/docs/dark-mode/remix.mdx

@@ -1,6 +1,6 @@
 ---
 title: Remix
-description: Adding dark mode to your remix app.
+description: Adding dark mode to your Remix app.
 ---
 
 <Steps>
@@ -103,7 +103,7 @@ export function App() {
 
 ## Add an action route
 
-Create a file in `/routes/action.set-theme.ts`. Ensure that you pass the filename to the ThemeProvider component. This route it's used to store the preferred theme in the session storage when the user changes it.
+Create a file in `/routes/action.set-theme.ts`. Ensure that you pass the filename to the ThemeProvider component. This route is used to store the preferred theme in the session storage when the user changes it.
 
 ```tsx title="app/routes/action.set-theme.ts" showLineNumbers
 import { createThemeAction } from "remix-themes"

apps/v4/content/docs/dark-mode/vite.mdx

@@ -1,6 +1,6 @@
 ---
 title: Vite
-description: Adding dark mode to your vite app.
+description: Adding dark mode to your Vite app.
 ---
 
 ## Create a theme provider

apps/v4/content/docs/forms/next.mdx

@@ -28,7 +28,7 @@ This form leverages Next.js and React's built-in capabilities for form handling.
 - Uses Next.js `<Form />` component for navigation and progressive enhancement.
 - `<Field />` components for building accessible forms.
 - `useActionState` for managing form state and errors.
-- Handles loading states with pending prop.
+- Handles loading states with the pending prop.
 - Server Actions for handling form submissions.
 - Server-side validation using Zod.
 

apps/v4/content/docs/forms/react-hook-form.mdx

@@ -66,7 +66,7 @@ Here's a basic example of a form using the `<Controller />` component from React
 
 ### Create a form schema
 
-We'll start by defining the shape of our form using a Zod schema
+We'll start by defining the shape of our form using a Zod schema.
 
 <Callout icon={<InfoIcon />}>
   **Note:** This example uses `zod v3` for schema validation, but you can
@@ -89,7 +89,7 @@ const formSchema = z.object({
 })
 ```
 
-### Setup the form
+### Set up the form
 
 Next, we'll use the `useForm` hook from React Hook Form to create our form instance. We'll also add the Zod resolver to validate the form data.
 

apps/v4/content/docs/forms/tanstack-form.mdx

@@ -106,7 +106,7 @@ const formSchema = z.object({
 })
 ```
 
-### Setup the form
+### Set up the form
 
 Use the `useForm` hook from TanStack Form to create your form instance with Zod validation.
 

apps/v4/content/docs/installation/astro.mdx

@@ -1,6 +1,6 @@
 ---
 title: Astro
-description: Install and configure shadcn/ui for Astro
+description: Install and configure shadcn/ui for Astro.
 ---
 
 <Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
@@ -46,7 +46,7 @@ import { Button } from "@/components/ui/button"
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="generator" content={Astro.generator} />
-		<title>Astro + TailwindCSS</title>
+		<title>Astro + Tailwind CSS</title>
 	</head>
 
 	<body>

apps/v4/content/docs/installation/gatsby.mdx

@@ -1,6 +1,6 @@
 ---
 title: Gatsby
-description: Install and configure Gatsby.
+description: Install and configure shadcn/ui for Gatsby.
 ---
 
 <Callout className="mb-6 border-blue-600 bg-blue-50 dark:border-blue-900 dark:bg-blue-950 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
@@ -78,7 +78,7 @@ export const onCreateWebpackConfig = ({ actions }) => {
 
 ### Run the CLI
 
-Run the `shadcn` init command to setup your project:
+Run the `shadcn` init command to set up your project:
 
 ```bash
 npx shadcn@latest init

apps/v4/content/docs/installation/laravel.mdx

@@ -1,6 +1,6 @@
 ---
 title: Laravel
-description: Install and configure shadcn/ui for Laravel
+description: Install and configure shadcn/ui for Laravel.
 ---
 
 <Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
@@ -13,7 +13,7 @@ description: Install and configure shadcn/ui for Laravel
 
 ### Create Project
 
-Start by creating a new Laravel project with Inertia and React using the laravel installer:
+Start by creating a new Laravel project with Inertia and React using the Laravel installer:
 
 ```bash
 laravel new my-app --react

apps/v4/content/docs/installation/next.mdx

@@ -13,7 +13,7 @@ description: Install and configure shadcn/ui for Next.js.
 
 ### Create Project
 
-Run the `init` command to create a new Next.js project or to setup an existing one:
+Run the `init` command to create a new Next.js project or to set up an existing one:
 
 ```bash
 npx shadcn@latest init -t next

apps/v4/content/docs/installation/remix.mdx

@@ -21,7 +21,7 @@ npx create-remix@latest my-app
 
 ### Run the CLI
 
-Run the `shadcn` init command to setup your project:
+Run the `shadcn` init command to set up your project:
 
 ```bash
 npx shadcn@latest init

apps/v4/content/docs/installation/tanstack.mdx

@@ -16,13 +16,13 @@ description: Install and configure shadcn/ui for TanStack Start.
 Run the following command to create a new TanStack Start project with shadcn/ui:
 
 ```bash
-npx shadcn@latest init -t tanstack
+npx shadcn@latest init -t start
 ```
 
 **For a monorepo project, use `--monorepo` flag:**
 
 ```bash
-npx shadcn@latest init -t tanstack --monorepo
+npx shadcn@latest init -t start --monorepo
 ```
 
 ### Add Components

apps/v4/content/docs/installation/vite.mdx

@@ -13,7 +13,7 @@ description: Install and configure shadcn/ui for Vite.
 
 ### Create Project
 
-Run the `init` command to create a new Vite project or to setup an existing one:
+Run the `init` command to create a new Vite project or to set up an existing one:
 
 ```bash
 npx shadcn@latest init -t vite
@@ -38,7 +38,7 @@ The command above will add the `Button` component to your project. You can then
 ```tsx {1,6} showLineNumbers title="src/App.tsx"
 import { Button } from "@/components/ui/button"
 
-export default function Home() {
+export default function App() {
   return (
     <div>
       <Button>Click me</Button>

apps/v4/content/docs/registry/examples.mdx

@@ -44,7 +44,7 @@ The following registry item is a custom style that extends shadcn/ui. On `npx sh
 
 The following registry item is a custom style that doesn't extend shadcn/ui. See the `extends: none` field.
 
-It can be used to create a new style from scratch i.e custom components, css vars, dependencies, etc.
+It can be used to create a new style from scratch, i.e. custom components, css vars, dependencies, etc.
 
 On `npx shadcn add`, the following will:
 
@@ -69,21 +69,21 @@ On `npx shadcn add`, the following will:
   ],
   "cssVars": {
     "theme": {
-      "font-sans": "Inter, sans-serif",
-    }
+      "font-sans": "Inter, sans-serif"
+    },
     "light": {
       "main": "#88aaee",
       "bg": "#dfe5f2",
       "border": "#000",
       "text": "#000",
-      "ring": "#000",
+      "ring": "#000"
     },
     "dark": {
       "main": "#88aaee",
       "bg": "#272933",
       "border": "#000",
       "text": "#e6e6e6",
-      "ring": "#fff",
+      "ring": "#fff"
     }
   }
 }
@@ -147,7 +147,7 @@ The following style will init using shadcn/ui defaults and then add a custom `br
 
 ### Custom block
 
-This blocks installs the `login-01` block from the shadcn/ui registry.
+This block installs the `login-01` block from the shadcn/ui registry.
 
 ```json title="login-01.json" showLineNumbers
 {
@@ -174,7 +174,7 @@ This blocks installs the `login-01` block from the shadcn/ui registry.
 
 ### Install a block and override primitives
 
-You can install a block fromt the shadcn/ui registry and override the primitives using your custom ones.
+You can install a block from the shadcn/ui registry and override the primitives using your custom ones.
 
 On `npx shadcn add`, the following will:
 
@@ -325,7 +325,8 @@ A `registry:font` item installs a Google Font. The `font` field is required and
     "provider": "google",
     "import": "Inter",
     "variable": "--font-sans",
-    "subsets": ["latin"]
+    "subsets": ["latin"],
+    "dependency": "@fontsource-variable/inter"
   }
 }
 ```
@@ -343,7 +344,8 @@ A `registry:font` item installs a Google Font. The `font` field is required and
     "import": "JetBrains_Mono",
     "variable": "--font-mono",
     "weight": ["400", "500", "600", "700"],
-    "subsets": ["latin"]
+    "subsets": ["latin"],
+    "dependency": "@fontsource-variable/jetbrains-mono"
   }
 }
 ```
@@ -360,7 +362,8 @@ A `registry:font` item installs a Google Font. The `font` field is required and
     "provider": "google",
     "import": "Lora",
     "variable": "--font-serif",
-    "subsets": ["latin"]
+    "subsets": ["latin"],
+    "dependency": "@fontsource-variable/lora"
   }
 }
 ```
@@ -380,7 +383,8 @@ Use the `selector` field to apply a font to specific CSS selectors instead of gl
     "import": "Playfair_Display",
     "variable": "--font-heading",
     "subsets": ["latin"],
-    "selector": "h1, h2, h3, h4, h5, h6"
+    "selector": "h1, h2, h3, h4, h5, h6",
+    "dependency": "@fontsource-variable/playfair-display"
   }
 }
 ```
@@ -873,7 +877,7 @@ Note: you need to define both `@keyframes` in css and `theme` in cssVars to use
 You can add environment variables using the `envVars` field.
 
 ```json title="example-item.json" showLineNumbers {5-9}
-{»
+{
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "custom-item",
   "type": "registry:item",
@@ -917,7 +921,7 @@ Here's an example of a registry item that installs custom Cursor rules for _pyth
 }
 ```
 
-Here's another example for installation custom ESLint config:
+Here's another example for installing a custom ESLint config:
 
 ```json title=".eslintrc.json" showLineNumbers {9}
 {
@@ -940,7 +944,7 @@ You can also have a universal item that installs multiple files:
 ```json title="my-custom-starter-template.json" showLineNumbers {9}
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "my-custom-start-template",
+  "name": "my-custom-starter-template",
   "type": "registry:item",
   "dependencies": ["better-auth"],
   "files": [

apps/v4/content/docs/registry/faq.mdx

@@ -36,7 +36,7 @@ Here's an example of a complex component that installs a page, two components, a
     },
     {
       "path": "registry/new-york/hello-world/lib/format-date.ts",
-      "type": "registry:utils"
+      "type": "registry:lib"
     },
     {
       "path": "registry/new-york/hello-world/hello.config.ts",

apps/v4/content/docs/registry/open-in-v0.mdx

@@ -18,7 +18,7 @@ See [Build your Open in v0 button](https://v0.dev/chat/button) for more informat
 
 Here's a simple example of how to add a `Open in v0` button to your site.
 
-```jsx showLineNumbers
+```tsx showLineNumbers
 import { Button } from "@/components/ui/button"
 
 export function OpenInV0Button({ url }: { url: string }) {

apps/v4/content/docs/registry/registry-index.mdx

@@ -56,7 +56,6 @@ Here's an example of a valid registry:
         }
       ]
     }
-    }
   ]
 }
 ```

apps/v4/content/docs/registry/registry-item-json.mdx

@@ -339,6 +339,34 @@ Environment variables are added to the `.env.local` or `.env` file. Existing var
 
 </Callout>
 
+### font
+
+The `font` property is required for `registry:font` items. It configures the font family, provider, import name, CSS variable, and the npm package to install for non-Next.js projects.
+
+```json title="registry-item.json" showLineNumbers
+{
+  "font": {
+    "family": "'Inter Variable', sans-serif",
+    "provider": "google",
+    "import": "Inter",
+    "variable": "--font-sans",
+    "subsets": ["latin"],
+    "dependency": "@fontsource-variable/inter"
+  }
+}
+```
+
+| Property     | Type       | Required | Description                                                                               |
+| ------------ | ---------- | -------- | ----------------------------------------------------------------------------------------- |
+| `family`     | `string`   | Yes      | The CSS font-family value.                                                                |
+| `provider`   | `string`   | Yes      | The font provider. Currently only `google` is supported.                                  |
+| `import`     | `string`   | Yes      | The import name for the font from `next/font/google`.                                     |
+| `variable`   | `string`   | Yes      | The CSS variable name for the font (e.g., `--font-sans`, `--font-mono`).                  |
+| `weight`     | `string[]` | No       | Array of font weights to include.                                                         |
+| `subsets`    | `string[]` | No       | Array of font subsets to include.                                                         |
+| `selector`   | `string`   | No       | CSS selector to apply the font to. Defaults to `html`.                                    |
+| `dependency` | `string`   | No       | The npm package to install for non-Next.js projects (e.g., `@fontsource-variable/inter`). |
+
 ### docs
 
 Use `docs` to show custom documentation or message when installing your registry item via the CLI.

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.0.6",
+    "shadcn": "4.0.8",
     "shiki": "^1.10.1",
     "sonner": "^2.0.0",
     "swr": "^2.3.6",

apps/v4/public/r/registries-legacy.json

@@ -18,7 +18,7 @@
   "@basecn": "https://basecn.dev/r/{name}.json",
   "@better-upload": "https://better-upload.com/r/{name}.json",
   "@billingsdk": "https://billingsdk.com/r/{name}.json",
-  "@blocks": "https://blocks.so/r/{name}.json",
+  "@blocks-so": "https://blocks.so/r/{name}.json",
   "@bucharitesh": "https://bucharitesh.in/r/{name}.json",
   "@bundui": "https://bundui.io/r/{name}.json",
   "@cardcn": "https://cardcn.dev/r/{name}.json",
@@ -41,7 +41,7 @@
   "@gaia": "https://ui.heygaia.io/r/{name}.json",
   "@glass-ui": "https://glass-ui.crenspire.com/r/{name}.json",
   "@heseui": "https://www.heseui.com/r/{name}.json",
-  "@hooks": "https://shadcn-hooks.com/r/{name}.json",
+  "@shadcnhooks": "https://shadcn-hooks.com/r/{name}.json",
   "@intentui": "https://intentui.com/r/{name}",
   "@kibo-ui": "https://www.kibo-ui.com/r/{name}.json",
   "@kanpeki": "https://kanpeki.vercel.app/r/{name}.json",

apps/v4/public/r/registries.json

@@ -11,6 +11,12 @@
     "url": "https://ui.8starlabs.com/r/{name}.json",
     "description": "A set of beautifully designed components designed for developers who want niche, high-utility UI elements that you won't find in standard libraries."
   },
+  {
+    "name": "@unlumen-ui",
+    "homepage": "https://ui.unlumen.com",
+    "url": "https://ui.unlumen.com/r/{name}.json",
+    "description": "Primitives and components with serious attention to animation and design. Copy, own, ship."
+  },
   {
     "name": "@auth0",
     "homepage": "https://auth0.com",
@@ -114,7 +120,7 @@
     "description": "BillingSDK is an open-source React and Next.js component library for SaaS billing and payments. It offers ready-to-use, customizable components for subscriptions, invoices, usage-based pricing and billing - fully compatible with Dodo Payments and Stripe."
   },
   {
-    "name": "@blocks",
+    "name": "@blocks-so",
     "homepage": "https://blocks.so",
     "url": "https://blocks.so/r/{name}.json",
     "description": "A set of clean, modern application building blocks for you in your applications. Free and Open Source"
@@ -252,7 +258,7 @@
     "description": "Ready-to-use foundation components/blocks built on top of shadcn/ui."
   },
   {
-    "name": "@hooks",
+    "name": "@shadcnhooks",
     "homepage": "https://shadcn-hooks.com",
     "url": "https://shadcn-hooks.com/r/{name}.json",
     "description": "A comprehensive React Hooks Collection built with Shadcn."
@@ -269,6 +275,12 @@
     "url": "https://intentui.com/r/{name}",
     "description": "Accessible React component library to copy, customize, and own your UI."
   },
+  {
+    "name": "@jalco",
+    "homepage": "https://ui.justinlevine.me",
+    "url": "https://ui.justinlevine.me/r/{name}.json",
+    "description": "A curated collection of GitHub-integrated, documentation, and developer-facing components. Self-contained, zero-dependency, and production-ready."
+  },
   {
     "name": "@kibo-ui",
     "homepage": "https://www.kibo-ui.com/",
@@ -419,6 +431,12 @@
     "url": "https://ui.pacekit.dev/r/{name}.json",
     "description": "Carefully built UI blocks for real apps and dashboards, designed to integrate smoothly from early ideas to production releases."
   },
+  {
+    "name": "@pacekit-gsap",
+    "homepage": "https://gsap.pacekit.dev",
+    "url": "https://gsap.pacekit.dev/r/{name}.json",
+    "description": "Animated GSAP components crafted for smooth interaction and rich detail."
+  },
   {
     "name": "@pastecn",
     "homepage": "https://pastecn.com",
@@ -563,6 +581,12 @@
     "url": "https://shadcnstudio.com/r/{name}.json",
     "description": "An open-source set of shadcn/ui components, blocks, and templates with a powerful theme generator."
   },
+  {
+    "name": "@waves-cn",
+    "homepage": "https://waves-cn.vercel.app",
+    "url": "https://waves-cn.vercel.app/r/{name}.json",
+    "description": "A collection of wave players and waveform components built with wavesurfer.js and shadcn/ui."
+  },
   {
     "name": "@shadcn-editor",
     "homepage": "https://shadcn-editor.vercel.app",
@@ -869,6 +893,12 @@
     "url": "https://componentry.fun/r/{name}.json",
     "description": "Beautiful, interactive React + Tailwind components for modern product UIs."
   },
+  {
+    "name": "@paletteui",
+    "homepage": "https://paletteui.xyz",
+    "url": "https://paletteui.xyz/r/{name}.json",
+    "description": "Curated OKLCH color themes for shadcn/ui + visual theme editor with CSS, Tailwind v4, and Figma export."
+  },
   {
     "name": "@fluid",
     "homepage": "https://www.fluidfunctionalism.com",
@@ -880,5 +910,23 @@
     "homepage": "https://www.gammaui.com",
     "url": "https://www.gammaui.com/r/{name}.json",
     "description": "Beautifully designed landing page components built with React & Tailwind CSS & Motion."
+  },
+  {
+    "name": "@flx",
+    "homepage": "https://ui.flexnative.com",
+    "url": "https://ui.flexnative.com/r/{name}.json",
+    "description": "A collection of customizable UI blocks with interactive live previews"
+  },
+  {
+    "name": "@nexus-ui",
+    "homepage": "https://nexus-ui.dev",
+    "url": "https://nexus-ui.dev/r/{name}.json",
+    "description": "Open-source component library of composable, copy-paste primitives for building AI interfaces (chat, streaming, multimodal)"
+  },
+  {
+    "name": "@sabraman",
+    "homepage": "https://sabraman.ru/components",
+    "url": "https://sabraman.ru/r/{name}.json",
+    "description": "Legacy skeuomorphic UI components and blocks for shadcn."
   }
 ]

apps/v4/public/r/styles/base-lyra/font-dm-sans.json

@@ -10,6 +10,7 @@
     "variable": "--font-sans",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/dm-sans"
   }
 }

apps/v4/public/r/styles/base-lyra/font-figtree.json

@@ -10,6 +10,7 @@
     "variable": "--font-sans",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/figtree"
   }
 }

apps/v4/public/r/styles/base-lyra/font-geist-mono.json

@@ -10,6 +10,7 @@
     "variable": "--font-mono",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/geist-mono"
   }
 }

apps/v4/public/r/styles/base-lyra/font-geist.json

@@ -10,6 +10,7 @@
     "variable": "--font-sans",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/geist"
   }
 }

apps/v4/public/r/styles/base-lyra/font-inter.json

@@ -10,6 +10,7 @@
     "variable": "--font-sans",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/inter"
   }
 }

apps/v4/public/r/styles/base-lyra/font-jetbrains-mono.json

@@ -10,6 +10,7 @@
     "variable": "--font-mono",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/jetbrains-mono"
   }
 }

apps/v4/public/r/styles/base-lyra/font-lora.json

@@ -10,6 +10,7 @@
     "variable": "--font-serif",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/lora"
   }
 }

apps/v4/public/r/styles/base-lyra/font-merriweather.json

@@ -10,6 +10,7 @@
     "variable": "--font-serif",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/merriweather"
   }
 }

apps/v4/public/r/styles/base-lyra/font-noto-sans.json

@@ -7,6 +7,7 @@
     "family": "'Noto Sans Variable', sans-serif",
     "provider": "google",
     "import": "Noto_Sans",
-    "variable": "--font-sans"
+    "variable": "--font-sans",
+    "dependency": "@fontsource-variable/noto-sans"
   }
 }

apps/v4/public/r/styles/base-lyra/font-noto-serif.json

@@ -10,6 +10,7 @@
     "variable": "--font-serif",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/noto-serif"
   }
 }

apps/v4/public/r/styles/base-lyra/font-nunito-sans.json

@@ -7,6 +7,7 @@
     "family": "'Nunito Sans Variable', sans-serif",
     "provider": "google",
     "import": "Nunito_Sans",
-    "variable": "--font-sans"
+    "variable": "--font-sans",
+    "dependency": "@fontsource-variable/nunito-sans"
   }
 }

apps/v4/public/r/styles/base-lyra/font-outfit.json

@@ -10,6 +10,7 @@
     "variable": "--font-sans",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/outfit"
   }
 }

apps/v4/public/r/styles/base-lyra/font-playfair-display.json

@@ -10,6 +10,7 @@
     "variable": "--font-serif",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/playfair-display"
   }
 }

apps/v4/public/r/styles/base-lyra/font-public-sans.json

@@ -10,6 +10,7 @@
     "variable": "--font-sans",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/public-sans"
   }
 }

apps/v4/public/r/styles/base-lyra/font-raleway.json

@@ -10,6 +10,7 @@
     "variable": "--font-sans",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/raleway"
   }
 }

apps/v4/public/r/styles/base-lyra/font-roboto-slab.json

@@ -10,6 +10,7 @@
     "variable": "--font-serif",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/roboto-slab"
   }
 }

apps/v4/public/r/styles/base-lyra/font-roboto.json

@@ -10,6 +10,7 @@
     "variable": "--font-sans",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/roboto"
   }
 }

apps/v4/public/r/styles/base-lyra/registry.json

@@ -2838,7 +2838,8 @@
         "provider": "google",
         "import": "Geist",
         "variable": "--font-sans",
-        "subsets": ["latin"]
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/geist"
       }
     },
     {
@@ -2850,7 +2851,8 @@
         "provider": "google",
         "import": "Inter",
         "variable": "--font-sans",
-        "subsets": ["latin"]
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/inter"
       }
     },
     {
@@ -2861,7 +2863,8 @@
         "family": "'Noto Sans Variable', sans-serif",
         "provider": "google",
         "import": "Noto_Sans",
-        "variable": "--font-sans"
+        "variable": "--font-sans",
+        "dependency": "@fontsource-variable/noto-sans"
       }
     },
     {
@@ -2872,7 +2875,8 @@
         "family": "'Nunito Sans Variable', sans-serif",
         "provider": "google",
         "import": "Nunito_Sans",
-        "variable": "--font-sans"
+        "variable": "--font-sans",
+        "dependency": "@fontsource-variable/nunito-sans"
       }
     },
     {
@@ -2884,7 +2888,8 @@
         "provider": "google",
         "import": "Figtree",
         "variable": "--font-sans",
-        "subsets": ["latin"]
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/figtree"
       }
     },
     {
@@ -2896,7 +2901,8 @@
         "provider": "google",
         "import": "Roboto",
         "variable": "--font-sans",
-        "subsets": ["latin"]
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/roboto"
       }
     },
     {
@@ -2908,7 +2914,8 @@
         "provider": "google",
         "import": "Raleway",
         "variable": "--font-sans",
-        "subsets": ["latin"]
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/raleway"
       }
     },
     {
@@ -2920,7 +2927,8 @@
         "provider": "google",
         "import": "DM_Sans",
         "variable": "--font-sans",
-        "subsets": ["latin"]
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/dm-sans"
       }
     },
     {
@@ -2932,7 +2940,8 @@
         "provider": "google",
         "import": "Public_Sans",
         "variable": "--font-sans",
-        "subsets": ["latin"]
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/public-sans"
       }
     },
     {
@@ -2944,7 +2953,8 @@
         "provider": "google",
         "import": "Outfit",
         "variable": "--font-sans",
-        "subsets": ["latin"]
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/outfit"
       }
     },
     {
@@ -2956,7 +2966,8 @@
         "provider": "google",
         "import": "JetBrains_Mono",
         "variable": "--font-mono",
-        "subsets": ["latin"]
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/jetbrains-mono"
       }
     },
     {
@@ -2968,7 +2979,8 @@
         "provider": "google",
         "import": "Geist_Mono",
         "variable": "--font-mono",
-        "subsets": ["latin"]
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/geist-mono"
       }
     },
     {
@@ -2980,7 +2992,8 @@
         "provider": "google",
         "import": "Noto_Serif",
         "variable": "--font-serif",
-        "subsets": ["latin"]
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/noto-serif"
       }
     },
     {
@@ -2992,7 +3005,8 @@
         "provider": "google",
         "import": "Roboto_Slab",
         "variable": "--font-serif",
-        "subsets": ["latin"]
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/roboto-slab"
       }
     },
     {
@@ -3004,7 +3018,8 @@
         "provider": "google",
         "import": "Merriweather",
         "variable": "--font-serif",
-        "subsets": ["latin"]
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/merriweather"
       }
     },
     {
@@ -3016,7 +3031,8 @@
         "provider": "google",
         "import": "Lora",
         "variable": "--font-serif",
-        "subsets": ["latin"]
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/lora"
       }
     },
     {
@@ -3028,7 +3044,8 @@
         "provider": "google",
         "import": "Playfair_Display",
         "variable": "--font-serif",
-        "subsets": ["latin"]
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/playfair-display"
       }
     }
   ]

apps/v4/public/r/styles/base-maia/font-dm-sans.json

@@ -10,6 +10,7 @@
     "variable": "--font-sans",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/dm-sans"
   }
 }

apps/v4/public/r/styles/base-maia/font-figtree.json

@@ -10,6 +10,7 @@
     "variable": "--font-sans",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/figtree"
   }
 }

apps/v4/public/r/styles/base-maia/font-geist-mono.json

@@ -10,6 +10,7 @@
     "variable": "--font-mono",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/geist-mono"
   }
 }

apps/v4/public/r/styles/base-maia/font-geist.json

@@ -10,6 +10,7 @@
     "variable": "--font-sans",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/geist"
   }
 }

apps/v4/public/r/styles/base-maia/font-inter.json

@@ -10,6 +10,7 @@
     "variable": "--font-sans",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/inter"
   }
 }

apps/v4/public/r/styles/base-maia/font-jetbrains-mono.json

@@ -10,6 +10,7 @@
     "variable": "--font-mono",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/jetbrains-mono"
   }
 }

apps/v4/public/r/styles/base-maia/font-lora.json

@@ -10,6 +10,7 @@
     "variable": "--font-serif",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/lora"
   }
 }

apps/v4/public/r/styles/base-maia/font-merriweather.json

@@ -10,6 +10,7 @@
     "variable": "--font-serif",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/merriweather"
   }
 }

apps/v4/public/r/styles/base-maia/font-noto-sans.json

@@ -7,6 +7,7 @@
     "family": "'Noto Sans Variable', sans-serif",
     "provider": "google",
     "import": "Noto_Sans",
-    "variable": "--font-sans"
+    "variable": "--font-sans",
+    "dependency": "@fontsource-variable/noto-sans"
   }
 }

apps/v4/public/r/styles/base-maia/font-noto-serif.json

@@ -10,6 +10,7 @@
     "variable": "--font-serif",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/noto-serif"
   }
 }

apps/v4/public/r/styles/base-maia/font-nunito-sans.json

@@ -7,6 +7,7 @@
     "family": "'Nunito Sans Variable', sans-serif",
     "provider": "google",
     "import": "Nunito_Sans",
-    "variable": "--font-sans"
+    "variable": "--font-sans",
+    "dependency": "@fontsource-variable/nunito-sans"
   }
 }

apps/v4/public/r/styles/base-maia/font-outfit.json

@@ -10,6 +10,7 @@
     "variable": "--font-sans",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/outfit"
   }
 }

apps/v4/public/r/styles/base-maia/font-playfair-display.json

@@ -10,6 +10,7 @@
     "variable": "--font-serif",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/playfair-display"
   }
 }

apps/v4/public/r/styles/base-maia/font-public-sans.json

@@ -10,6 +10,7 @@
     "variable": "--font-sans",
     "subsets": [
       "latin"
-    ]
+    ],
+    "dependency": "@fontsource-variable/public-sans"
   }
 }