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

@@ -13,6 +13,44 @@ on:
       - "apps/v4/registry/directory.json"
 
 jobs:
+  check-registry-sync:
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    name: check-registry-sync
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - name: Check changed files
+        id: changed
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          CHANGED_FILES=$(gh pr diff ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --name-only)
+
+          DIRECTORY_CHANGED=false
+          REGISTRIES_CHANGED=false
+
+          if echo "$CHANGED_FILES" | grep -q "^apps/v4/registry/directory.json$"; then
+            DIRECTORY_CHANGED=true
+          fi
+
+          if echo "$CHANGED_FILES" | grep -q "^apps/v4/public/r/registries.json$"; then
+            REGISTRIES_CHANGED=true
+          fi
+
+          echo "directory_changed=$DIRECTORY_CHANGED" >> $GITHUB_OUTPUT
+          echo "registries_changed=$REGISTRIES_CHANGED" >> $GITHUB_OUTPUT
+
+      - name: Flag missing registries.json update
+        if: steps.changed.outputs.directory_changed == 'true' && steps.changed.outputs.registries_changed == 'false'
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          gh pr edit ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --add-label "registries: invalid"
+          gh pr comment ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --body "can you run \`pnpm registry:build\` and commit the json files please?"
+          exit 1
+
   validate:
     runs-on: ubuntu-latest
     name: pnpm validate:registries
@@ -28,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

.prettierignore

@@ -5,3 +5,4 @@ build
 .contentlayer
 **/fixtures
 deprecated
+apps/v4/registry/styles/**/*.css

apps/v4/.prettierignore

@@ -5,3 +5,4 @@ build
 .contentlayer
 registry/__index__.tsx
 content/docs/components/calendar.mdx
+registry/styles/**/*.css

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

@@ -82,6 +82,11 @@ export function MenuAccentPicker({
                   key={accent.value}
                   value={accent.value}
                   closeOnClick={isMobile}
+                  disabled={
+                    accent.value === "bold" &&
+                    (params.menuColor === "default-translucent" ||
+                      params.menuColor === "inverted-translucent")
+                  }
                 >
                   {accent.label}
                 </PickerRadioItem>

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/design-system-provider.tsx

@@ -6,7 +6,6 @@ import {
   buildRegistryTheme,
   DEFAULT_CONFIG,
   type DesignSystemConfig,
-  type RadiusValue,
 } from "@/registry/config"
 import { useIframeMessageListener } from "@/app/(create)/hooks/use-iframe-sync"
 import { FONTS } from "@/app/(create)/lib/fonts"
@@ -15,6 +14,46 @@ import {
   type DesignSystemSearchParams,
 } from "@/app/(create)/lib/search-params"
 
+const THEME_STYLE_ELEMENT_ID = "design-system-theme-vars"
+const MANAGED_BODY_CLASS_PREFIXES = ["style-", "base-color-"] as const
+
+type RegistryThemeCssVars = NonNullable<
+  ReturnType<typeof buildRegistryTheme>["cssVars"]
+>
+
+function removeManagedBodyClasses(body: Element) {
+  for (const className of Array.from(body.classList)) {
+    if (
+      MANAGED_BODY_CLASS_PREFIXES.some((prefix) => className.startsWith(prefix))
+    ) {
+      body.classList.remove(className)
+    }
+  }
+}
+
+function buildCssRule(selector: string, cssVars?: Record<string, string>) {
+  const declarations = Object.entries(cssVars ?? {})
+    .filter(([, value]) => Boolean(value))
+    .map(([key, value]) => `  --${key}: ${value};`)
+    .join("\n")
+
+  if (!declarations) {
+    return `${selector} {}\n`
+  }
+
+  return `${selector} {\n${declarations}\n}\n`
+}
+
+function buildThemeCssText(cssVars: RegistryThemeCssVars) {
+  return [
+    buildCssRule(":root", {
+      ...(cssVars.theme ?? {}),
+      ...(cssVars.light ?? {}),
+    }),
+    buildCssRule(".dark", cssVars.dark),
+  ].join("\n")
+}
+
 export function DesignSystemProvider({
   children,
 }: {
@@ -24,19 +63,38 @@ export function DesignSystemProvider({
     shallow: true, // No need to go through the server…
     history: "replace", // …or push updates into the iframe history.
   })
-  const [liveSearchParams, setLiveSearchParams] = React.useState(searchParams)
   const [isReady, setIsReady] = React.useState(false)
   const { style, theme, font, baseColor, menuAccent, menuColor, radius } =
-    liveSearchParams
+    searchParams
   const effectiveRadius = style === "lyra" ? "none" : radius
+  const selectedFont = React.useMemo(
+    () => FONTS.find((fontOption) => fontOption.value === font),
+    [font]
+  )
+  const initialFontSansRef = React.useRef<string | null>(null)
 
   React.useEffect(() => {
-    setLiveSearchParams(searchParams)
-  }, [searchParams])
+    initialFontSansRef.current =
+      document.documentElement.style.getPropertyValue("--font-sans")
+
+    return () => {
+      removeManagedBodyClasses(document.body)
+      document.getElementById(THEME_STYLE_ELEMENT_ID)?.remove()
+
+      if (initialFontSansRef.current) {
+        document.documentElement.style.setProperty(
+          "--font-sans",
+          initialFontSansRef.current
+        )
+        return
+      }
+
+      document.documentElement.style.removeProperty("--font-sans")
+    }
+  }, [])
 
   const handleDesignSystemMessage = React.useCallback(
     (nextParams: DesignSystemSearchParams) => {
-      setLiveSearchParams(nextParams)
       setSearchParams(nextParams)
     },
     [setSearchParams]
@@ -46,11 +104,7 @@ export function DesignSystemProvider({
 
   React.useEffect(() => {
     if (style === "lyra" && radius !== "none") {
-      setLiveSearchParams((prev) => ({
-        ...prev,
-        radius: "none",
-      }))
-      setSearchParams({ radius: "none" as RadiusValue })
+      setSearchParams({ radius: "none" })
     }
   }, [style, radius, setSearchParams])
 
@@ -63,27 +117,19 @@ export function DesignSystemProvider({
     const body = document.body
 
     // Iterate over a snapshot so removals do not affect traversal.
-    Array.from(body.classList).forEach((className) => {
-      if (
-        className.startsWith("style-") ||
-        className.startsWith("base-color-")
-      ) {
-        body.classList.remove(className)
-      }
-    })
+    removeManagedBodyClasses(body)
     body.classList.add(`style-${style}`, `base-color-${baseColor}`)
 
     // Update font.
     // Always set --font-sans for the preview so the selected font is visible.
     // The font type (sans/serif/mono) is metadata for the CLI updater.
-    const selectedFont = FONTS.find((f) => f.value === font)
     if (selectedFont) {
       const fontFamily = selectedFont.font.style.fontFamily
       document.documentElement.style.setProperty("--font-sans", fontFamily)
     }
 
     setIsReady(true)
-  }, [style, theme, font, baseColor])
+  }, [style, theme, font, baseColor, selectedFont])
 
   const registryTheme = React.useMemo(() => {
     if (!baseColor || !theme || !menuAccent || !effectiveRadius) {
@@ -107,69 +153,83 @@ export function DesignSystemProvider({
       return
     }
 
-    const styleId = "design-system-theme-vars"
     let styleElement = document.getElementById(
-      styleId
+      THEME_STYLE_ELEMENT_ID
     ) as HTMLStyleElement | null
 
     if (!styleElement) {
       styleElement = document.createElement("style")
-      styleElement.id = styleId
+      styleElement.id = THEME_STYLE_ELEMENT_ID
       document.head.appendChild(styleElement)
     }
 
-    const {
-      light: lightVars,
-      dark: darkVars,
-      theme: themeVars,
-    } = registryTheme.cssVars
-
-    let cssText = ":root {\n"
-    // Add theme vars (shared across light/dark).
-    if (themeVars) {
-      Object.entries(themeVars).forEach(([key, value]) => {
-        if (value) {
-          cssText += `  --${key}: ${value};\n`
-        }
-      })
-    }
-    // Add light mode vars.
-    if (lightVars) {
-      Object.entries(lightVars).forEach(([key, value]) => {
-        if (value) {
-          cssText += `  --${key}: ${value};\n`
-        }
-      })
-    }
-    cssText += "}\n\n"
-
-    cssText += ".dark {\n"
-    if (darkVars) {
-      Object.entries(darkVars).forEach(([key, value]) => {
-        if (value) {
-          cssText += `  --${key}: ${value};\n`
-        }
-      })
-    }
-    cssText += "}\n"
-
-    styleElement.textContent = cssText
+    styleElement.textContent = buildThemeCssText(registryTheme.cssVars)
   }, [registryTheme])
 
   // Handle menu color inversion by adding/removing dark class to elements with cn-menu-target.
-  React.useEffect(() => {
+  // useLayoutEffect to apply classes synchronously before paint, avoiding flash.
+  React.useLayoutEffect(() => {
     if (!menuColor) {
       return
     }
 
+    const isInvertedMenu =
+      menuColor === "inverted" || menuColor === "inverted-translucent"
+    const isTranslucentMenu =
+      menuColor === "default-translucent" ||
+      menuColor === "inverted-translucent"
+    let frameId = 0
+
     const updateMenuElements = () => {
-      const menuElements = document.querySelectorAll(".cn-menu-target")
-      menuElements.forEach((element) => {
-        if (menuColor === "inverted") {
-          element.classList.add("dark")
-        } else {
-          element.classList.remove("dark")
+      const allElements = document.querySelectorAll<HTMLElement>(
+        ".cn-menu-target, [data-menu-translucent]"
+      )
+
+      if (allElements.length === 0) {
+        return
+      }
+
+      // Disable transitions while toggling classes.
+      allElements.forEach((element) => {
+        element.style.transition = "none"
+      })
+
+      allElements.forEach((element) => {
+        if (element.classList.contains("cn-menu-target")) {
+          if (isInvertedMenu) {
+            element.classList.add("dark")
+          } else {
+            element.classList.remove("dark")
+          }
         }
+
+        // When translucent is enabled, move from data-attr to class so styles apply.
+        // When disabled, move back to a data-attr so the element stays queryable
+        // for future toggles without losing its identity as a menu element.
+        if (isTranslucentMenu) {
+          element.classList.add("cn-menu-translucent")
+          element.removeAttribute("data-menu-translucent")
+        } else if (element.classList.contains("cn-menu-translucent")) {
+          element.classList.remove("cn-menu-translucent")
+          element.setAttribute("data-menu-translucent", "")
+        }
+      })
+
+      // Force a reflow, then re-enable transitions.
+      void document.body.offsetHeight
+      allElements.forEach((element) => {
+        element.style.transition = ""
+      })
+    }
+
+    const scheduleMenuUpdate = () => {
+      if (frameId) {
+        return
+      }
+
+      frameId = window.requestAnimationFrame(() => {
+        frameId = 0
+        updateMenuElements()
       })
     }
 
@@ -178,7 +238,7 @@ export function DesignSystemProvider({
 
     // Watch for new menu elements being added to the DOM.
     const observer = new MutationObserver(() => {
-      updateMenuElements()
+      scheduleMenuUpdate()
     })
 
     observer.observe(document.body, {
@@ -188,6 +248,9 @@ export function DesignSystemProvider({
 
     return () => {
       observer.disconnect()
+      if (frameId) {
+        window.cancelAnimationFrame(frameId)
+      }
     }
   }, [menuColor])
 

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

@@ -1,6 +1,8 @@
 "use client"
 
 import * as React from "react"
+import { Menu02Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
 import { useTheme } from "next-themes"
 
 import { useMounted } from "@/hooks/use-mounted"
@@ -10,99 +12,37 @@ import {
   Picker,
   PickerContent,
   PickerGroup,
+  PickerLabel,
   PickerRadioGroup,
   PickerRadioItem,
+  PickerSeparator,
   PickerTrigger,
 } from "@/app/(create)/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+import {
+  isTranslucentMenuColor,
+  useDesignSystemSearchParams,
+} from "@/app/(create)/lib/search-params"
 
-const MENU_OPTIONS = [
-  {
-    value: "default" as const,
-    label: "Default",
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="128"
-        height="128"
-        viewBox="0 0 24 24"
-        fill="none"
-        role="img"
-        stroke="currentColor"
-        className="size-4 text-foreground"
-      >
-        <path
-          d="M2 11.5C2 7.02166 2 4.78249 3.39124 3.39124C4.78249 2 7.02166 2 11.5 2C15.9783 2 18.2175 2 19.6088 3.39124C21 4.78249 21 7.02166 21 11.5C21 15.9783 21 18.2175 19.6088 19.6088C18.2175 21 15.9783 21 11.5 21C7.02166 21 4.78249 21 3.39124 19.6088C2 18.2175 2 15.9783 2 11.5Z"
-          stroke="currentColor"
-          strokeWidth="2"
-        />
-        <path
-          d="M8.5 11.5L14.5001 11.5"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M9.5 15H13.5"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M7.5 8H15.5"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    ),
-  },
-  {
-    value: "inverted" as const,
-    label: "Inverted",
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="128"
-        height="128"
-        viewBox="0 0 24 24"
-        fill="none"
-        role="img"
-        className="size-4 fill-background"
-      >
-        <path
-          d="M2 11.5C2 7.02166 2 4.78249 3.39124 3.39124C4.78249 2 7.02166 2 11.5 2C15.9783 2 18.2175 2 19.6088 3.39124C21 4.78249 21 7.02166 21 11.5C21 15.9783 21 18.2175 19.6088 19.6088C18.2175 21 15.9783 21 11.5 21C7.02166 21 4.78249 21 3.39124 19.6088C2 18.2175 2 15.9783 2 11.5Z"
-          stroke="currentColor"
-          strokeWidth="2"
-        />
-        <path
-          d="M8.5 11.5L14.5001 11.5"
-          stroke="var(--foreground)"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M9.5 15H13.5"
-          stroke="var(--foreground)"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M7.5 8H15.5"
-          stroke="var(--foreground)"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    ),
-  },
-] as const
+type ColorChoice = "default" | "inverted"
+type SurfaceChoice = "solid" | "translucent"
+
+function getMenuColorValue(
+  color: ColorChoice,
+  translucent: boolean
+): MenuColorValue {
+  if (color === "default") {
+    return translucent ? "default-translucent" : "default"
+  }
+
+  return translucent ? "inverted-translucent" : "inverted"
+}
+
+const MENU_OPTIONS: { value: MenuColorValue; label: string }[] = [
+  { value: "default", label: "Default / Solid" },
+  { value: "default-translucent", label: "Default / Translucent" },
+  { value: "inverted", label: "Inverted / Solid" },
+  { value: "inverted-translucent", label: "Inverted / Translucent" },
+]
 
 export function MenuColorPicker({
   isMobile,
@@ -111,25 +51,69 @@ export function MenuColorPicker({
   isMobile: boolean
   anchorRef: React.RefObject<HTMLDivElement | null>
 }) {
+  const [params, setParams] = useDesignSystemSearchParams()
   const { resolvedTheme } = useTheme()
   const mounted = useMounted()
-  const [params, setParams] = useDesignSystemSearchParams()
+  const lastSolidMenuAccentRef = React.useRef(params.menuAccent)
+  const isDark = mounted && resolvedTheme === "dark"
   const currentMenu = MENU_OPTIONS.find(
     (menu) => menu.value === params.menuColor
   )
+  const colorChoice: ColorChoice =
+    params.menuColor === "inverted" ||
+    params.menuColor === "inverted-translucent"
+      ? "inverted"
+      : "default"
+  const surfaceChoice: SurfaceChoice =
+    params.menuColor === "default-translucent" ||
+    params.menuColor === "inverted-translucent"
+      ? "translucent"
+      : "solid"
+
+  React.useEffect(() => {
+    if (surfaceChoice === "solid") {
+      lastSolidMenuAccentRef.current = params.menuAccent
+    }
+  }, [params.menuAccent, surfaceChoice])
+
+  const setColor = (color: ColorChoice) => {
+    const nextMenuColor = getMenuColorValue(
+      color,
+      surfaceChoice === "translucent"
+    )
+
+    setParams({
+      menuColor: nextMenuColor,
+      ...(isTranslucentMenuColor(nextMenuColor) && { menuAccent: "subtle" }),
+    })
+  }
+
+  const setSurface = (choice: SurfaceChoice) => {
+    const isTranslucent = choice === "translucent"
+    const nextMenuColor = getMenuColorValue(colorChoice, isTranslucent)
+
+    setParams({
+      menuColor: nextMenuColor,
+      menuAccent: isTranslucent ? "subtle" : lastSolidMenuAccentRef.current,
+    })
+  }
 
   return (
     <div className="group/picker relative">
       <Picker>
-        <PickerTrigger disabled={mounted && resolvedTheme === "dark"}>
+        <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
-            <div className="text-xs text-muted-foreground">Menu Color</div>
-            <div className="text-sm font-medium text-foreground">
+            <div className="text-xs text-muted-foreground">Menu</div>
+            <div className="line-clamp-1 text-sm font-medium text-foreground">
               {currentMenu?.label}
             </div>
           </div>
           <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2.5">
-            {currentMenu?.icon}
+            <HugeiconsIcon
+              icon={Menu02Icon}
+              strokeWidth={2}
+              className="size-4"
+            />
           </div>
         </PickerTrigger>
         <PickerContent
@@ -137,24 +121,43 @@ export function MenuColorPicker({
           side={isMobile ? "top" : "right"}
           align={isMobile ? "center" : "start"}
         >
-          <PickerRadioGroup
-            value={currentMenu?.value}
-            onValueChange={(value) => {
-              setParams({ menuColor: value as MenuColorValue })
-            }}
-          >
-            <PickerGroup>
-              {MENU_OPTIONS.map((menu) => (
-                <PickerRadioItem
-                  key={menu.value}
-                  value={menu.value}
-                  closeOnClick={isMobile}
-                >
-                  {menu.label}
-                </PickerRadioItem>
-              ))}
-            </PickerGroup>
-          </PickerRadioGroup>
+          <PickerGroup>
+            <PickerLabel>Color</PickerLabel>
+            <PickerRadioGroup
+              value={colorChoice}
+              onValueChange={(value) => {
+                setColor(value as ColorChoice)
+              }}
+            >
+              <PickerRadioItem value="default" closeOnClick={isMobile}>
+                Default
+              </PickerRadioItem>
+              <PickerRadioItem
+                value="inverted"
+                closeOnClick={isMobile}
+                disabled={isDark}
+              >
+                Inverted
+              </PickerRadioItem>
+            </PickerRadioGroup>
+          </PickerGroup>
+          <PickerSeparator />
+          <PickerGroup>
+            <PickerLabel>Appearance</PickerLabel>
+            <PickerRadioGroup
+              value={surfaceChoice}
+              onValueChange={(value) => {
+                setSurface(value as SurfaceChoice)
+              }}
+            >
+              <PickerRadioItem value="solid" closeOnClick={isMobile}>
+                Solid
+              </PickerRadioItem>
+              <PickerRadioItem value="translucent" closeOnClick={isMobile}>
+                Translucent
+              </PickerRadioItem>
+            </PickerRadioGroup>
+          </PickerGroup>
         </PickerContent>
       </Picker>
       <LockButton

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/(create)/hooks/use-random.tsx

@@ -18,7 +18,10 @@ import {
   RANDOMIZE_BIASES,
   type RandomizeContext,
 } from "@/app/(create)/lib/randomize-biases"
-import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+import {
+  isTranslucentMenuColor,
+  useDesignSystemSearchParams,
+} from "@/app/(create)/lib/search-params"
 
 function randomItem<T>(array: readonly T[]): T {
   return array[Math.floor(Math.random() * array.length)]
@@ -68,12 +71,25 @@ export function useRandom() {
     const selectedIconLibrary = locks.has("iconLibrary")
       ? paramsRef.current.iconLibrary
       : randomItem(Object.values(iconLibraries)).name
-    const selectedMenuAccent = locks.has("menuAccent")
+    const lockedMenuAccent = locks.has("menuAccent")
       ? paramsRef.current.menuAccent
-      : randomItem(MENU_ACCENTS).value
+      : undefined
+    const availableMenuColors =
+      !locks.has("menuColor") && lockedMenuAccent === "bold"
+        ? MENU_COLORS.filter((menuColor) => {
+            return !isTranslucentMenuColor(menuColor.value)
+          })
+        : MENU_COLORS
     const selectedMenuColor = locks.has("menuColor")
       ? paramsRef.current.menuColor
-      : randomItem(MENU_COLORS).value
+      : randomItem(availableMenuColors).value
+    const selectedMenuAccent =
+      locks.has("menuAccent") || isTranslucentMenuColor(selectedMenuColor)
+        ? paramsRef.current.menuAccent === "bold" &&
+          isTranslucentMenuColor(selectedMenuColor)
+          ? "subtle"
+          : paramsRef.current.menuAccent
+        : randomItem(MENU_ACCENTS).value
 
     context.theme = selectedTheme
     context.font = selectedFont

apps/v4/app/(create)/init/route.ts

@@ -1,5 +1,6 @@
 import { NextResponse, type NextRequest } from "next/server"
 import { track } from "@vercel/analytics/server"
+import { encodePreset, isPresetCode } from "shadcn/preset"
 import { registryItemSchema } from "shadcn/schema"
 
 import { buildRegistryBase } from "@/registry/config"
@@ -14,6 +15,22 @@ export async function GET(request: NextRequest) {
       return NextResponse.json({ error: result.error }, { status: 400 })
     }
 
+    // Use the preset code from the URL if provided, otherwise encode one.
+    const presetParam = searchParams.get("preset")
+    const presetCode =
+      presetParam && isPresetCode(presetParam)
+        ? presetParam
+        : encodePreset({
+            style: result.data.style,
+            baseColor: result.data.baseColor,
+            theme: result.data.theme,
+            iconLibrary: result.data.iconLibrary,
+            font: result.data.font,
+            radius: result.data.radius,
+            menuAccent: result.data.menuAccent,
+            menuColor: result.data.menuColor,
+          } as Parameters<typeof encodePreset>[0])
+
     const registryBase = buildRegistryBase(result.data)
     const parseResult = registryItemSchema.safeParse(registryBase)
 
@@ -27,10 +44,12 @@ export async function GET(request: NextRequest) {
       )
     }
 
-    track("create_app", {
-      ...result.data,
-      preset: searchParams.get("preset") ?? "",
-    })
+    if (searchParams.get("track") === "1") {
+      track("create_app", {
+        ...result.data,
+        preset: presetCode,
+      })
+    }
 
     return NextResponse.json(parseResult.data)
   } catch (error) {

apps/v4/app/(create)/lib/search-params.ts

@@ -118,6 +118,46 @@ export type DesignSystemSearchParams = inferParserType<
   typeof designSystemSearchParams
 >
 
+export function isTranslucentMenuColor(
+  menuColor?: MenuColorValue | null
+): menuColor is "default-translucent" | "inverted-translucent" {
+  return (
+    menuColor === "default-translucent" || menuColor === "inverted-translucent"
+  )
+}
+
+function normalizePartialDesignSystemParams(
+  params: Partial<DesignSystemSearchParams>
+): Partial<DesignSystemSearchParams> {
+  if (
+    params.menuAccent === "bold" &&
+    isTranslucentMenuColor(params.menuColor ?? undefined)
+  ) {
+    return {
+      ...params,
+      menuAccent: "subtle",
+    }
+  }
+
+  return params
+}
+
+function normalizeDesignSystemParams(
+  params: DesignSystemSearchParams
+): DesignSystemSearchParams {
+  if (
+    params.menuAccent === "bold" &&
+    isTranslucentMenuColor(params.menuColor)
+  ) {
+    return {
+      ...params,
+      menuAccent: "subtle",
+    }
+  }
+
+  return params
+}
+
 // Wraps nuqs useQueryStates with transparent preset encoding/decoding.
 // - Reads: if ?preset=CODE is in the URL, decodes it and returns individual values.
 // - Writes: when design system params are set, encodes them into a preset code.
@@ -129,15 +169,16 @@ export function useDesignSystemSearchParams(options: Options = {}) {
   })
 
   // If preset param exists, decode it and overlay on raw params.
-  const params = React.useMemo(() => {
-    if (rawParams.preset && isPresetCode(rawParams.preset)) {
-      const decoded = decodePreset(rawParams.preset)
-      if (decoded) {
-        return { ...rawParams, ...decoded }
-      }
-    }
-    return rawParams
-  }, [rawParams])
+  const params = React.useMemo(
+    () =>
+      rawParams.preset && isPresetCode(rawParams.preset)
+        ? normalizeDesignSystemParams({
+            ...rawParams,
+            ...(decodePreset(rawParams.preset) ?? {}),
+          })
+        : normalizeDesignSystemParams(rawParams),
+    [rawParams]
+  )
 
   // Use ref so setParams callback stays stable across renders.
   const paramsRef = React.useRef(params)
@@ -156,8 +197,9 @@ export function useDesignSystemSearchParams(options: Options = {}) {
           ) => Partial<DesignSystemSearchParams>),
       setOptions?: Options
     ) => {
-      const resolvedUpdates =
+      const resolvedUpdates = normalizePartialDesignSystemParams(
         typeof updates === "function" ? updates(paramsRef.current) : updates
+      )
 
       const hasDesignSystemUpdate = DESIGN_SYSTEM_KEYS.some(
         (key) => key in resolvedUpdates
@@ -169,7 +211,10 @@ export function useDesignSystemSearchParams(options: Options = {}) {
       }
 
       // Merge current decoded values with updates.
-      const merged = { ...paramsRef.current, ...resolvedUpdates }
+      const merged = normalizeDesignSystemParams({
+        ...paramsRef.current,
+        ...resolvedUpdates,
+      })
 
       // Encode design system fields into a preset code.
       // Cast needed: merged values may include null from nuqs resets,

apps/v4/app/(create)/preview/[base]/[name]/page.tsx

@@ -135,7 +135,7 @@ export default async function BlockPage({
   }
 
   return (
-    <div className="relative">
+    <div className="relative bg-background">
       <PreventScrollOnFocusScript />
       <PreviewStyle />
       <ActionMenuScript />

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/github-link.tsx

@@ -28,7 +28,7 @@ export async function StarsCount() {
   const formattedCount =
     json.stargazers_count >= 1000
       ? `${Math.round(json.stargazers_count / 1000)}k`
-      : json.stargazers_count.toLocaleString()
+      : json.stargazers_count?.toLocaleString()
 
   return (
     <span className="w-fit text-xs text-muted-foreground tabular-nums">

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"
 
@@ -34,67 +28,34 @@ export function ModeSwitcher({
     setTheme(resolvedTheme === "dark" ? "light" : "dark")
   }, [resolvedTheme, setTheme])
 
-  React.useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (
-        (e.key === "d" || e.key === "D") &&
-        !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()
-        toggleTheme()
-      }
-    }
-
-    document.addEventListener("keydown", down)
-    return () => document.removeEventListener("keydown", down)
-  }, [toggleTheme])
-
   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/components/theme-provider.tsx

@@ -1,7 +1,39 @@
 "use client"
 
 import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"
+
+function ThemeShortcut() {
+  const { setTheme, resolvedTheme } = useTheme()
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (
+        (e.key === "d" || e.key === "D") &&
+        !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()
+        setTheme(resolvedTheme === "dark" ? "light" : "dark")
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [resolvedTheme, setTheme])
+
+  return null
+}
 
 export function ThemeProvider({
   children,
@@ -16,6 +48,7 @@ export function ThemeProvider({
       enableColorScheme
       {...props}
     >
+      <ThemeShortcut />
       {children}
     </NextThemesProvider>
   )

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

@@ -6,7 +6,7 @@ date: 2026-03-06
 
 We're releasing version 4 of shadcn/cli. More capable, easier to use. Built for you and your coding agents. Here's everything new.
 
-### shadcn/skills
+## shadcn/skills
 
 shadcn/skills gives coding agents the context they need to work with your components and registry correctly. It covers both Radix and Base UI primitives, updated APIs, component patterns and registry workflows. The skill also knows how to use the shadcn CLI, when to invoke it and which flags to pass. Agents make fewer mistakes and produce code that actually matches your design system.
 
@@ -20,7 +20,7 @@ You can ask your agent things like:
 npx skills add shadcn/ui
 ```
 
-### Introducing --preset
+## Introducing --preset
 
 A preset packs your entire design system config into a short code. Colors, theme, icon library, fonts, radius. One string, everything included.
 
@@ -32,26 +32,26 @@ npx shadcn@latest init --preset a1Dg5eFl
 
 Use it to scaffold projects from custom config, share with your team or publish in your registry. Drop it in prompts so your agent knows where to start. Use it across Claude, Codex, v0, Replit. Take your preset with you.
 
-### Switching presets
+## 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
 ```
 
-### Skills + Presets
+## Skills + Presets
 
 Your agent knows how to use presets. Scaffold a project, switch design systems, try something new.
 
 - "create a new next app using --preset adtk27v"
 - "let's try --preset adtk27v"
 
-### New shadcn/create
+## New shadcn/create
 
 To help you build custom presets, we rebuilt [shadcn/create](/create). It now includes a library of UI components you can use to preview your presets. See how your colors, fonts and radius apply to real components before you start building.
 
-### New --dry-run, --diff, and --view flags
+## New --dry-run, --diff, and --view flags
 
 Inspect what a registry will add to your project before anything gets written. Review the payload yourself or pipe it to your coding agent for a second look.
 
@@ -61,7 +61,7 @@ npx shadcn@latest add button --diff
 npx shadcn@latest add button --view
 ```
 
-### Updating primitives
+## Updating primitives
 
 You can use the `--diff` flag to check for registry updates. Or ask your agent: "check for updates from @shadcn and merge with my local changes".
 
@@ -69,7 +69,7 @@ You can use the `--diff` flag to check for registry updates. Or ask your agent:
 npx shadcn@latest add button --diff
 ```
 
-### shadcn init --template
+## shadcn init --template
 
 `shadcn init` now scaffolds full project templates for Next.js, Vite, Laravel, React Router, Astro and TanStack Start. Dark mode included for Next.js and Vite.
 
@@ -91,7 +91,7 @@ Use `--monorepo` to set up a monorepo.
 npx shadcn@latest init -t next --monorepo
 ```
 
-### shadcn init --base
+## shadcn init --base
 
 Pick your primitives. Use `--base` to start a project with Radix or Base UI.
 
@@ -99,7 +99,7 @@ Pick your primitives. Use `--base` to start a project with Radix or Base UI.
 npx shadcn@latest init --base radix
 ```
 
-### shadcn info
+## shadcn info
 
 The `info` command now shows the full picture: framework, version, CSS vars, which components are installed, and where to find docs and examples for every component. Great for giving coding agents the context they need to work with your project.
 
@@ -107,7 +107,7 @@ The `info` command now shows the full picture: framework, version, CSS vars, whi
 npx shadcn@latest info
 ```
 
-### shadcn docs
+## shadcn docs
 
 Get docs, code and examples for any UI component right from the CLI. Gives your coding agent the context to use your primitives correctly.
 
@@ -120,7 +120,7 @@ combobox
   - api       https://base-ui.com/react/components/combobox
 ```
 
-### registry:base and registry:font
+## registry:base and registry:font
 
 Registries can now distribute an entire design system as a single payload using `registry:base`. Components, dependencies, CSS vars, fonts, config. One install, everything set up.
 

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"
   }
 }
 ```
@@ -395,24 +399,24 @@ A `registry:base` item is a complete design system base. It defines the full set
 
 The `config` field accepts the following properties (all optional):
 
-| Property             | Type                               | Description                                                     |
-| -------------------- | ---------------------------------- | --------------------------------------------------------------- |
-| `style`              | `string`                           | The style name for the base.                                    |
-| `iconLibrary`        | `string`                           | The icon library to use (e.g. `lucide`).                        |
-| `rsc`                | `boolean`                          | Whether to enable React Server Components. Defaults to `false`. |
-| `tsx`                | `boolean`                          | Whether to use TypeScript. Defaults to `true`.                  |
-| `rtl`                | `boolean`                          | Whether to enable right-to-left support. Defaults to `false`.   |
-| `menuColor`          | `"default" \| "inverted"`          | The menu color scheme. Defaults to `"default"`.                 |
-| `menuAccent`         | `"subtle" \| "bold"`               | The menu accent style. Defaults to `"subtle"`.                  |
-| `tailwind.baseColor` | `string`                           | The base color name (e.g. `neutral`, `slate`, `zinc`).          |
-| `tailwind.css`       | `string`                           | Path to the Tailwind CSS file.                                  |
-| `tailwind.prefix`    | `string`                           | A prefix to add to all Tailwind classes.                        |
-| `aliases.components` | `string`                           | Import alias for components.                                    |
-| `aliases.utils`      | `string`                           | Import alias for utilities.                                     |
-| `aliases.ui`         | `string`                           | Import alias for UI components.                                 |
-| `aliases.lib`        | `string`                           | Import alias for lib.                                           |
-| `aliases.hooks`      | `string`                           | Import alias for hooks.                                         |
-| `registries`         | `Record<string, string \| object>` | Custom registry URLs. Keys must start with `@`.                 |
+| Property             | Type                                                                         | Description                                                     |
+| -------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------- |
+| `style`              | `string`                                                                     | The style name for the base.                                    |
+| `iconLibrary`        | `string`                                                                     | The icon library to use (e.g. `lucide`).                        |
+| `rsc`                | `boolean`                                                                    | Whether to enable React Server Components. Defaults to `false`. |
+| `tsx`                | `boolean`                                                                    | Whether to use TypeScript. Defaults to `true`.                  |
+| `rtl`                | `boolean`                                                                    | Whether to enable right-to-left support. Defaults to `false`.   |
+| `menuColor`          | `"default" \| "inverted" \| "default-translucent" \| "inverted-translucent"` | The menu color scheme. Defaults to `"default"`.                 |
+| `menuAccent`         | `"subtle" \| "bold"`                                                         | The menu accent style. Defaults to `"subtle"`.                  |
+| `tailwind.baseColor` | `string`                                                                     | The base color name (e.g. `neutral`, `slate`, `zinc`).          |
+| `tailwind.css`       | `string`                                                                     | Path to the Tailwind CSS file.                                  |
+| `tailwind.prefix`    | `string`                                                                     | A prefix to add to all Tailwind classes.                        |
+| `aliases.components` | `string`                                                                     | Import alias for components.                                    |
+| `aliases.utils`      | `string`                                                                     | Import alias for utilities.                                     |
+| `aliases.ui`         | `string`                                                                     | Import alias for UI components.                                 |
+| `aliases.lib`        | `string`                                                                     | Import alias for lib.                                           |
+| `aliases.hooks`      | `string`                                                                     | Import alias for hooks.                                         |
+| `registries`         | `Record<string, string \| object>`                                           | Custom registry URLs. Keys must start with `@`.                 |
 
 ```json title="custom-base.json" showLineNumbers
 {
@@ -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/examples/base/ui-rtl/button.tsx

@@ -5,7 +5,7 @@ import { Button as ButtonPrimitive } from "@base-ui/react/button"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {

apps/v4/examples/base/ui-rtl/combobox.tsx

@@ -110,7 +110,7 @@ function ComboboxContent({
           data-slot="combobox-content"
           data-chips={!!anchor}
           className={cn(
-            "cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}

apps/v4/examples/base/ui-rtl/context-menu.tsx

@@ -52,7 +52,7 @@ function ContextMenuContent({
         <ContextMenuPrimitive.Popup
           data-slot="context-menu-content"
           className={cn(
-            "cn-menu-target z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -147,7 +147,7 @@ function ContextMenuSubContent({
   return (
     <ContextMenuContent
       data-slot="context-menu-sub-content"
-      className="shadow-lg"
+      className="cn-menu-target cn-menu-translucent shadow-lg"
       side="inline-end"
       {...props}
     />

apps/v4/examples/base/ui-rtl/dropdown-menu.tsx

@@ -41,7 +41,7 @@ function DropdownMenuContent({
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
           className={cn(
-            "cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
+            "cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -138,7 +138,7 @@ function DropdownMenuSubContent({
     <DropdownMenuContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "cn-menu-target cn-menu-translucent w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       align={align}

apps/v4/examples/base/ui-rtl/menubar.tsx

@@ -26,7 +26,7 @@ function Menubar({ className, ...props }: MenubarPrimitive.Props) {
     <MenubarPrimitive
       data-slot="menubar"
       className={cn(
-        "flex h-8 items-center gap-0.5 rounded-lg border bg-background p-[3px]",
+        "flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
         className
       )}
       {...props}
@@ -80,7 +80,7 @@ function MenubarContent({
       alignOffset={alignOffset}
       sideOffset={sideOffset}
       className={cn(
-        "cn-menu-target min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+        "cn-menu-target cn-menu-translucent min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
         className
       )}
       {...props}
@@ -255,7 +255,7 @@ function MenubarSubContent({
     <DropdownMenuSubContent
       data-slot="menubar-sub-content"
       className={cn(
-        "min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "cn-menu-target cn-menu-translucent min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       {...props}

apps/v4/examples/base/ui-rtl/select.tsx

@@ -83,7 +83,7 @@ function SelectContent({
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
           className={cn(
-            "cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "cn-menu-target cn-menu-translucent relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}

apps/v4/examples/base/ui-rtl/sheet.tsx

@@ -27,7 +27,7 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
     <SheetPrimitive.Backdrop
       data-slot="sheet-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
         className
       )}
       {...props}
@@ -52,7 +52,7 @@ function SheetContent({
         data-slot="sheet-content"
         data-side={side}
         className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm rtl:data-[side=left]:data-ending-style:-translate-x-[-2.5rem] rtl:data-[side=left]:data-starting-style:-translate-x-[-2.5rem] rtl:data-[side=right]:data-ending-style:-translate-x-[2.5rem] rtl:data-[side=right]:data-starting-style:-translate-x-[2.5rem]",
           className
         )}
         {...props}

apps/v4/examples/base/ui/button.tsx

@@ -5,7 +5,7 @@ import { Button as ButtonPrimitive } from "@base-ui/react/button"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {

apps/v4/examples/base/ui/combobox.tsx

@@ -110,7 +110,7 @@ function ComboboxContent({
           data-slot="combobox-content"
           data-chips={!!anchor}
           className={cn(
-            "cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}

apps/v4/examples/base/ui/context-menu.tsx

@@ -52,7 +52,7 @@ function ContextMenuContent({
         <ContextMenuPrimitive.Popup
           data-slot="context-menu-content"
           className={cn(
-            "cn-menu-target z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -147,7 +147,7 @@ function ContextMenuSubContent({
   return (
     <ContextMenuContent
       data-slot="context-menu-sub-content"
-      className="shadow-lg"
+      className="cn-menu-target cn-menu-translucent shadow-lg"
       side="right"
       {...props}
     />

apps/v4/examples/base/ui/dropdown-menu.tsx

@@ -41,7 +41,7 @@ function DropdownMenuContent({
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
           className={cn(
-            "cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
+            "cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -138,7 +138,7 @@ function DropdownMenuSubContent({
     <DropdownMenuContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "cn-menu-target cn-menu-translucent w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       align={align}

apps/v4/examples/base/ui/menubar.tsx

@@ -26,7 +26,7 @@ function Menubar({ className, ...props }: MenubarPrimitive.Props) {
     <MenubarPrimitive
       data-slot="menubar"
       className={cn(
-        "flex h-8 items-center gap-0.5 rounded-lg border bg-background p-[3px]",
+        "flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
         className
       )}
       {...props}
@@ -80,7 +80,7 @@ function MenubarContent({
       alignOffset={alignOffset}
       sideOffset={sideOffset}
       className={cn(
-        "cn-menu-target min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+        "cn-menu-target cn-menu-translucent min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
         className
       )}
       {...props}
@@ -255,7 +255,7 @@ function MenubarSubContent({
     <DropdownMenuSubContent
       data-slot="menubar-sub-content"
       className={cn(
-        "min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "cn-menu-target cn-menu-translucent min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       {...props}

apps/v4/examples/base/ui/select.tsx

@@ -83,7 +83,7 @@ function SelectContent({
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
           className={cn(
-            "cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "cn-menu-target cn-menu-translucent relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}

apps/v4/examples/base/ui/sheet.tsx

@@ -27,7 +27,7 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
     <SheetPrimitive.Backdrop
       data-slot="sheet-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
         className
       )}
       {...props}
@@ -52,7 +52,7 @@ function SheetContent({
         data-slot="sheet-content"
         data-side={side}
         className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
           className
         )}
         {...props}

apps/v4/examples/radix/ui-rtl/button.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {

apps/v4/examples/radix/ui-rtl/combobox.tsx

@@ -112,7 +112,7 @@ function ComboboxContent({
           data-slot="combobox-content"
           data-chips={!!anchor}
           className={cn(
-            "cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}

apps/v4/examples/radix/ui-rtl/context-menu.tsx

@@ -68,7 +68,7 @@ function ContextMenuContent({
       <ContextMenuPrimitive.Content
         data-slot="context-menu-content"
         className={cn(
-          "cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "cn-menu-target cn-menu-translucent z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -132,7 +132,7 @@ function ContextMenuSubContent({
     <ContextMenuPrimitive.SubContent
       data-slot="context-menu-sub-content"
       className={cn(
-        "cn-menu-target z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "cn-menu-target cn-menu-translucent z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       {...props}

apps/v4/examples/radix/ui-rtl/dropdown-menu.tsx

@@ -43,7 +43,7 @@ function DropdownMenuContent({
         sideOffset={sideOffset}
         align={align}
         className={cn(
-          "cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "cn-menu-target cn-menu-translucent z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -245,7 +245,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "cn-menu-target z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "cn-menu-target cn-menu-translucent z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       {...props}

apps/v4/examples/radix/ui-rtl/menubar.tsx

@@ -13,7 +13,7 @@ function Menubar({
     <MenubarPrimitive.Root
       data-slot="menubar"
       className={cn(
-        "flex h-8 items-center gap-0.5 rounded-lg border bg-background p-[3px]",
+        "flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
         className
       )}
       {...props}
@@ -78,7 +78,7 @@ function MenubarContent({
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "cn-menu-target z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+          "cn-menu-target cn-menu-translucent z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
           className
         )}
         {...props}
@@ -255,7 +255,7 @@ function MenubarSubContent({
     <MenubarPrimitive.SubContent
       data-slot="menubar-sub-content"
       className={cn(
-        "cn-menu-target z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "cn-menu-target cn-menu-translucent z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       {...props}

apps/v4/examples/radix/ui-rtl/navigation-menu.tsx

@@ -110,7 +110,7 @@ function NavigationMenuViewport({
       <NavigationMenuPrimitive.Viewport
         data-slot="navigation-menu-viewport"
         className={cn(
-          "origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 duration-100 md:w-(--radix-navigation-menu-viewport-width) data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-95",
+          "origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 duration-100 md:w-(--radix-navigation-menu-viewport-width) data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-90",
           className
         )}
         {...props}

apps/v4/examples/radix/ui-rtl/select.tsx

@@ -69,7 +69,7 @@ function SelectContent({
         data-slot="select-content"
         data-align-trigger={position === "item-aligned"}
         className={cn(
-          "cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "cn-menu-target cn-menu-translucent relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 rtl:data-[side=left]:translate-x-1 rtl:data-[side=right]:-translate-x-1",
           className

apps/v4/examples/radix/ui-rtl/sheet.tsx

@@ -36,7 +36,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}

apps/v4/examples/radix/ui/button.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {

apps/v4/examples/radix/ui/combobox.tsx

@@ -112,7 +112,7 @@ function ComboboxContent({
           data-slot="combobox-content"
           data-chips={!!anchor}
           className={cn(
-            "cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}

apps/v4/examples/radix/ui/context-menu.tsx

@@ -68,7 +68,7 @@ function ContextMenuContent({
       <ContextMenuPrimitive.Content
         data-slot="context-menu-content"
         className={cn(
-          "cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "cn-menu-target cn-menu-translucent z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -132,7 +132,7 @@ function ContextMenuSubContent({
     <ContextMenuPrimitive.SubContent
       data-slot="context-menu-sub-content"
       className={cn(
-        "cn-menu-target z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "cn-menu-target cn-menu-translucent z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       {...props}