feat(registry): add @threecn to registry directory (#11114)

* feat(registry): add @threecn to registry directory

* feat(registry): shorten @threecn description

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

@@ -1,7 +1,7 @@
 "use client"
 
 import { MENU_ACCENTS, type MenuAccentValue } from "@/registry/config"
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(app)/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -9,8 +9,8 @@ import {
   PickerRadioGroup,
   PickerRadioItem,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(app)/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 export function MenuAccentPicker({
   isMobile,

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

@@ -12,7 +12,7 @@ import {
   CommandItem,
   CommandList,
 } from "@/styles/base-nova/ui/command"
-import { useActionMenu } from "@/app/(app)/create/hooks/use-action-menu"
+import { useActionMenu } from "@/app/(app)/(create)/hooks/use-action-menu"
 
 export const CMD_K_FORWARD_TYPE = "cmd-k-forward"
 

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

@@ -4,7 +4,7 @@ import * as React from "react"
 
 import { useMounted } from "@/hooks/use-mounted"
 import { BASE_COLORS, type BaseColorName } from "@/registry/config"
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(app)/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -12,8 +12,8 @@ import {
   PickerRadioGroup,
   PickerRadioItem,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(app)/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 export function BaseColorPicker({
   isMobile,

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

@@ -10,8 +10,8 @@ import {
   PickerRadioGroup,
   PickerRadioItem,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(app)/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 export function BasePicker({
   isMobile,

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

@@ -8,7 +8,7 @@ import {
   getThemesForBaseColor,
   type ChartColorName,
 } from "@/registry/config"
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(app)/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -17,8 +17,8 @@ import {
   PickerRadioItem,
   PickerSeparator,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(app)/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 export function ChartColorPicker({
   isMobile,
@@ -46,12 +46,6 @@ export function ChartColorPicker({
     [params.chartColor]
   )
 
-  React.useEffect(() => {
-    if (!currentChartColor && availableChartColors.length > 0) {
-      setParams({ chartColor: availableChartColors[0].name })
-    }
-  }, [currentChartColor, availableChartColors, setParams])
-
   return (
     <div className="group/picker relative">
       <Picker>

apps/v4/app/(app)/(create)/components/copy-preset.tsx

@@ -5,7 +5,7 @@ import * as React from "react"
 import { cn } from "@/lib/utils"
 import { copyToClipboardWithMeta } from "@/components/copy-button"
 import { Button } from "@/styles/base-nova/ui/button"
-import { usePresetCode } from "@/app/(app)/create/hooks/use-design-system"
+import { usePresetCode } from "@/app/(app)/(create)/hooks/use-design-system"
 
 export function CopyPreset({ className }: React.ComponentProps<typeof Button>) {
   const presetCode = usePresetCode()

apps/v4/app/(app)/(create)/components/create-devtools.tsx

@@ -4,11 +4,11 @@ import * as React from "react"
 
 import { BASES } from "@/registry/config"
 import { Button } from "@/registry/new-york-v4/ui/button"
-import { getDocsPathForItem } from "@/app/(app)/create/lib/devtools"
+import { getDocsPathForItem } from "@/app/(app)/(create)/lib/devtools"
 import {
   serializeDesignSystemSearchParams,
   useDesignSystemSearchParams,
-} from "@/app/(app)/create/lib/search-params"
+} from "@/app/(app)/(create)/lib/search-params"
 
 export function CreateDevtools() {
   const [params, setParams] = useDesignSystemSearchParams()

apps/v4/app/(app)/(create)/components/create-skeleton.tsx

@@ -0,0 +1,15 @@
+import { Skeleton } from "@/styles/base-nova/ui/skeleton"
+
+export function CreateSkeleton() {
+  return (
+    <div className="relative z-10 flex min-h-0 flex-1 flex-col overflow-hidden section-soft [--customizer-width:--spacing(48)] [--gap:--spacing(4)] md:[--gap:--spacing(6)] 2xl:[--customizer-width:--spacing(56)]">
+      <div
+        data-slot="designer"
+        className="flex min-h-0 flex-1 flex-col gap-(--gap) p-(--gap) pt-[calc(var(--gap)*0.25)] md:flex-row-reverse"
+      >
+        <Skeleton className="flex-1 rounded-2xl" />
+        <Skeleton className="min-h-[151px] w-full self-start rounded-2xl md:h-full md:max-h-full md:min-h-0 md:w-(--customizer-width)" />
+      </div>
+    </div>
+  )
+}

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

@@ -14,31 +14,31 @@ import {
   CardHeader,
 } from "@/styles/base-nova/ui/card"
 import { FieldGroup, FieldSeparator } from "@/styles/base-nova/ui/field"
-import { MenuAccentPicker } from "@/app/(app)/create/components/accent-picker"
-import { ActionMenu } from "@/app/(app)/create/components/action-menu"
-import { BaseColorPicker } from "@/app/(app)/create/components/base-color-picker"
-import { BasePicker } from "@/app/(app)/create/components/base-picker"
-import { ChartColorPicker } from "@/app/(app)/create/components/chart-color-picker"
-import { CopyPreset } from "@/app/(app)/create/components/copy-preset"
-import { FontPicker } from "@/app/(app)/create/components/font-picker"
-import { IconLibraryPicker } from "@/app/(app)/create/components/icon-library-picker"
-import { MainMenu } from "@/app/(app)/create/components/main-menu"
-import { MenuColorPicker } from "@/app/(app)/create/components/menu-picker"
-import { OpenPreset } from "@/app/(app)/create/components/open-preset"
-import { RadiusPicker } from "@/app/(app)/create/components/radius-picker"
-import { RandomButton } from "@/app/(app)/create/components/random-button"
-import { ResetDialog } from "@/app/(app)/create/components/reset-button"
-import { StylePicker } from "@/app/(app)/create/components/style-picker"
-import { ThemePicker } from "@/app/(app)/create/components/theme-picker"
-import { FONT_HEADING_OPTIONS, FONTS } from "@/app/(app)/create/lib/fonts"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+import { MenuAccentPicker } from "@/app/(app)/(create)/components/accent-picker"
+import { ActionMenu } from "@/app/(app)/(create)/components/action-menu"
+import { BaseColorPicker } from "@/app/(app)/(create)/components/base-color-picker"
+import { BasePicker } from "@/app/(app)/(create)/components/base-picker"
+import { ChartColorPicker } from "@/app/(app)/(create)/components/chart-color-picker"
+import { CopyPreset } from "@/app/(app)/(create)/components/copy-preset"
+import { FontPicker } from "@/app/(app)/(create)/components/font-picker"
+import { IconLibraryPicker } from "@/app/(app)/(create)/components/icon-library-picker"
+import { MainMenu } from "@/app/(app)/(create)/components/main-menu"
+import { MenuColorPicker } from "@/app/(app)/(create)/components/menu-picker"
+import { OpenPreset } from "@/app/(app)/(create)/components/open-preset"
+import { RadiusPicker } from "@/app/(app)/(create)/components/radius-picker"
+import { RandomButton } from "@/app/(app)/(create)/components/random-button"
+import { ResetDialog } from "@/app/(app)/(create)/components/reset-button"
+import { StylePicker } from "@/app/(app)/(create)/components/style-picker"
+import { ThemePicker } from "@/app/(app)/(create)/components/theme-picker"
+import { FONT_HEADING_OPTIONS, FONTS } from "@/app/(app)/(create)/lib/fonts"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 // Only visible when user clicks "Create Project". Rendered client-only to
 // avoid a useId hydration mismatch on the Base UI dialog trigger. The loading
 // placeholder mirrors the trigger button exactly so there is no layout shift.
 const ProjectForm = dynamic(
   () =>
-    import("@/app/(app)/create/components/project-form").then(
+    import("@/app/(app)/(create)/components/project-form").then(
       (m) => m.ProjectForm
     ),
   {

apps/v4/app/(app)/(create)/components/design-system-provider.tsx

@@ -8,12 +8,12 @@ import {
   POINTER_CURSOR_SELECTOR,
   type DesignSystemConfig,
 } from "@/registry/config"
-import { useIframeMessageListener } from "@/app/(app)/create/hooks/use-iframe-sync"
-import { FONTS } from "@/app/(app)/create/lib/fonts"
+import { useIframeMessageListener } from "@/app/(app)/(create)/hooks/use-iframe-sync"
+import { FONTS } from "@/app/(app)/(create)/lib/fonts"
 import {
   useDesignSystemSearchParams,
   type DesignSystemSearchParams,
-} from "@/app/(app)/create/lib/search-params"
+} from "@/app/(app)/(create)/lib/search-params"
 
 const THEME_STYLE_ELEMENT_ID = "design-system-theme-vars"
 const MANAGED_BODY_CLASS_PREFIXES = ["style-", "base-color-"] as const

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

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(app)/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -12,12 +12,12 @@ import {
   PickerRadioItem,
   PickerSeparator,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { FONTS } from "@/app/(app)/create/lib/fonts"
+} from "@/app/(app)/(create)/components/picker"
+import { FONTS } from "@/app/(app)/(create)/lib/fonts"
 import {
   useDesignSystemSearchParams,
   type DesignSystemSearchParams,
-} from "@/app/(app)/create/lib/search-params"
+} from "@/app/(app)/(create)/lib/search-params"
 
 type FontPickerOption = {
   name: string

apps/v4/app/(app)/(create)/components/history-buttons.tsx

@@ -5,7 +5,7 @@ import { Redo02Icon, Undo02Icon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
 
 import { Button } from "@/styles/base-nova/ui/button"
-import { useHistory } from "@/app/(app)/create/hooks/use-history"
+import { useHistory } from "@/app/(app)/(create)/hooks/use-history"
 
 export const UNDO_FORWARD_TYPE = "undo-forward"
 export const REDO_FORWARD_TYPE = "redo-forward"

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

@@ -3,7 +3,7 @@
 import * as React from "react"
 
 import { iconLibraries, type IconLibraryName } from "@/registry/config"
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(app)/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -11,8 +11,8 @@ import {
   PickerRadioGroup,
   PickerRadioItem,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(app)/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 const logos = {
   lucide: (

apps/v4/app/(app)/(create)/components/icon-placeholder.tsx

@@ -4,7 +4,7 @@ import { lazy, Suspense } from "react"
 import { SquareIcon } from "lucide-react"
 import type { IconLibraryName } from "shadcn/icons"
 
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 const IconLucide = lazy(() =>
   import("@/registry/icons/icon-lucide").then((mod) => ({

apps/v4/app/(app)/(create)/components/item-explorer.tsx

@@ -21,8 +21,8 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "@/styles/base-nova/ui/sidebar"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
-import { groupItemsByType } from "@/app/(app)/create/lib/utils"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
+import { groupItemsByType } from "@/app/(app)/(create)/lib/utils"
 
 const cachedGroupedItems = React.cache(
   (items: Pick<RegistryItem, "name" | "title" | "type">[]) => {

apps/v4/app/(app)/(create)/components/lock-button.tsx

@@ -10,7 +10,7 @@ import { cn } from "@/lib/utils"
 import {
   useLocks,
   type LockableParam,
-} from "@/app/(app)/create/hooks/use-locks"
+} from "@/app/(app)/(create)/hooks/use-locks"
 
 export function LockButton({
   param,

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

@@ -14,13 +14,13 @@ import {
   PickerSeparator,
   PickerShortcut,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useActionMenuTrigger } from "@/app/(app)/create/hooks/use-action-menu"
-import { useHistory } from "@/app/(app)/create/hooks/use-history"
-import { useOpenPresetTrigger } from "@/app/(app)/create/hooks/use-open-preset"
-import { useRandom } from "@/app/(app)/create/hooks/use-random"
-import { useReset } from "@/app/(app)/create/hooks/use-reset"
-import { useThemeToggle } from "@/app/(app)/create/hooks/use-theme-toggle"
+} from "@/app/(app)/(create)/components/picker"
+import { useActionMenuTrigger } from "@/app/(app)/(create)/hooks/use-action-menu"
+import { useHistory } from "@/app/(app)/(create)/hooks/use-history"
+import { useOpenPresetTrigger } from "@/app/(app)/(create)/hooks/use-open-preset"
+import { useRandom } from "@/app/(app)/(create)/hooks/use-random"
+import { useReset } from "@/app/(app)/(create)/hooks/use-reset"
+import { useThemeToggle } from "@/app/(app)/(create)/hooks/use-theme-toggle"
 
 const APPLE_PLATFORM_REGEX = /Mac|iPhone|iPad|iPod/
 

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

@@ -7,7 +7,7 @@ import { useTheme } from "next-themes"
 
 import { useMounted } from "@/hooks/use-mounted"
 import { type MenuColorValue } from "@/registry/config"
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(app)/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -17,11 +17,11 @@ import {
   PickerRadioItem,
   PickerSeparator,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
+} from "@/app/(app)/(create)/components/picker"
 import {
   isTranslucentMenuColor,
   useDesignSystemSearchParams,
-} from "@/app/(app)/create/lib/search-params"
+} from "@/app/(app)/(create)/lib/search-params"
 
 type ColorChoice = "default" | "inverted"
 type SurfaceChoice = "solid" | "translucent"

apps/v4/app/(app)/(create)/components/mode-switcher.tsx

@@ -5,7 +5,7 @@ import Script from "next/script"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/styles/base-nova/ui/button"
-import { useThemeToggle } from "@/app/(app)/create/hooks/use-theme-toggle"
+import { useThemeToggle } from "@/app/(app)/(create)/hooks/use-theme-toggle"
 
 export const DARK_MODE_FORWARD_TYPE = "dark-mode-forward"
 

apps/v4/app/(app)/(create)/components/open-preset.tsx

@@ -31,9 +31,9 @@ import { Input } from "@/styles/base-nova/ui/input"
 import {
   OPEN_PRESET_FORWARD_TYPE,
   useOpenPreset,
-} from "@/app/(app)/create/hooks/use-open-preset"
-import { parsePresetInput } from "@/app/(app)/create/lib/parse-preset-input"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(app)/(create)/hooks/use-open-preset"
+import { parsePresetInput } from "@/app/(app)/(create)/lib/parse-preset-input"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 const PRESET_EXAMPLE = "b2D0wqNxT"
 const PRESET_TITLE = "Open Preset"
@@ -111,11 +111,12 @@ export function OpenPreset({
   if (isMobile) {
     return (
       <Drawer open={open} onOpenChange={handleOpenChange}>
-        <DrawerTrigger asChild>
-          <Button variant="outline" className={triggerClassName}>
-            {label}
-          </Button>
+        <DrawerTrigger
+          render={<Button variant="outline" className={triggerClassName} />}
+        >
+          {label}
         </DrawerTrigger>
+
         <DrawerContent className="dark rounded-t-2xl!">
           <DrawerHeader>
             <DrawerTitle className="text-xl">{PRESET_TITLE}</DrawerTitle>
@@ -127,10 +128,12 @@ export function OpenPreset({
               <Button type="submit" className="h-10" disabled={!nextPreset}>
                 Open
               </Button>
-              <DrawerClose asChild>
-                <Button variant="outline" type="button" className="h-10">
-                  Cancel
-                </Button>
+              <DrawerClose
+                render={
+                  <Button variant="outline" type="button" className="h-10" />
+                }
+              >
+                Cancel
               </DrawerClose>
             </DrawerFooter>
           </form>

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

@@ -4,7 +4,7 @@ import * as React from "react"
 import { Menu as MenuPrimitive } from "@base-ui/react/menu"
 
 import { cn } from "@/registry/bases/base/lib/utils"
-import { IconPlaceholder } from "@/app/(app)/create/components/icon-placeholder"
+import { IconPlaceholder } from "@/app/(app)/(create)/components/icon-placeholder"
 
 function Picker({ ...props }: MenuPrimitive.Root.Props) {
   return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />

apps/v4/app/(app)/(create)/components/preset-handler.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import { useRouter } from "next/navigation"
 import { generateRandomPreset, isPresetCode } from "shadcn/preset"
 
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 export function PresetHandler() {
   const router = useRouter()

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

@@ -10,8 +10,8 @@ import {
   PickerRadioGroup,
   PickerRadioItem,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(app)/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 export function PresetPicker({
   presets,

apps/v4/app/(app)/(create)/components/preview-switcher.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { Button } from "@/registry/new-york-v4/ui/button"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 const PREVIEW_ITEMS = [
   { label: "01", value: "preview-02" },

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

@@ -2,22 +2,22 @@
 
 import * as React from "react"
 
-import { CMD_K_FORWARD_TYPE } from "@/app/(app)/create/components/action-menu"
-import { CreateDevtools } from "@/app/(app)/create/components/create-devtools"
+import { CMD_K_FORWARD_TYPE } from "@/app/(app)/(create)/components/action-menu"
+import { CreateDevtools } from "@/app/(app)/(create)/components/create-devtools"
 import {
   REDO_FORWARD_TYPE,
   UNDO_FORWARD_TYPE,
-} from "@/app/(app)/create/components/history-buttons"
-import { DARK_MODE_FORWARD_TYPE } from "@/app/(app)/create/components/mode-switcher"
-import { PreviewSwitcher } from "@/app/(app)/create/components/preview-switcher"
-import { RANDOMIZE_FORWARD_TYPE } from "@/app/(app)/create/components/random-button"
-import { sendToIframe } from "@/app/(app)/create/hooks/use-iframe-sync"
-import { OPEN_PRESET_FORWARD_TYPE } from "@/app/(app)/create/hooks/use-open-preset"
-import { RESET_FORWARD_TYPE } from "@/app/(app)/create/hooks/use-reset"
+} from "@/app/(app)/(create)/components/history-buttons"
+import { DARK_MODE_FORWARD_TYPE } from "@/app/(app)/(create)/components/mode-switcher"
+import { PreviewSwitcher } from "@/app/(app)/(create)/components/preview-switcher"
+import { RANDOMIZE_FORWARD_TYPE } from "@/app/(app)/(create)/components/random-button"
+import { sendToIframe } from "@/app/(app)/(create)/hooks/use-iframe-sync"
+import { OPEN_PRESET_FORWARD_TYPE } from "@/app/(app)/(create)/hooks/use-open-preset"
+import { RESET_FORWARD_TYPE } from "@/app/(app)/(create)/hooks/use-reset"
 import {
   serializeDesignSystemSearchParams,
   useDesignSystemSearchParams,
-} from "@/app/(app)/create/lib/search-params"
+} from "@/app/(app)/(create)/lib/search-params"
 
 // Hoisted — avoids recreating on every message event. (js-hoist-regexp)
 const MAC_REGEX = /Mac|iPhone|iPad|iPod/

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

@@ -50,17 +50,17 @@ import {
   ToggleGroup,
   ToggleGroupItem,
 } from "@/styles/base-nova/ui/toggle-group"
-import { usePresetCode } from "@/app/(app)/create/hooks/use-design-system"
+import { usePresetCode } from "@/app/(app)/(create)/hooks/use-design-system"
 import {
   useDesignSystemSearchParams,
   type DesignSystemSearchParams,
-} from "@/app/(app)/create/lib/search-params"
+} from "@/app/(app)/(create)/lib/search-params"
 import {
   getFramework,
   getTemplateValue,
   NO_MONOREPO_FRAMEWORKS,
   TEMPLATES,
-} from "@/app/(app)/create/lib/templates"
+} from "@/app/(app)/(create)/lib/templates"
 
 const TURBOREPO_LOGO =
   '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Turborepo</title><path d="M11.9906 4.1957c-4.2998 0-7.7981 3.501-7.7981 7.8043s3.4983 7.8043 7.7981 7.8043c4.2999 0 7.7982-3.501 7.7982-7.8043s-3.4983-7.8043-7.7982-7.8043m0 11.843c-2.229 0-4.0356-1.8079-4.0356-4.0387s1.8065-4.0387 4.0356-4.0387S16.0262 9.7692 16.0262 12s-1.8065 4.0388-4.0356 4.0388m.6534-13.1249V0C18.9726.3386 24 5.5822 24 12s-5.0274 11.66-11.356 12v-2.9139c4.7167-.3372 8.4516-4.2814 8.4516-9.0861s-3.735-8.749-8.4516-9.0861M5.113 17.9586c-1.2502-1.4446-2.0562-3.2845-2.2-5.3046H0c.151 2.8266 1.2808 5.3917 3.051 7.3668l2.0606-2.0622zM11.3372 24v-2.9139c-2.02-.1439-3.8584-.949-5.3019-2.2018l-2.0606 2.0623c1.975 1.773 4.538 2.9022 7.361 3.0534z"/></svg>'
@@ -148,7 +148,8 @@ export function ProjectForm({
 
   const commands = React.useMemo(() => {
     const presetFlag = ` --preset ${presetCode}`
-    const baseFlag = params.base !== "radix" ? ` --base ${params.base}` : ""
+    const baseFlag =
+      params.base !== DEFAULT_CONFIG.base ? ` --base ${params.base}` : ""
     const templateFlag = ` --template ${framework}`
     const monorepoFlag = isMonorepo ? " --monorepo" : ""
     const rtlFlag = params.rtl ? " --rtl" : ""

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

@@ -3,7 +3,7 @@
 import * as React from "react"
 
 import { RADII, type RadiusValue } from "@/registry/config"
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(app)/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -12,8 +12,8 @@ import {
   PickerRadioItem,
   PickerSeparator,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(app)/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 export function RadiusPicker({
   isMobile,

apps/v4/app/(app)/(create)/components/random-button.tsx

@@ -6,8 +6,8 @@ import { HugeiconsIcon } from "@hugeicons/react"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/styles/base-nova/ui/button"
-import { useRandom } from "@/app/(app)/create/hooks/use-random"
-import { RESET_FORWARD_TYPE } from "@/app/(app)/create/hooks/use-reset"
+import { useRandom } from "@/app/(app)/(create)/hooks/use-random"
+import { RESET_FORWARD_TYPE } from "@/app/(app)/(create)/hooks/use-reset"
 
 export const RANDOMIZE_FORWARD_TYPE = "randomize-forward"
 

apps/v4/app/(app)/(create)/components/reset-button.tsx

@@ -10,7 +10,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/styles/base-nova/ui/alert-dialog"
-import { useReset } from "@/app/(app)/create/hooks/use-reset"
+import { useReset } from "@/app/(app)/(create)/hooks/use-reset"
 
 export function ResetDialog() {
   const { showResetDialog, setShowResetDialog, confirmReset } = useReset()

apps/v4/app/(app)/(create)/components/share-button.tsx

@@ -6,8 +6,8 @@ import { HugeiconsIcon } from "@hugeicons/react"
 
 import { copyToClipboardWithMeta } from "@/components/copy-button"
 import { Button } from "@/styles/base-nova/ui/button"
-import { usePresetCode } from "@/app/(app)/create/hooks/use-design-system"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+import { usePresetCode } from "@/app/(app)/(create)/hooks/use-design-system"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 export function ShareButton() {
   const [params] = useDesignSystemSearchParams()

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

@@ -3,7 +3,7 @@
 import * as React from "react"
 
 import { type Style, type StyleName } from "@/registry/config"
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(app)/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -11,8 +11,8 @@ import {
   PickerRadioGroup,
   PickerRadioItem,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(app)/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 export function StylePicker({
   styles,

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

@@ -4,7 +4,7 @@ import * as React from "react"
 
 import { useMounted } from "@/hooks/use-mounted"
 import { BASE_COLORS, type Theme, type ThemeName } from "@/registry/config"
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(app)/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -13,8 +13,8 @@ import {
   PickerRadioItem,
   PickerSeparator,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(app)/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 export function ThemePicker({
   themes,
@@ -38,12 +38,6 @@ export function ThemePicker({
     [params.theme]
   )
 
-  React.useEffect(() => {
-    if (!currentTheme && themes.length > 0) {
-      setParams({ theme: themes[0].name })
-    }
-  }, [currentTheme, themes, setParams])
-
   return (
     <div className="group/picker relative">
       <Picker>

apps/v4/app/(app)/(create)/components/v0-button.tsx

@@ -8,7 +8,7 @@ import { useMounted } from "@/hooks/use-mounted"
 import { Icons } from "@/components/icons"
 import { Button } from "@/styles/base-nova/ui/button"
 import { Skeleton } from "@/styles/base-nova/ui/skeleton"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 export function V0Button({ className }: { className?: string }) {
   const [params] = useDesignSystemSearchParams()

apps/v4/app/(app)/(create)/create/layout.tsx

@@ -0,0 +1,22 @@
+import { Suspense } from "react"
+
+import { CreateSkeleton } from "@/app/(app)/(create)/components/create-skeleton"
+import { HistoryProvider } from "@/app/(app)/(create)/hooks/use-history"
+import { LocksProvider } from "@/app/(app)/(create)/hooks/use-locks"
+
+export default function CreateLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <LocksProvider>
+      {/* HistoryProvider reads useSearchParams(), which opts this subtree out
+          of prerendering up to this boundary. The fallback is what paints on
+          first load, so it must be the page placeholder, not empty. */}
+      <Suspense fallback={<CreateSkeleton />}>
+        <HistoryProvider>{children}</HistoryProvider>
+      </Suspense>
+    </LocksProvider>
+  )
+}

apps/v4/app/(app)/(create)/create/loading.tsx

@@ -0,0 +1,5 @@
+import { CreateSkeleton } from "@/app/(app)/(create)/components/create-skeleton"
+
+export default function CreateLoading() {
+  return <CreateSkeleton />
+}

apps/v4/app/(app)/(create)/create/page.tsx

@@ -5,14 +5,14 @@ import dynamic from "next/dynamic"
 import { siteConfig } from "@/lib/config"
 import { absoluteUrl } from "@/lib/utils"
 import { Skeleton } from "@/styles/base-nova/ui/skeleton"
-import { Customizer } from "@/app/(app)/create/components/customizer"
-import { PresetHandler } from "@/app/(app)/create/components/preset-handler"
-import { Preview } from "@/app/(app)/create/components/preview"
-import { getAllItems } from "@/app/(app)/create/lib/api"
+import { Customizer } from "@/app/(app)/(create)/components/customizer"
+import { PresetHandler } from "@/app/(app)/(create)/components/preset-handler"
+import { Preview } from "@/app/(app)/(create)/components/preview"
+import { getAllItems } from "@/app/(app)/(create)/lib/api"
 
 // Only shown on first visit (checks localStorage).
 const WelcomeDialog = dynamic(() =>
-  import("@/app/(app)/create/components/welcome-dialog").then(
+  import("@/app/(app)/(create)/components/welcome-dialog").then(
     (m) => m.WelcomeDialog
   )
 )

apps/v4/app/(app)/(create)/hooks/use-action-menu.ts

@@ -4,8 +4,8 @@ import * as React from "react"
 import { type RegistryItem } from "shadcn/schema"
 import useSWR from "swr"
 
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
-import { groupItemsByType } from "@/app/(app)/create/lib/utils"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
+import { groupItemsByType } from "@/app/(app)/(create)/lib/utils"
 
 const ACTION_MENU_OPEN_KEY = "create:action-menu-open"
 

apps/v4/app/(app)/(create)/hooks/use-design-system.ts

@@ -1,7 +1,7 @@
 "use client"
 
-import { getPresetCode } from "@/app/(app)/create/lib/preset-code"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+import { getPresetCode } from "@/app/(app)/(create)/lib/preset-code"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 // Returns the canonical preset code derived from the current search params.
 export function usePresetCode() {

apps/v4/app/(app)/(create)/hooks/use-history.tsx

@@ -2,7 +2,12 @@
 
 import * as React from "react"
 import { Suspense } from "react"
-import { useRouter, useSearchParams } from "next/navigation"
+import { useSearchParams } from "next/navigation"
+
+import {
+  useDesignSystemSearchParams,
+  type DesignSystemSearchParams,
+} from "@/app/(app)/(create)/lib/search-params"
 
 type HistoryContextValue = {
   canGoBack: boolean
@@ -15,6 +20,9 @@ const HistoryContext = React.createContext<HistoryContextValue | null>(null)
 
 // Reads useSearchParams() in its own Suspense boundary so the
 // provider never blanks out children while search params resolve.
+// useSearchParams reflects the *settled* preset, which coalesces the
+// transient values nuqs emits mid-update — reading nuqs state directly
+// here would record those transients as phantom history entries.
 function PresetSync({
   onPresetChange,
 }: {
@@ -31,7 +39,11 @@ function PresetSync({
 }
 
 export function HistoryProvider({ children }: { children: React.ReactNode }) {
-  const router = useRouter()
+  // Write through the shared search-params hook (shallow) instead of
+  // router.replace. router.replace triggers a full server navigation that
+  // resets the preset on prod — the same failure the customizer avoids by
+  // going shallow (#11060).
+  const [, setParams] = useDesignSystemSearchParams()
 
   const [preset, setPreset] = React.useState("")
 
@@ -81,17 +93,16 @@ export function HistoryProvider({ children }: { children: React.ReactNode }) {
     indexRef.current = nextIndex
     setIndex(nextIndex)
 
-    const targetPreset = entriesRef.current[nextIndex]
-    const params = new URLSearchParams(window.location.search)
-    if (targetPreset) {
-      params.set("preset", targetPreset)
-    } else {
-      params.delete("preset")
-    }
-    const pathname = window.location.pathname
-    const query = params.toString()
-    router.replace(query ? `${pathname}?${query}` : pathname)
-  }, [router])
+    // The first history entry is "" (no preset in the URL); null clears the
+    // param to restore that state. nuqs accepts null to clear a key, which the
+    // wrapper's input type does not model.
+    setParams(
+      {
+        preset: entriesRef.current[nextIndex] || null,
+      } as Partial<DesignSystemSearchParams>,
+      { history: "replace" }
+    )
+  }, [setParams])
 
   const goForward = React.useCallback(() => {
     if (indexRef.current >= maxIndexRef.current) {
@@ -103,17 +114,16 @@ export function HistoryProvider({ children }: { children: React.ReactNode }) {
     indexRef.current = nextIndex
     setIndex(nextIndex)
 
-    const targetPreset = entriesRef.current[nextIndex]
-    const params = new URLSearchParams(window.location.search)
-    if (targetPreset) {
-      params.set("preset", targetPreset)
-    } else {
-      params.delete("preset")
-    }
-    const pathname = window.location.pathname
-    const query = params.toString()
-    router.replace(query ? `${pathname}?${query}` : pathname)
-  }, [router])
+    // The first history entry is "" (no preset in the URL); null clears the
+    // param to restore that state. nuqs accepts null to clear a key, which the
+    // wrapper's input type does not model.
+    setParams(
+      {
+        preset: entriesRef.current[nextIndex] || null,
+      } as Partial<DesignSystemSearchParams>,
+      { history: "replace" }
+    )
+  }, [setParams])
 
   React.useEffect(() => {
     const down = (e: KeyboardEvent) => {

apps/v4/app/(app)/(create)/hooks/use-iframe-sync.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 
-import type { DesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+import type { DesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 type ParentToIframeMessage = {
   type: "design-system-params"

apps/v4/app/(app)/(create)/hooks/use-random.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { decodePreset } from "shadcn/preset"
 
 import {
   BASE_COLORS,
@@ -10,19 +11,30 @@ import {
   MENU_COLORS,
   RADII,
   STYLES,
+  type BaseColorName,
+  type ChartColorName,
   type FontHeadingValue,
+  type FontValue,
+  type IconLibraryName,
+  type MenuAccentValue,
+  type MenuColorValue,
+  type RadiusValue,
+  type StyleName,
+  type ThemeName,
 } from "@/registry/config"
-import { useLocks } from "@/app/(app)/create/hooks/use-locks"
-import { FONTS } from "@/app/(app)/create/lib/fonts"
+import { useLocks } from "@/app/(app)/(create)/hooks/use-locks"
+import { FONTS } from "@/app/(app)/(create)/lib/fonts"
+import { getPresetCode } from "@/app/(app)/(create)/lib/preset-code"
 import {
   applyBias,
   RANDOMIZE_BIASES,
   type RandomizeContext,
-} from "@/app/(app)/create/lib/randomize-biases"
+} from "@/app/(app)/(create)/lib/randomize-biases"
 import {
   isTranslucentMenuColor,
   useDesignSystemSearchParams,
-} from "@/app/(app)/create/lib/search-params"
+} from "@/app/(app)/(create)/lib/search-params"
+import { SHUFFLE_PRESETS } from "@/app/(app)/(create)/lib/shuffle-presets"
 
 function randomItem<T>(array: readonly T[]): T {
   return array[Math.floor(Math.random() * array.length)]
@@ -37,7 +49,9 @@ export function useRandom() {
     paramsRef.current = params
   }, [params])
 
-  const randomize = React.useCallback(() => {
+  // True-random implementation. Kept, but shuffle is now wired to the
+  // curated preset list below.
+  const randomizeTrueRandom = React.useCallback(() => {
     const selectedStyle = locks.has("style")
       ? paramsRef.current.style
       : randomItem(STYLES).name
@@ -149,6 +163,60 @@ export function useRandom() {
     setParams(nextParams)
   }, [setParams, locks])
 
+  // Picks a random preset from the curated list instead of true random.
+  // Locked params are preserved over the decoded preset values.
+  const randomize = React.useCallback(() => {
+    // Avoid re-picking the preset that is currently applied.
+    const currentCode = getPresetCode(paramsRef.current)
+    const availableCodes = SHUFFLE_PRESETS.filter(
+      (code) => code !== currentCode
+    )
+    const decoded = decodePreset(
+      randomItem(availableCodes.length > 0 ? availableCodes : SHUFFLE_PRESETS)
+    )
+
+    if (!decoded) {
+      return
+    }
+
+    const current = paramsRef.current
+    const nextParams = {
+      style: locks.has("style") ? current.style : (decoded.style as StyleName),
+      baseColor: locks.has("baseColor")
+        ? current.baseColor
+        : (decoded.baseColor as BaseColorName),
+      theme: locks.has("theme") ? current.theme : (decoded.theme as ThemeName),
+      chartColor: locks.has("chartColor")
+        ? current.chartColor
+        : ((decoded.chartColor ?? decoded.theme) as ChartColorName),
+      iconLibrary: locks.has("iconLibrary")
+        ? current.iconLibrary
+        : (decoded.iconLibrary as IconLibraryName),
+      font: locks.has("font") ? current.font : (decoded.font as FontValue),
+      fontHeading: locks.has("fontHeading")
+        ? current.fontHeading
+        : (decoded.fontHeading as FontHeadingValue),
+      menuAccent: locks.has("menuAccent")
+        ? current.menuAccent
+        : (decoded.menuAccent as MenuAccentValue),
+      menuColor: locks.has("menuColor")
+        ? current.menuColor
+        : (decoded.menuColor as MenuColorValue),
+      radius: locks.has("radius")
+        ? current.radius
+        : (decoded.radius as RadiusValue),
+    }
+
+    // Keep the ref in sync so rapid repeats use the latest randomized state
+    // even before the URL state finishes committing.
+    paramsRef.current = {
+      ...paramsRef.current,
+      ...nextParams,
+    }
+
+    setParams(nextParams)
+  }, [setParams, locks])
+
   const randomizeRef = React.useRef(randomize)
   React.useEffect(() => {
     randomizeRef.current = randomize
@@ -177,5 +245,5 @@ export function useRandom() {
     }
   }, [])
 
-  return { randomize }
+  return { randomize, randomizeTrueRandom }
 }

apps/v4/app/(app)/(create)/hooks/use-reset.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import useSWR from "swr"
 
 import { DEFAULT_CONFIG, PRESETS } from "@/registry/config"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(app)/(create)/lib/search-params"
 
 const RESET_DIALOG_KEY = "create:reset-dialog-open"
 export const RESET_FORWARD_TYPE = "reset-forward"

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

@@ -1,9 +1,8 @@
 import { type NextRequest } from "next/server"
 import { track } from "@vercel/analytics/server"
 
-import { parseDesignSystemConfig } from "@/app/(create)/init/parse-config"
-
-import { buildInstructions } from "./build-instructions"
+import { buildInstructions } from "@/app/(app)/(create)/lib/build-instructions"
+import { parseDesignSystemConfig } from "@/app/(app)/(create)/lib/parse-config"
 
 export async function GET(request: NextRequest) {
   try {

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

@@ -8,8 +8,8 @@ import {
   buildRegistryBase,
   parseRegistryBaseParts,
 } from "@/registry/config"
-import { getPresetCode } from "@/app/(app)/create/lib/preset-code"
-import { parseDesignSystemConfig } from "@/app/(create)/init/parse-config"
+import { parseDesignSystemConfig } from "@/app/(app)/(create)/lib/parse-config"
+import { getPresetCode } from "@/app/(app)/(create)/lib/preset-code"
 
 export async function GET(request: NextRequest) {
   try {

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

@@ -2,9 +2,9 @@ import { after, NextResponse, type NextRequest } from "next/server"
 import { track } from "@vercel/analytics/server"
 import { isPresetCode } from "shadcn/preset"
 
-import { getPresetCode } from "@/app/(app)/create/lib/preset-code"
-import { buildV0Payload } from "@/app/(app)/create/lib/v0"
-import { parseDesignSystemConfig } from "@/app/(create)/init/parse-config"
+import { parseDesignSystemConfig } from "@/app/(app)/(create)/lib/parse-config"
+import { getPresetCode } from "@/app/(app)/(create)/lib/preset-code"
+import { buildV0Payload } from "@/app/(app)/(create)/lib/v0"
 
 export async function GET(request: NextRequest) {
   try {

apps/v4/app/(app)/(create)/lib/api.ts

@@ -6,7 +6,7 @@ import { BASES, getThemesForBaseColor, type BaseName } from "@/registry/config"
 import {
   ALLOWED_ITEM_TYPES,
   EXCLUDED_ITEMS,
-} from "@/app/(app)/create/lib/constants"
+} from "@/app/(app)/(create)/lib/constants"
 
 export async function getItemsForBase(base: BaseName) {
   const { Index } = await import("@/registry/bases/__index__")

apps/v4/app/(app)/(create)/lib/parse-config.ts

@@ -4,7 +4,7 @@ import {
   designSystemConfigSchema,
   type DesignSystemConfig,
 } from "@/registry/config"
-import { resolvePresetOverrides } from "@/app/(app)/create/lib/preset-query"
+import { resolvePresetOverrides } from "@/app/(app)/(create)/lib/preset-query"
 
 // Parses design system config from URL search params.
 export function parseDesignSystemConfig(searchParams: URLSearchParams) {
@@ -20,7 +20,7 @@ export function parseDesignSystemConfig(searchParams: URLSearchParams) {
     configInput = {
       ...decoded,
       ...presetOverrides,
-      base: searchParams.get("base") ?? "radix",
+      base: searchParams.get("base") ?? "base",
       template: searchParams.get("template") ?? undefined,
       rtl: searchParams.get("rtl") === "true",
       pointer: searchParams.get("pointer") === "true",

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

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest"
+
+import { DEFAULT_CONFIG } from "@/registry/config"
+
+import { buildPresetUrlUpdate } from "./search-params"
+
+describe("buildPresetUrlUpdate", () => {
+  it("encodes design system params into preset and clears individual keys", () => {
+    const update = buildPresetUrlUpdate({
+      ...DEFAULT_CONFIG,
+      preset: "b0",
+      template: "next",
+      item: "preview-02",
+      size: 100,
+      custom: false,
+    })
+
+    expect(update.preset).toBeTypeOf("string")
+    expect(update.style).toBeNull()
+    expect(update.theme).toBeNull()
+    expect(update.baseColor).toBeNull()
+  })
+
+  it("preserves template when syncing preset from ?template=start", () => {
+    const update = buildPresetUrlUpdate({
+      ...DEFAULT_CONFIG,
+      preset: "b0",
+      template: "start",
+      item: "preview-02",
+      size: 100,
+      custom: false,
+    })
+
+    expect(update.template).toBe("start")
+    expect(update.preset).toBeTypeOf("string")
+  })
+
+  it("applies non-design-system updates from resolvedUpdates", () => {
+    const update = buildPresetUrlUpdate(
+      {
+        ...DEFAULT_CONFIG,
+        preset: "b0",
+        template: "next",
+        item: "preview-02",
+        size: 100,
+        custom: false,
+      },
+      { template: "vite" }
+    )
+
+    expect(update.template).toBe("vite")
+  })
+})

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

@@ -36,9 +36,9 @@ import {
   type StyleName,
   type ThemeName,
 } from "@/registry/config"
-import { FONTS } from "@/app/(app)/create/lib/fonts"
-import { getPresetCode } from "@/app/(app)/create/lib/preset-code"
-import { resolvePresetOverrides } from "@/app/(app)/create/lib/preset-query"
+import { FONTS } from "@/app/(app)/(create)/lib/fonts"
+import { getPresetCode } from "@/app/(app)/(create)/lib/preset-code"
+import { resolvePresetOverrides } from "@/app/(app)/(create)/lib/preset-query"
 
 const designSystemSearchParams = {
   preset: parseAsString.withDefault("b0"),
@@ -132,6 +132,9 @@ const NON_DESIGN_SYSTEM_KEYS = [
   "custom",
 ] as const
 
+// Shared across hook instances so only one mount effect encodes the initial URL.
+let hasSyncedPresetToUrl = false
+
 export const loadDesignSystemSearchParams = createLoader(
   designSystemSearchParams
 )
@@ -235,13 +238,42 @@ function resolvePresetParams(
   return normalizeDesignSystemParams(rawParams)
 }
 
+export function buildPresetUrlUpdate(
+  merged: DesignSystemSearchParams,
+  resolvedUpdates: Partial<DesignSystemSearchParams> = {}
+) {
+  const code = getPresetCode(merged)
+  const rawUpdate: Record<string, unknown> = { preset: code }
+
+  for (const key of DESIGN_SYSTEM_KEYS) {
+    rawUpdate[key] = null
+  }
+
+  for (const key of NON_DESIGN_SYSTEM_KEYS) {
+    if (key === "preset") {
+      continue
+    }
+
+    rawUpdate[key] =
+      key in resolvedUpdates
+        ? (resolvedUpdates as Record<string, unknown>)[key]
+        : merged[key]
+  }
+
+  return rawUpdate
+}
+
 // 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.
+//
+// Default options use shallow: true so picker selections do not trigger a full
+// Next.js server navigation. This prevents the customizer panel from flickering
+// or resetting while the URL update propagates (#10910, #11060).
 export function useDesignSystemSearchParams(options: Options = {}) {
   const searchParams = useSearchParams()
   const [rawParams, rawSetParams] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
+    shallow: true,
     history: "push",
     ...options,
   })
@@ -257,6 +289,19 @@ export function useDesignSystemSearchParams(options: Options = {}) {
     paramsRef.current = params
   }, [params])
 
+  React.useEffect(() => {
+    if (hasSyncedPresetToUrl || searchParams.has("preset")) {
+      return
+    }
+
+    hasSyncedPresetToUrl = true
+
+    const merged = normalizeDesignSystemParams(paramsRef.current)
+    void rawSetParams(buildPresetUrlUpdate(merged) as RawSetParamsInput, {
+      history: "replace",
+    })
+  }, [rawSetParams, searchParams])
+
   type RawSetParamsInput = Parameters<typeof rawSetParams>[0]
 
   const setParams = React.useCallback(
@@ -286,24 +331,10 @@ export function useDesignSystemSearchParams(options: Options = {}) {
         ...paramsRef.current,
         ...resolvedUpdates,
       })
-      // Encode design system fields into a preset code.
-      // Cast needed: merged values may include null from nuqs resets,
-      // but encodePreset handles missing values by falling back to defaults.
-      const code = getPresetCode(merged)
-      // Build update: set preset, clear individual DS params from URL.
-      const rawUpdate: Record<string, unknown> = { preset: code }
-      for (const key of DESIGN_SYSTEM_KEYS) {
-        rawUpdate[key] = null
-      }
-
-      // Pass through non-DS params that were explicitly in the update.
-      for (const key of NON_DESIGN_SYSTEM_KEYS) {
-        if (key in resolvedUpdates) {
-          rawUpdate[key] = (resolvedUpdates as Record<string, unknown>)[key]
-        }
-      }
-
-      return rawSetParams(rawUpdate as RawSetParamsInput, setOptions)
+      return rawSetParams(
+        buildPresetUrlUpdate(merged, resolvedUpdates) as RawSetParamsInput,
+        setOptions
+      )
     },
     [rawSetParams]
   )

apps/v4/app/(app)/(create)/lib/shuffle-presets.ts

@@ -0,0 +1,28 @@
+// Curated preset codes from https://dialectcn.xyz.
+export const SHUFFLE_PRESETS = [
+  "b6sUj34d9",
+  "b2tqYzpa88",
+  "b1W4tDrk",
+  "b1aIuQ2XC",
+  "b7jsW1RxJ5",
+  "b870VEw0in",
+  "b3Zheoix4U",
+  "b1x9M2c4aI",
+  "b1W7jDEW",
+  "b51GFh7y6",
+  "b2fms620zo",
+  "b1Q5GC",
+  "buKEvLs",
+  "b5rR41Mtnc",
+  "b6tOz2I0x",
+  "b2hNTREGRN",
+  "bdIJ7Sq",
+  "b6TqMNb5Wb",
+  "bJIirQ",
+  "b4aRK5K0fb",
+  "b5HCiD38LI",
+  "bdHjvCi",
+  "b7QDHijUjj",
+  "b4ZVZIPi9h",
+  "b1W4bcno",
+]

apps/v4/app/(app)/(create)/lib/v0.test.ts

@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
 
 import { DEFAULT_CONFIG } from "@/registry/config"
-import { buildV0Payload } from "@/app/(app)/create/lib/v0"
+import { buildV0Payload } from "@/app/(app)/(create)/lib/v0"
 
 vi.mock("shadcn/schema", async () => {
   return await vi.importActual("shadcn/schema")

apps/v4/app/(app)/(root)/cards/index.tsx

@@ -81,7 +81,7 @@ export function CardsDemo() {
   return (
     <div
       data-slot="demo"
-      className="theme-blue relative flex w-full max-w-none flex-col gap-(--gap) overflow-hidden bg-muted p-12 pb-0! [--gap:--spacing(8)] 3xl:[--gap:--spacing(8)] min-[1900px]:p-12 min-[1900px]:[--gap:--spacing(10)]! lg:p-6 lg:[--gap:--spacing(6)] dark:bg-background"
+      className="theme-neutral relative flex w-full max-w-none flex-col gap-(--gap) overflow-hidden bg-muted p-12 pb-0! [--gap:--spacing(8)] 3xl:[--gap:--spacing(8)] min-[1900px]:p-12 min-[1900px]:[--gap:--spacing(10)]! lg:p-6 lg:[--gap:--spacing(6)] dark:bg-background"
     >
       <CardsSkeletonRails />
       <div className="relative z-10 mx-auto grid gap-(--gap) **:data-[slot=card]:w-full min-[1400px]:grid-cols-4! min-[1900px]:grid-cols-5! md:max-w-3xl md:grid-cols-2 lg:max-w-none lg:grid-cols-3 xl:max-w-[1600px] 2xl:max-w-[1900px]">

apps/v4/app/(app)/(root)/cards/ui-elements.tsx

@@ -117,7 +117,7 @@ export function UIElements() {
               </span>
               <span className="flex md:hidden style-sera:md:flex">Dialog</span>
             </AlertDialogTrigger>
-            <AlertDialogContent size="sm" className="theme-blue">
+            <AlertDialogContent size="sm" className="theme-neutral">
               <AlertDialogHeader>
                 <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
                 <AlertDialogDescription>

apps/v4/app/(app)/create/layout.tsx

@@ -1,18 +0,0 @@
-import { Suspense } from "react"
-
-import { HistoryProvider } from "@/app/(app)/create/hooks/use-history"
-import { LocksProvider } from "@/app/(app)/create/hooks/use-locks"
-
-export default function CreateLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <LocksProvider>
-      <Suspense>
-        <HistoryProvider>{children}</HistoryProvider>
-      </Suspense>
-    </LocksProvider>
-  )
-}

apps/v4/app/(app)/llm/[[...slug]]/route.ts

@@ -3,7 +3,7 @@ import { NextResponse, type NextRequest } from "next/server"
 
 import { processMdxForLLMs } from "@/lib/llm"
 import { source } from "@/lib/source"
-import { getActiveStyle, type Style } from "@/registry/_legacy-styles"
+import { type Style } from "@/registry/_legacy-styles"
 
 export const revalidate = false
 export const dynamic = "force-static"
@@ -26,7 +26,7 @@ export async function GET(
   _req: NextRequest,
   { params }: { params: Promise<{ slug?: string[] }> }
 ) {
-  const [{ slug }, activeStyle] = await Promise.all([params, getActiveStyle()])
+  const { slug } = await params
 
   const page = source.getPage(slug)
 
@@ -34,7 +34,8 @@ export async function GET(
     notFound()
   }
 
-  const effectiveStyle = getStyleFromSlug(slug, activeStyle.name)
+  // Default to the base style. Legacy content pins new-york-v4 per tag.
+  const effectiveStyle = getStyleFromSlug(slug, "base-nova")
 
   const processedContent = processMdxForLLMs(
     await page.data.getText("raw"),

apps/v4/app/(create)/components/icon-placeholder.tsx

@@ -1,3 +0,0 @@
-"use client"
-
-export { IconPlaceholder } from "@/app/(app)/create/components/icon-placeholder"

apps/v4/app/(create)/lib/fonts.ts

@@ -1 +0,0 @@
-export * from "@/app/(app)/create/lib/fonts"

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

@@ -1 +0,0 @@
-export * from "@/app/(app)/create/lib/search-params"

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

@@ -6,14 +6,14 @@ import { siteConfig } from "@/lib/config"
 import { absoluteUrl } from "@/lib/utils"
 import { TailwindIndicator } from "@/components/tailwind-indicator"
 import { BASES, type Base } from "@/registry/config"
-import { ActionMenuScript } from "@/app/(app)/create/components/action-menu"
-import { DesignSystemProvider } from "@/app/(app)/create/components/design-system-provider"
-import { HistoryScript } from "@/app/(app)/create/components/history-buttons"
-import { DarkModeScript } from "@/app/(app)/create/components/mode-switcher"
-import { OpenPresetScript } from "@/app/(app)/create/components/open-preset"
-import { PreviewStyle } from "@/app/(app)/create/components/preview-style"
-import { RandomizeScript } from "@/app/(app)/create/components/random-button"
-import { getBaseComponent, getBaseItem } from "@/app/(app)/create/lib/api"
+import { ActionMenuScript } from "@/app/(app)/(create)/components/action-menu"
+import { DesignSystemProvider } from "@/app/(app)/(create)/components/design-system-provider"
+import { HistoryScript } from "@/app/(app)/(create)/components/history-buttons"
+import { DarkModeScript } from "@/app/(app)/(create)/components/mode-switcher"
+import { OpenPresetScript } from "@/app/(app)/(create)/components/open-preset"
+import { PreviewStyle } from "@/app/(app)/(create)/components/preview-style"
+import { RandomizeScript } from "@/app/(app)/(create)/components/random-button"
+import { getBaseComponent, getBaseItem } from "@/app/(app)/(create)/lib/api"
 
 import "@/app/style-registry.css"
 import "streamdown/styles.css"

apps/v4/app/(view)/preview/layout.tsx

@@ -1,5 +1,5 @@
-import { PreviewFontVariables } from "@/app/(create)/preview/font-variables"
-import { previewFontVariables } from "@/app/(create)/preview/fonts"
+import { PreviewFontVariables } from "@/app/(view)/preview/font-variables"
+import { previewFontVariables } from "@/app/(view)/preview/fonts"
 
 export default function PreviewLayout({
   children,

apps/v4/app/globals.css

@@ -170,6 +170,7 @@
     @apply overscroll-y-none;
   }
   body {
+    position: relative;
     font-synthesis-weight: none;
     text-rendering: optimizeLegibility;
   }

apps/v4/components/announcement.tsx

@@ -7,7 +7,7 @@ export function Announcement() {
   return (
     <Badge asChild variant="secondary" className="bg-muted">
       <Link href="/docs/changelog">
-        Components for Chat Interfaces <ArrowRightIcon />
+        Base UI is now the default <ArrowRightIcon />
       </Link>
     </Badge>
   )

apps/v4/components/command-menu.tsx

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

apps/v4/components/component-preview.tsx

@@ -13,7 +13,7 @@ export function ComponentPreview({
   align = "center",
   hideCode = false,
   chromeLessOnMobile = false,
-  styleName = "new-york-v4",
+  styleName = "base-nova",
   direction = "ltr",
   caption,
   ...props

apps/v4/components/component-source.tsx

@@ -16,7 +16,7 @@ export async function ComponentSource({
   language,
   collapsible = true,
   className,
-  styleName = "new-york-v4",
+  styleName = "base-nova",
   maxLines,
 }: React.ComponentProps<"div"> & {
   name?: string

apps/v4/components/directory-add-button.tsx

@@ -185,9 +185,7 @@ export function DirectoryAddProvider({
             </DrawerHeader>
             <div className="px-4">{Content}</div>
             <DrawerFooter>
-              <DrawerClose asChild>
-                <Button size="sm">Done</Button>
-              </DrawerClose>
+              <DrawerClose render={<Button size="sm" />}>Done</DrawerClose>
             </DrawerFooter>
           </DrawerContent>
         </Drawer>

apps/v4/components/docs-sidebar.tsx

@@ -52,10 +52,6 @@ const TOP_LEVEL_SECTIONS = [
     name: "Registry",
     href: "/docs/registry",
   },
-  {
-    name: "@shadcn/react",
-    href: "/docs/react",
-  },
   {
     name: "Forms",
     href: "/docs/forms",

apps/v4/components/site-header.tsx

@@ -13,8 +13,8 @@ import { MobileNav } from "@/components/mobile-nav"
 import { ModeSwitcher } from "@/components/mode-switcher"
 import { Separator } from "@/registry/new-york-v4/ui/separator"
 import { Button } from "@/styles/radix-nova/ui/button"
-import { ProjectForm } from "@/app/(app)/create/components/project-form"
-import { V0Button } from "@/app/(app)/create/components/v0-button"
+import { ProjectForm } from "@/app/(app)/(create)/components/project-form"
+import { V0Button } from "@/app/(app)/(create)/components/v0-button"
 
 export function SiteHeader() {
   const colors = getColors()

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

@@ -27,7 +27,7 @@ Arguments:
 
 Options:
   -t, --template <template>  the template to use. (next, vite, start, react-router, laravel, astro)
-  -b, --base <base>          the component library to use. (radix, base)
+  -b, --base <base>          the component library to use. (base, radix)
   -p, --preset [name]        use a preset configuration
   -y, --yes                  skip confirmation prompt. (default: true)
   -d, --defaults             use default configuration: --template=next --preset=nova (default: false)

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

@@ -36,7 +36,7 @@ _In a typical library, if you need to change a button’s behavior, you have to
       <p>
         shadcn/ui follows a headless component architecture. This means the core
         of your app can receive fixes by updating your dependencies, for
-        instance, radix-ui or input-otp.
+        instance, @base-ui/react or input-otp.
       </p>
       <p className="mt-4">
         The topmost layer, i.e., the one closest to your design system, is not

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

@@ -116,7 +116,7 @@ turbo.json
 ```json showLineNumbers title="apps/web/components.json"
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "radix-nova",
+  "style": "base-nova",
   "rsc": true,
   "tsx": true,
   "tailwind": {
@@ -139,7 +139,7 @@ turbo.json
 ```json showLineNumbers title="packages/ui/components.json"
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "radix-nova",
+  "style": "base-nova",
   "rsc": true,
   "tsx": true,
   "tailwind": {

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

@@ -35,7 +35,7 @@ The skill provides your AI assistant with the following knowledge:
 
 ### Project Context
 
-On every interaction, the skill runs `shadcn info --json` to get your project's configuration: framework, Tailwind version, aliases, base library (`radix` or `base`), icon library, installed components, and resolved file paths.
+On every interaction, the skill runs `shadcn info --json` to get your project's configuration: framework, Tailwind version, aliases, base library (`base` or `radix`), icon library, installed components, and resolved file paths.
 
 ### CLI Commands
 

apps/v4/content/docs/changelog/2023-06-new-cli.mdx

@@ -238,7 +238,11 @@ Start with a style as the base then theme using CSS variables or Tailwind CSS ut
 
 I added exit animations to all components. Click on the combobox below to see the subtle exit animation.
 
-<ComponentPreview name="combobox-demo" className="[&_.preview]:items-start" />
+<ComponentPreview
+  styleName="new-york-v4"
+  name="combobox-demo"
+  className="[&_.preview]:items-start"
+/>
 
 The animations can be customized using utility classes.
 
@@ -250,13 +254,13 @@ The animations can be customized using utility classes.
 
 - Added a new button size `icon`:
 
-<ComponentPreview name="button-icon" />
+<ComponentPreview styleName="new-york-v4" name="button-icon" />
 
 ### Sheet
 
 - Renamed `position` to `side` to match the other elements.
 
-<ComponentPreview name="sheet-side" />
+<ComponentPreview styleName="new-york-v4" name="sheet-side" />
 
 - Removed the `size` props. Use `className="w-[200px] md:w-[450px]"` for responsive sizing.
 

apps/v4/content/docs/changelog/2023-12-new-components.mdx

@@ -21,7 +21,7 @@ We've added a fully featured carousel component with motion, swipe gestures and
 
 It has support for infinite looping, autoplay, vertical orientation, and more.
 
-<ComponentPreview name="carousel-demo" />
+<ComponentPreview styleName="new-york-v4" name="carousel-demo" />
 
 ### Drawer
 
@@ -29,19 +29,19 @@ Oh the drawer component. Built on top of [Vaul](https://github.com/emilkowalski/
 
 Try opening the following drawer on mobile. It looks amazing!
 
-<ComponentPreview name="drawer-demo" />
+<ComponentPreview styleName="new-york-v4" name="drawer-demo" />
 
 ### Pagination
 
 We've added a pagination component with page navigation, previous and next buttons. Simple, flexible and works with your framework's `<Link />` component.
 
-<ComponentPreview name="pagination-demo" />
+<ComponentPreview styleName="new-york-v4" name="pagination-demo" />
 
 ### Resizable
 
 Build resizable panel groups and layouts with this `<Resizable />` component.
 
-<ComponentPreview name="resizable-demo-with-handle" />
+<ComponentPreview styleName="new-york-v4" name="resizable-demo-with-handle" />
 
 `<Resizable />` is built using [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) by [bvaughn](https://github.com/bvaughn). It has support for mouse, touch and keyboard.
 
@@ -49,7 +49,7 @@ Build resizable panel groups and layouts with this `<Resizable />` component.
 
 Another one by [emilkowalski](https://twitter.com/emilkowalski). The last toast component you'll ever need. Sonner is now available in shadcn/ui.
 
-<ComponentPreview name="sonner-demo" />
+<ComponentPreview styleName="new-york-v4" name="sonner-demo" />
 
 ### CLI updates
 

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

@@ -10,7 +10,7 @@ We've added a new Breadcrumb component and an Input OTP component.
 
 An accessible and flexible breadcrumb component. It has support for collapsed items, custom separators, bring-your-own routing `<Link />` and composable with other shadcn/ui components.
 
-<ComponentPreview name="breadcrumb-demo" />
+<ComponentPreview styleName="new-york-v4" name="breadcrumb-demo" />
 
 [See more examples](/docs/components/breadcrumb)
 
@@ -18,7 +18,7 @@ An accessible and flexible breadcrumb component. It has support for collapsed it
 
 A fully featured input OTP component. It has support for numeric and alphanumeric codes, custom length, copy-paste and accessible. Input OTP is built on top of [input-otp](https://github.com/guilhermerodz/input-otp) by [@guilherme_rodz](https://twitter.com/guilherme_rodz).
 
-<ComponentPreview name="input-otp-demo" />
+<ComponentPreview styleName="new-york-v4" name="input-otp-demo" />
 
 [Read the docs](/docs/components/input-otp)
 

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

@@ -32,21 +32,21 @@ import { Spinner } from "@/components/ui/spinner"
 
 Here's what it looks like:
 
-<ComponentPreview
+<ComponentPreview styleName="new-york-v4"
   name="spinner-basic"
 
 />
 
 Here's what it looks like in a button:
 
-<ComponentPreview
+<ComponentPreview styleName="new-york-v4"
   name="spinner-button"
 
 />
 
 You can edit the code and replace it with your own spinner.
 
-<ComponentPreview
+<ComponentPreview styleName="new-york-v4"
   name="spinner-custom"
 
 />
@@ -72,7 +72,7 @@ Use `KbdGroup` to group keyboard keys together.
 </KbdGroup>
 ```
 
-<ComponentPreview
+<ComponentPreview styleName="new-york-v4"
   name="kbd-demo"
 
 />
@@ -83,7 +83,7 @@ You can add it to buttons, tooltips, input groups, and more.
 
 I got a lot of requests for this one: Button Group. It's a container that groups related buttons together with consistent styling. Great for action groups, split buttons, and more.
 
-<ComponentPreview
+<ComponentPreview styleName="new-york-v4"
   name="button-group-demo"
 
 />
@@ -118,14 +118,14 @@ You can nest button groups to create more complex layouts with spacing.
 
 Use `ButtonGroupSeparator` to create split buttons. Classic dropdown pattern.
 
-<ComponentPreview
+<ComponentPreview styleName="new-york-v4"
   name="button-group-dropdown"
 
 />
 
 You can also use it to add prefix or suffix buttons and text to inputs.
 
-<ComponentPreview
+<ComponentPreview styleName="new-york-v4"
   name="button-group-select"
 
 />
@@ -162,6 +162,7 @@ import {
 Here's a preview with icons:
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="input-group-icon"
   className="[&_.preview]:h-[300px] [&_pre]:h-[300px]!"
 />
@@ -169,6 +170,7 @@ Here's a preview with icons:
 You can also add buttons to the input group.
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="input-group-button"
   className="[&_.preview]:h-[300px] [&_pre]:h-[300px]!"
 />
@@ -176,6 +178,7 @@ You can also add buttons to the input group.
 Or text, labels, tooltips, ...
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="input-group-text"
   className="[&_.preview]:h-[350px] [&_pre]:h-[350px]!"
 />
@@ -183,6 +186,7 @@ Or text, labels, tooltips, ...
 It also works with textareas so you can build really complex components with lots of knobs and dials or yet another prompt form.
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="input-group-textarea"
   className="[&_.preview]:h-[450px] [&_pre]:h-[450px]!"
 />
@@ -190,6 +194,7 @@ It also works with textareas so you can build really complex components with lot
 Oh here are some cool ones with spinners:
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="input-group-spinner"
   className="[&_.preview]:h-[350px] [&_pre]:h-[350px]!"
 />
@@ -222,6 +227,7 @@ Here's a basic field with an input:
 ```
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="field-input"
   className="[&_.preview]:h-[350px] [&_pre]:h-[350px]!"
 />
@@ -229,6 +235,7 @@ Here's a basic field with an input:
 It works with all form controls. Inputs, textareas, selects, checkboxes, radios, switches, sliders, you name it. Here's a full example:
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="field-demo"
   className="[&_.preview]:h-[850px] [&_pre]:h-[850px]!"
 />
@@ -236,6 +243,7 @@ It works with all form controls. Inputs, textareas, selects, checkboxes, radios,
 Here are some checkbox fields:
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="field-checkbox"
   className="[&_.preview]:h-[500px] [&_pre]:h-[500px]!"
 />
@@ -254,6 +262,7 @@ multi-section forms.
 ```
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="field-fieldset"
   className="[&_.preview]:h-[500px] [&_pre]:h-[500px]!"
 />
@@ -262,6 +271,7 @@ Making it responsive is easy. Use `orientation="responsive"` and it switches
 between vertical and horizontal layouts based on container width. Done.
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="field-responsive"
   className="[&_.preview]:h-[600px] [&_pre]:h-[600px]!"
 />
@@ -269,6 +279,7 @@ between vertical and horizontal layouts based on container width. Done.
 Wait, here's more. Wrap your fields in `FieldLabel` to create a selectable field group. Really easy. And it looks great.
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="field-choice-card"
   className="[&_.preview]:h-[600px] [&_pre]:h-[600px]!"
 />
@@ -304,6 +315,7 @@ Here's a basic item:
 ```
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="item-demo"
   className="[&_.preview]:h-[300px] [&_.preview]:p-4 [&_pre]:h-[300px]!"
 />
@@ -311,11 +323,13 @@ Here's a basic item:
 You can add icons, avatars, or images to the item.
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="item-icon"
   className="[&_.preview]:h-[300px] [&_.preview]:p-4 [&_pre]:h-[300px]!"
 />
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="item-avatar"
   className="[&_.preview]:h-[300px] [&_.preview]:p-4 [&_pre]:h-[300px]!"
 />
@@ -323,6 +337,7 @@ You can add icons, avatars, or images to the item.
 And here's what a list of items looks like with `ItemGroup`:
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="item-group"
   className="[&_.preview]:h-[500px] [&_.preview]:p-4 [&_pre]:h-[500px]!"
 />
@@ -344,6 +359,7 @@ Need it as a link? Use the `asChild` prop:
 ```
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="item-link"
   className="[&_.preview]:h-[400px] [&_.preview]:p-4 [&_pre]:h-[400px]!"
 />
@@ -378,6 +394,7 @@ Here's how you use it:
 ```
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="empty-demo"
   className="[&_.preview]:h-[400px] [&_.preview]:p-4 [&_pre]:h-[400px]!"
 />
@@ -385,6 +402,7 @@ Here's how you use it:
 You can use it with avatars:
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="empty-avatar"
   className="[&_.preview]:h-[400px] [&_pre]:h-[400px]!"
 />
@@ -392,6 +410,7 @@ You can use it with avatars:
 Or with input groups for things like search results or email subscriptions:
 
 <ComponentPreview
+  styleName="new-york-v4"
   name="empty-input-group"
   className="[&_.preview]:h-[450px] [&_pre]:h-[450px]!"
 />

apps/v4/content/docs/changelog/2026-06-chat-components.mdx

@@ -96,6 +96,20 @@ logic stays tested in one place.
 
 Available now for Radix and Base UI.
 
+## AI Elements
+
+This does not replace [AI Elements](https://ai-sdk.dev/elements/overview). You
+can keep using AI Elements for AI interface components and patterns. This
+release is about bringing the core pieces of chat into shadcn/ui, one component
+at a time.
+
+If you are already using a component from AI Elements, you do not need to
+rewrite your app. Keep what works. Try the shadcn/ui version when you want the
+newer abstraction, the updated styling, or support across Radix and Base UI.
+
+The goal is to make these pieces easy to adopt independently. Replace one part,
+compose it with what you already have, and keep building.
+
 <Button asChild size="sm">
   <Link href="/docs/components" className="mt-6 no-underline!">
     View Components