fix: registries.json

* add satoriui registry

* updated registries.json file

---------

Co-authored-by: Harit Patel <harit.ptl.business.com>

.changeset/kind-candies-float.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+Fix: skip all transforms for universal registry items

.claude/settings.local.json

@@ -2,8 +2,12 @@
   "permissions": {
     "allow": [
       "Bash(npm test:*)",
-      "Bash(npm run typecheck:*)"
+      "Bash(npm run typecheck:*)",
+      "Bash(ls:*)",
+      "Bash(cat:*)",
+      "WebSearch",
+      "WebFetch(domain:github.com)"
     ],
     "deny": []
   }
-}
+}

.github/ISSUE_TEMPLATE/registry_directory.yml

@@ -1,63 +0,0 @@
-name: Add registry to directory
-description: Add your registry to the directory
-title: "[Registry Directory]: "
-labels: ["registry", "directory"]
-assignees: []
-body:
-  - type: input
-    id: name
-    attributes:
-      label: Name
-      description: The name of your registry. This is also the namespace.
-      placeholder: e.g., "@acme"
-    validations:
-      required: true
-
-  - type: input
-    id: url
-    attributes:
-      label: URL
-      description: The URL to your registry index. Use {name} placeholder.
-      placeholder: https://ui.acme.com/r/{name}.json
-    validations:
-      required: true
-
-  - type: input
-    id: homepage
-    attributes:
-      label: Homepage
-      description: The URL to your registry homepage. This is where users can browse your registry.
-      placeholder: https://ui.acme.com
-    validations:
-      required: true
-
-  - type: textarea
-    id: description
-    attributes:
-      label: Description
-      description: Briefly describe what is your registry and what type of components or code it distributes.
-      placeholder: 
-    validations:
-      required: true
-
-  - type: textarea
-    id: logo
-    attributes:
-      label: Logo
-      description: Add your SVG logo here.
-      placeholder: 
-    validations:
-      required: true
-
-  - type: checkboxes
-    id: requirements
-    attributes:
-      label: Checklist
-      description: Verify that your registry meets the following requirements.
-      options:
-        - label: The registry must be open source and publicly accessible.
-        - label: The registry must be a valid JSON file that conforms to the [registry schema](https://ui.shadcn.com/docs/registry/registry-json) specification.
-        - label: The `files` array, if present on your registry items, must NOT include a `content` property.
-        - label: I've attached a square SVG logo to this issue
-    validations:
-      required: true

.github/workflows/prerelease.yml

@@ -7,6 +7,11 @@ on:
     types: [labeled]
     branches:
       - main
+
+permissions:
+  id-token: write
+  contents: read
+
 jobs:
   prerelease:
     if: |
@@ -18,7 +23,7 @@ jobs:
 
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
@@ -28,22 +33,21 @@ jobs:
           version: 9.0.6
 
       - name: Use Node.js 20
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
+          registry-url: "https://registry.npmjs.org"
           cache: "pnpm"
 
+      - name: Update npm for OIDC support
+        run: npm install -g npm@latest
+
       - name: Install NPM Dependencies
         run: pnpm install
 
       - name: Modify package.json version
         run: node .github/version-script-beta.js
 
-      - name: Authenticate to NPM
-        run: echo "//registry.npmjs.org/:_authToken=$NPM_ACCESS_TOKEN" >> packages/shadcn/.npmrc
-        env:
-          NPM_ACCESS_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
-
       - name: Publish Beta to NPM
         run: pnpm pub:beta
 

.github/workflows/release.yml

@@ -7,6 +7,11 @@ on:
     branches:
       - main
 
+permissions:
+  id-token: write
+  contents: write
+  pull-requests: write
+
 jobs:
   release:
     if: ${{ github.repository_owner == 'shadcn-ui' }}
@@ -24,12 +29,15 @@ jobs:
           version: 9.0.6
 
       - name: Use Node.js 20
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          version: 9.0.6
           node-version: 20
+          registry-url: "https://registry.npmjs.org"
           cache: "pnpm"
 
+      - name: Update npm for OIDC support
+        run: npm install -g npm@latest
+
       - name: Install NPM Dependencies
         run: pnpm install
 
@@ -49,5 +57,4 @@ jobs:
           publish: npx changeset publish
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
           NODE_ENV: "production"

.gitignore

@@ -39,3 +39,5 @@ tsconfig.tsbuildinfo
 .idea
 .fleet
 .vscode
+
+.notes

.vscode/settings.json

@@ -11,5 +11,10 @@
   ],
   "files.exclude": {
     "deprecated": true
+  },
+  "search.exclude": {
+    "apps/v4/registry/radix-*": true,
+    "apps/v4/public/r/*": true,
+    "packages/shadcn/test/fixtures/*": true
   }
 }

apps/v4/app/(app)/(root)/components/appearance-settings.tsx

@@ -1,10 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { IconMinus, IconPlus } from "@tabler/icons-react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
 import {
   Field,
   FieldContent,
@@ -15,13 +13,11 @@ import {
   FieldSeparator,
   FieldSet,
   FieldTitle,
-} from "@/registry/new-york-v4/ui/field"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import {
-  RadioGroup,
-  RadioGroupItem,
-} from "@/registry/new-york-v4/ui/radio-group"
-import { Switch } from "@/registry/new-york-v4/ui/switch"
+} from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import { RadioGroup, RadioGroupItem } from "@/examples/radix/ui/radio-group"
+import { Switch } from "@/examples/radix/ui/switch"
+import { IconMinus, IconPlus } from "@tabler/icons-react"
 
 export function AppearanceSettings() {
   const [gpuCount, setGpuCount] = React.useState(8)
@@ -97,7 +93,7 @@ export function AppearanceSettings() {
               value={gpuCount}
               onChange={handleGpuInputChange}
               size={3}
-              className="h-8 !w-14 font-mono"
+              className="h-7 !w-14 font-mono"
               maxLength={3}
             />
             <Button

apps/v4/app/(app)/(root)/components/button-group-demo.tsx

@@ -1,20 +1,8 @@
 "use client"
 
 import * as React from "react"
-import {
-  ArchiveIcon,
-  ArrowLeftIcon,
-  CalendarPlusIcon,
-  ClockIcon,
-  ListFilterPlusIcon,
-  MailCheckIcon,
-  MoreHorizontalIcon,
-  TagIcon,
-  Trash2Icon,
-} from "lucide-react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -27,7 +15,18 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/registry/new-york-v4/ui/dropdown-menu"
+} from "@/examples/radix/ui/dropdown-menu"
+import {
+  ArchiveIcon,
+  ArrowLeftIcon,
+  CalendarPlusIcon,
+  ClockIcon,
+  ListFilterIcon,
+  MailCheckIcon,
+  MoreHorizontalIcon,
+  TagIcon,
+  Trash2Icon,
+} from "lucide-react"
 
 export function ButtonGroupDemo() {
   const [label, setLabel] = React.useState("personal")
@@ -79,7 +78,7 @@ export function ButtonGroupDemo() {
                 Add to Calendar
               </DropdownMenuItem>
               <DropdownMenuItem>
-                <ListFilterPlusIcon />
+                <ListFilterIcon />
                 Add to List
               </DropdownMenuItem>
               <DropdownMenuSub>

apps/v4/app/(app)/(root)/components/button-group-input-group.tsx

@@ -1,21 +1,20 @@
 "use client"
 
 import * as React from "react"
-import { AudioLinesIcon, PlusIcon } from "lucide-react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
-} from "@/registry/new-york-v4/ui/input-group"
+} from "@/examples/radix/ui/input-group"
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
+} from "@/examples/radix/ui/tooltip"
+import { AudioLinesIcon, PlusIcon } from "lucide-react"
 
 export function ButtonGroupInputGroup() {
   const [voiceEnabled, setVoiceEnabled] = React.useState(false)

apps/v4/app/(app)/(root)/components/button-group-nested.tsx

@@ -1,10 +1,9 @@
 "use client"
 
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
 
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
-
 export function ButtonGroupNested() {
   return (
     <ButtonGroup>

apps/v4/app/(app)/(root)/components/button-group-popover.tsx

@@ -1,14 +1,13 @@
-import { BotIcon, ChevronDownIcon } from "lucide-react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/registry/new-york-v4/ui/popover"
-import { Separator } from "@/registry/new-york-v4/ui/separator"
-import { Textarea } from "@/registry/new-york-v4/ui/textarea"
+} from "@/examples/radix/ui/popover"
+import { Separator } from "@/examples/radix/ui/separator"
+import { Textarea } from "@/examples/radix/ui/textarea"
+import { BotIcon, ChevronDownIcon } from "lucide-react"
 
 export function ButtonGroupPopover() {
   return (

apps/v4/app/(app)/(root)/components/empty-avatar-group.tsx

@@ -1,11 +1,10 @@
-import { PlusIcon } from "lucide-react"
-
 import {
   Avatar,
   AvatarFallback,
+  AvatarGroup,
   AvatarImage,
-} from "@/registry/new-york-v4/ui/avatar"
-import { Button } from "@/registry/new-york-v4/ui/button"
+} from "@/examples/radix/ui/avatar"
+import { Button } from "@/examples/radix/ui/button"
 import {
   Empty,
   EmptyContent,
@@ -13,14 +12,15 @@ import {
   EmptyHeader,
   EmptyMedia,
   EmptyTitle,
-} from "@/registry/new-york-v4/ui/empty"
+} from "@/examples/radix/ui/empty"
+import { PlusIcon } from "lucide-react"
 
 export function EmptyAvatarGroup() {
   return (
-    <Empty className="flex-none border">
+    <Empty className="flex-none border py-10">
       <EmptyHeader>
         <EmptyMedia>
-          <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+          <AvatarGroup className="grayscale">
             <Avatar>
               <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
               <AvatarFallback>CN</AvatarFallback>
@@ -39,7 +39,7 @@ export function EmptyAvatarGroup() {
               />
               <AvatarFallback>ER</AvatarFallback>
             </Avatar>
-          </div>
+          </AvatarGroup>
         </EmptyMedia>
         <EmptyTitle>No Team Members</EmptyTitle>
         <EmptyDescription>

apps/v4/app/(app)/(root)/components/field-checkbox.tsx

@@ -1,5 +1,5 @@
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
-import { Field, FieldLabel } from "@/registry/new-york-v4/ui/field"
+import { Checkbox } from "@/examples/radix/ui/checkbox"
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
 
 export function FieldCheckbox() {
   return (

apps/v4/app/(app)/(root)/components/field-demo.tsx

@@ -1,5 +1,5 @@
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import { Button } from "@/examples/radix/ui/button"
+import { Checkbox } from "@/examples/radix/ui/checkbox"
 import {
   Field,
   FieldDescription,
@@ -8,16 +8,16 @@ import {
   FieldLegend,
   FieldSeparator,
   FieldSet,
-} from "@/registry/new-york-v4/ui/field"
-import { Input } from "@/registry/new-york-v4/ui/input"
+} from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-import { Textarea } from "@/registry/new-york-v4/ui/textarea"
+} from "@/examples/radix/ui/select"
+import { Textarea } from "@/examples/radix/ui/textarea"
 
 export function FieldDemo() {
   return (

apps/v4/app/(app)/(root)/components/field-hear.tsx

@@ -1,5 +1,5 @@
-import { Card, CardContent } from "@/registry/new-york-v4/ui/card"
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
+import { Card, CardContent } from "@/examples/radix/ui/card"
+import { Checkbox } from "@/examples/radix/ui/checkbox"
 import {
   Field,
   FieldDescription,
@@ -8,7 +8,7 @@ import {
   FieldLegend,
   FieldSet,
   FieldTitle,
-} from "@/registry/new-york-v4/ui/field"
+} from "@/examples/radix/ui/field"
 
 const options = [
   {

apps/v4/app/(app)/(root)/components/field-slider.tsx

@@ -1,13 +1,8 @@
 "use client"
 
 import { useState } from "react"
-
-import {
-  Field,
-  FieldDescription,
-  FieldTitle,
-} from "@/registry/new-york-v4/ui/field"
-import { Slider } from "@/registry/new-york-v4/ui/slider"
+import { Field, FieldDescription, FieldTitle } from "@/examples/radix/ui/field"
+import { Slider } from "@/examples/radix/ui/slider"
 
 export function FieldSlider() {
   const [value, setValue] = useState([200, 800])

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

@@ -1,4 +1,4 @@
-import { FieldSeparator } from "@/registry/new-york-v4/ui/field"
+import { FieldSeparator } from "@/examples/radix/ui/field"
 
 import { AppearanceSettings } from "./appearance-settings"
 import { ButtonGroupDemo } from "./button-group-demo"

apps/v4/app/(app)/(root)/components/input-group-button.tsx

@@ -1,20 +1,19 @@
 "use client"
 
 import * as React from "react"
-import { IconInfoCircle, IconStar } from "@tabler/icons-react"
-
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
-} from "@/registry/new-york-v4/ui/input-group"
-import { Label } from "@/registry/new-york-v4/ui/label"
+} from "@/examples/radix/ui/input-group"
+import { Label } from "@/examples/radix/ui/label"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/registry/new-york-v4/ui/popover"
+} from "@/examples/radix/ui/popover"
+import { IconInfoCircle, IconStar } from "@tabler/icons-react"
 
 export function InputGroupButtonExample() {
   const [isFavorite, setIsFavorite] = React.useState(false)

apps/v4/app/(app)/(root)/components/input-group-demo.tsx

@@ -1,12 +1,9 @@
-import { IconCheck, IconInfoCircle, IconPlus } from "@tabler/icons-react"
-import { ArrowUpIcon, Search } from "lucide-react"
-
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/registry/new-york-v4/ui/dropdown-menu"
+} from "@/examples/radix/ui/dropdown-menu"
 import {
   InputGroup,
   InputGroupAddon,
@@ -14,13 +11,15 @@ import {
   InputGroupInput,
   InputGroupText,
   InputGroupTextarea,
-} from "@/registry/new-york-v4/ui/input-group"
-import { Separator } from "@/registry/new-york-v4/ui/separator"
+} from "@/examples/radix/ui/input-group"
+import { Separator } from "@/examples/radix/ui/separator"
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
+} from "@/examples/radix/ui/tooltip"
+import { IconCheck, IconInfoCircle, IconPlus } from "@tabler/icons-react"
+import { ArrowUpIcon, Search } from "lucide-react"
 
 export function InputGroupDemo() {
   return (

apps/v4/app/(app)/(root)/components/item-demo.tsx

@@ -1,6 +1,4 @@
-import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
+import { Button } from "@/examples/radix/ui/button"
 import {
   Item,
   ItemActions,
@@ -8,7 +6,8 @@ import {
   ItemDescription,
   ItemMedia,
   ItemTitle,
-} from "@/registry/new-york-v4/ui/item"
+} from "@/examples/radix/ui/item"
+import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
 
 export function ItemDemo() {
   return (

apps/v4/app/(app)/(root)/components/notion-prompt-form.tsx

@@ -1,24 +1,8 @@
 "use client"
 
 import { useMemo, useState } from "react"
-import {
-  IconApps,
-  IconArrowUp,
-  IconAt,
-  IconBook,
-  IconCircleDashedPlus,
-  IconPaperclip,
-  IconPlus,
-  IconWorld,
-  IconX,
-} from "@tabler/icons-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york-v4/ui/avatar"
-import { Badge } from "@/registry/new-york-v4/ui/badge"
+import { Avatar, AvatarFallback, AvatarImage } from "@/examples/radix/ui/avatar"
+import { Badge } from "@/examples/radix/ui/badge"
 import {
   Command,
   CommandEmpty,
@@ -26,7 +10,7 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from "@/registry/new-york-v4/ui/command"
+} from "@/examples/radix/ui/command"
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -39,25 +23,36 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/registry/new-york-v4/ui/dropdown-menu"
-import { Field, FieldLabel } from "@/registry/new-york-v4/ui/field"
+} from "@/examples/radix/ui/dropdown-menu"
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupTextarea,
-} from "@/registry/new-york-v4/ui/input-group"
+} from "@/examples/radix/ui/input-group"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/registry/new-york-v4/ui/popover"
-import { Switch } from "@/registry/new-york-v4/ui/switch"
+} from "@/examples/radix/ui/popover"
+import { Switch } from "@/examples/radix/ui/switch"
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
+} from "@/examples/radix/ui/tooltip"
+import {
+  IconApps,
+  IconArrowUp,
+  IconAt,
+  IconBook,
+  IconCircleDashedPlus,
+  IconPaperclip,
+  IconPlus,
+  IconWorld,
+  IconX,
+} from "@tabler/icons-react"
 
 const SAMPLE_DATA = {
   mentionable: [
@@ -190,7 +185,7 @@ export function NotionPromptForm() {
   const hasMentions = mentions.length > 0
 
   return (
-    <form className="[--radius:1.2rem]">
+    <form>
       <Field>
         <FieldLabel htmlFor="notion-prompt" className="sr-only">
           Prompt
@@ -222,7 +217,7 @@ export function NotionPromptForm() {
                 </TooltipTrigger>
                 <TooltipContent>Mention a person, page, or date</TooltipContent>
               </Tooltip>
-              <PopoverContent className="p-0 [--radius:1.2rem]" align="start">
+              <PopoverContent className="p-0" align="start">
                 <Command>
                   <CommandInput placeholder="Search pages..." />
                   <CommandList>
@@ -306,12 +301,8 @@ export function NotionPromptForm() {
                 </TooltipTrigger>
                 <TooltipContent>Select AI model</TooltipContent>
               </Tooltip>
-              <DropdownMenuContent
-                side="top"
-                align="start"
-                className="[--radius:1rem]"
-              >
-                <DropdownMenuGroup className="w-42">
+              <DropdownMenuContent side="top" align="start" className="w-48">
+                <DropdownMenuGroup className="w-48">
                   <DropdownMenuLabel className="text-muted-foreground text-xs">
                     Select Agent Mode
                   </DropdownMenuLabel>
@@ -346,11 +337,7 @@ export function NotionPromptForm() {
                   <IconWorld /> All Sources
                 </InputGroupButton>
               </DropdownMenuTrigger>
-              <DropdownMenuContent
-                side="top"
-                align="end"
-                className="[--radius:1rem]"
-              >
+              <DropdownMenuContent side="top" align="end" className="w-72">
                 <DropdownMenuGroup>
                   <DropdownMenuItem
                     asChild

apps/v4/app/(app)/(root)/components/spinner-badge.tsx

@@ -1,5 +1,5 @@
-import { Badge } from "@/registry/new-york-v4/ui/badge"
-import { Spinner } from "@/registry/new-york-v4/ui/spinner"
+import { Badge } from "@/examples/radix/ui/badge"
+import { Spinner } from "@/examples/radix/ui/spinner"
 
 export function SpinnerBadge() {
   return (

apps/v4/app/(app)/(root)/components/spinner-empty.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/registry/new-york-v4/ui/button"
+import { Button } from "@/examples/radix/ui/button"
 import {
   Empty,
   EmptyContent,
@@ -6,8 +6,8 @@ import {
   EmptyHeader,
   EmptyMedia,
   EmptyTitle,
-} from "@/registry/new-york-v4/ui/empty"
-import { Spinner } from "@/registry/new-york-v4/ui/spinner"
+} from "@/examples/radix/ui/empty"
+import { Spinner } from "@/examples/radix/ui/spinner"
 
 export function SpinnerEmpty() {
   return (

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

@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"
 
@@ -55,10 +55,10 @@ export default function IndexPage() {
         <PageHeaderHeading className="max-w-4xl">{title}</PageHeaderHeading>
         <PageHeaderDescription>{description}</PageHeaderDescription>
         <PageActions>
-          <Button asChild size="sm">
+          <Button asChild size="sm" className="h-[31px] rounded-lg">
             <Link href="/docs/installation">Get Started</Link>
           </Button>
-          <Button asChild size="sm" variant="ghost">
+          <Button asChild size="sm" variant="ghost" className="rounded-lg">
             <Link href="/docs/components">View Components</Link>
           </Button>
         </PageActions>

apps/v4/app/(app)/blocks/[...categories]/page.tsx

@@ -1,7 +1,7 @@
 import { getAllBlockIds } from "@/lib/blocks"
 import { registryCategories } from "@/lib/categories"
 import { BlockDisplay } from "@/components/block-display"
-import { getActiveStyle } from "@/registry/styles"
+import { getActiveStyle } from "@/registry/_legacy-styles"
 
 export const revalidate = false
 export const dynamic = "force-static"

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

@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import Link from "next/link"
 
 import { Announcement } from "@/components/announcement"

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

@@ -1,8 +1,8 @@
 import Link from "next/link"
 
 import { BlockDisplay } from "@/components/block-display"
+import { getActiveStyle } from "@/registry/_legacy-styles"
 import { Button } from "@/registry/new-york-v4/ui/button"
-import { getActiveStyle } from "@/registry/styles"
 
 export const dynamic = "force-static"
 export const revalidate = false

apps/v4/app/(app)/charts/[type]/page.tsx

@@ -2,8 +2,12 @@ import * as React from "react"
 import { notFound } from "next/navigation"
 
 import { cn } from "@/lib/utils"
-import { ChartDisplay } from "@/components/chart-display"
-import { getActiveStyle } from "@/registry/styles"
+import {
+  ChartDisplay,
+  getCachedRegistryItem,
+  getChartHighlightedCode,
+} from "@/components/chart-display"
+import { getActiveStyle } from "@/registry/_legacy-styles"
 import { charts } from "@/app/(app)/charts/charts"
 
 export const revalidate = false
@@ -44,6 +48,26 @@ export default async function ChartPage({ params }: ChartPageProps) {
   const chartList = charts[chartType]
   const activeStyle = await getActiveStyle()
 
+  // Prefetch all chart data in parallel for better performance.
+  // Charts are rendered via iframes, so we only need the metadata and highlighted code.
+  const chartDataPromises = chartList.map(async (chart) => {
+    const registryItem = await getCachedRegistryItem(chart.id, activeStyle.name)
+    if (!registryItem) return null
+
+    const highlightedCode = await getChartHighlightedCode(
+      registryItem.files?.[0]?.content ?? ""
+    )
+    if (!highlightedCode) return null
+
+    return {
+      ...registryItem,
+      highlightedCode,
+      fullWidth: chart.fullWidth,
+    }
+  })
+
+  const prefetchedCharts = await Promise.all(chartDataPromises)
+
   return (
     <div className="grid flex-1 gap-12 lg:gap-24">
       <h2 className="sr-only">
@@ -51,16 +75,14 @@ export default async function ChartPage({ params }: ChartPageProps) {
       </h2>
       <div className="grid flex-1 scroll-mt-20 items-stretch gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10">
         {Array.from({ length: 12 }).map((_, index) => {
-          const chart = chartList[index]
+          const chart = prefetchedCharts[index]
           return chart ? (
             <ChartDisplay
-              key={chart.id}
-              name={chart.id}
-              styleName={activeStyle.name}
+              key={chart.name}
+              chart={chart}
+              style={activeStyle.name}
               className={cn(chart.fullWidth && "md:col-span-2 lg:col-span-3")}
-            >
-              <chart.component />
-            </ChartDisplay>
+            />
           ) : (
             <div
               key={`empty-${index}`}

apps/v4/app/(app)/charts/charts.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import type * as React from "react"
 
 import { ChartAreaAxes } from "@/registry/new-york-v4/charts/chart-area-axes"
 import { ChartAreaDefault } from "@/registry/new-york-v4/charts/chart-area-default"

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

@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import Link from "next/link"
 
 import { Announcement } from "@/components/announcement"
@@ -63,9 +63,8 @@ export default function ChartsLayout({
       </PageHeader>
       <PageNav id="charts">
         <ChartsNav />
-        <ThemeSelector className="mr-4 hidden md:flex" />
       </PageNav>
-      <div className="container-wrapper section-soft flex-1">
+      <div className="container-wrapper flex-1">
         <div className="container pb-6">
           <section className="theme-container">{children}</section>
         </div>

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

@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import Link from "next/link"
 
 import { Announcement } from "@/components/announcement"

apps/v4/app/(app)/docs/[[...slug]]/page.tsx

@@ -1,21 +1,15 @@
 import Link from "next/link"
 import { notFound } from "next/navigation"
 import { mdxComponents } from "@/mdx-components"
-import {
-  IconArrowLeft,
-  IconArrowRight,
-  IconArrowUpRight,
-} from "@tabler/icons-react"
-import fm from "front-matter"
+import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react"
 import { findNeighbour } from "fumadocs-core/page-tree"
-import z from "zod"
 
 import { source } from "@/lib/source"
 import { absoluteUrl } from "@/lib/utils"
+import { DocsBaseSwitcher } from "@/components/docs-base-switcher"
 import { DocsCopyPage } from "@/components/docs-copy-page"
 import { DocsTableOfContents } from "@/components/docs-toc"
 import { OpenInV0Cta } from "@/components/open-in-v0-cta"
-import { Badge } from "@/registry/new-york-v4/ui/badge"
 import { Button } from "@/registry/new-york-v4/ui/button"
 
 export const revalidate = false
@@ -85,127 +79,114 @@ export default async function Page(props: {
 
   const doc = page.data
   const MDX = doc.body
-  const neighbours = findNeighbour(source.pageTree, page.url)
-
+  const isChangelog = params.slug?.[0] === "changelog"
+  const neighbours = isChangelog
+    ? { previous: null, next: null }
+    : findNeighbour(source.pageTree, page.url)
   const raw = await page.data.getText("raw")
-  const { attributes } = fm(raw)
-  const { links } = z
-    .object({
-      links: z
-        .object({
-          doc: z.string().optional(),
-          api: z.string().optional(),
-        })
-        .optional(),
-    })
-    .parse(attributes)
 
   return (
-    <div className="flex items-stretch text-[1.05rem] sm:text-[15px] xl:w-full">
+    <div
+      data-slot="docs"
+      className="flex scroll-mt-24 items-stretch pb-8 text-[1.05rem] sm:text-[15px] xl:w-full"
+    >
       <div className="flex min-w-0 flex-1 flex-col">
         <div className="h-(--top-spacing) shrink-0" />
-        <div className="mx-auto flex w-full max-w-2xl min-w-0 flex-1 flex-col gap-8 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300">
+        <div className="mx-auto flex w-full max-w-[40rem] min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300">
           <div className="flex flex-col gap-2">
             <div className="flex flex-col gap-2">
               <div className="flex items-start justify-between">
-                <h1 className="scroll-m-20 text-4xl font-semibold tracking-tight sm:text-3xl xl:text-4xl">
+                <h1 className="scroll-m-24 text-4xl font-semibold tracking-tight sm:text-3xl">
                   {doc.title}
                 </h1>
-                <div className="docs-nav bg-background/80 border-border/50 fixed inset-x-0 bottom-0 isolate z-50 flex items-center gap-2 border-t px-6 py-4 backdrop-blur-sm sm:static sm:z-0 sm:border-t-0 sm:bg-transparent sm:px-0 sm:pt-1.5 sm:backdrop-blur-none">
+                <div className="docs-nav bg-background/80 border-border/50 fixed inset-x-0 bottom-0 isolate z-50 flex items-center gap-2 border-t px-6 py-4 backdrop-blur-sm sm:static sm:z-0 sm:border-t-0 sm:bg-transparent sm:px-0 sm:py-1.5 sm:backdrop-blur-none">
                   <DocsCopyPage page={raw} url={absoluteUrl(page.url)} />
-                  {neighbours.previous && (
-                    <Button
-                      variant="secondary"
-                      size="icon"
-                      className="extend-touch-target ml-auto size-8 shadow-none md:size-7"
-                      asChild
-                    >
-                      <Link href={neighbours.previous.url}>
-                        <IconArrowLeft />
-                        <span className="sr-only">Previous</span>
-                      </Link>
-                    </Button>
-                  )}
-                  {neighbours.next && (
-                    <Button
-                      variant="secondary"
-                      size="icon"
-                      className="extend-touch-target size-8 shadow-none md:size-7"
-                      asChild
-                    >
-                      <Link href={neighbours.next.url}>
-                        <span className="sr-only">Next</span>
-                        <IconArrowRight />
-                      </Link>
-                    </Button>
-                  )}
+                  <div className="ml-auto flex gap-2">
+                    {neighbours.previous && (
+                      <Button
+                        variant="secondary"
+                        size="icon"
+                        className="extend-touch-target size-8 shadow-none md:size-7"
+                        asChild
+                      >
+                        <Link href={neighbours.previous.url}>
+                          <IconArrowLeft />
+                          <span className="sr-only">Previous</span>
+                        </Link>
+                      </Button>
+                    )}
+                    {neighbours.next && (
+                      <Button
+                        variant="secondary"
+                        size="icon"
+                        className="extend-touch-target size-8 shadow-none md:size-7"
+                        asChild
+                      >
+                        <Link href={neighbours.next.url}>
+                          <span className="sr-only">Next</span>
+                          <IconArrowRight />
+                        </Link>
+                      </Button>
+                    )}
+                  </div>
                 </div>
               </div>
               {doc.description && (
-                <p className="text-muted-foreground text-[1.05rem] text-balance sm:text-base">
+                <p className="text-muted-foreground text-[1.05rem] sm:text-base sm:text-balance md:max-w-[80%]">
                   {doc.description}
                 </p>
               )}
             </div>
-            {links ? (
-              <div className="flex items-center gap-2 pt-4">
-                {links?.doc && (
-                  <Badge asChild variant="secondary" className="rounded-full">
-                    <a href={links.doc} target="_blank" rel="noreferrer">
-                      Docs <IconArrowUpRight />
-                    </a>
-                  </Badge>
-                )}
-                {links?.api && (
-                  <Badge asChild variant="secondary" className="rounded-full">
-                    <a href={links.api} target="_blank" rel="noreferrer">
-                      API Reference <IconArrowUpRight />
-                    </a>
-                  </Badge>
-                )}
-              </div>
-            ) : null}
           </div>
-          <div className="w-full flex-1 *:data-[slot=alert]:first:mt-0">
+          <div className="w-full flex-1 pb-16 *:data-[slot=alert]:first:mt-0 sm:pb-0">
+            {params.slug &&
+              params.slug[0] === "components" &&
+              params.slug[1] &&
+              params.slug[2] && (
+                <DocsBaseSwitcher
+                  base={params.slug[1]}
+                  component={params.slug[2]}
+                  className="mb-4"
+                />
+              )}
             <MDX components={mdxComponents} />
           </div>
-        </div>
-        <div className="mx-auto hidden h-16 w-full max-w-2xl items-center gap-2 px-4 sm:flex md:px-0">
-          {neighbours.previous && (
-            <Button
-              variant="secondary"
-              size="sm"
-              asChild
-              className="shadow-none"
-            >
-              <Link href={neighbours.previous.url}>
-                <IconArrowLeft /> {neighbours.previous.name}
-              </Link>
-            </Button>
-          )}
-          {neighbours.next && (
-            <Button
-              variant="secondary"
-              size="sm"
-              className="ml-auto shadow-none"
-              asChild
-            >
-              <Link href={neighbours.next.url}>
-                {neighbours.next.name} <IconArrowRight />
-              </Link>
-            </Button>
-          )}
+          <div className="hidden h-16 w-full items-center gap-2 px-4 sm:flex sm:px-0">
+            {neighbours.previous && (
+              <Button
+                variant="secondary"
+                size="sm"
+                asChild
+                className="shadow-none"
+              >
+                <Link href={neighbours.previous.url}>
+                  <IconArrowLeft /> {neighbours.previous.name}
+                </Link>
+              </Button>
+            )}
+            {neighbours.next && (
+              <Button
+                variant="secondary"
+                size="sm"
+                className="ml-auto shadow-none"
+                asChild
+              >
+                <Link href={neighbours.next.url}>
+                  {neighbours.next.name} <IconArrowRight />
+                </Link>
+              </Button>
+            )}
+          </div>
         </div>
       </div>
-      <div className="sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[calc(100svh-var(--footer-height)+2rem)] w-72 flex-col gap-4 overflow-hidden overscroll-none pb-8 xl:flex">
-        <div className="h-(--top-spacing) shrink-0" />
+      <div className="sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[90svh] w-72 flex-col gap-4 overflow-hidden overscroll-none pb-8 lg:flex">
+        <div className="h-(--top-spacing) shrink-0"></div>
         {doc.toc?.length ? (
-          <div className="no-scrollbar overflow-y-auto px-8">
+          <div className="no-scrollbar flex flex-col gap-8 overflow-y-auto px-8">
             <DocsTableOfContents toc={doc.toc} />
-            <div className="h-12" />
           </div>
         ) : null}
-        <div className="flex flex-1 flex-col gap-12 px-6">
+        <div className="hidden flex-1 flex-col gap-6 px-6 xl:flex">
           <OpenInV0Cta />
         </div>
       </div>

apps/v4/app/(app)/docs/changelog/page.tsx

@@ -0,0 +1,140 @@
+import Link from "next/link"
+import { Button } from "@/examples/radix/ui/button"
+import { mdxComponents } from "@/mdx-components"
+import { IconRss } from "@tabler/icons-react"
+
+import { getChangelogPages, type ChangelogPageData } from "@/lib/changelog"
+import { absoluteUrl } from "@/lib/utils"
+import { OpenInV0Cta } from "@/components/open-in-v0-cta"
+
+export const revalidate = false
+export const dynamic = "force-static"
+
+export function generateMetadata() {
+  return {
+    title: "Changelog",
+    description: "Latest updates and announcements.",
+    openGraph: {
+      title: "Changelog",
+      description: "Latest updates and announcements.",
+      type: "article",
+      url: absoluteUrl("/docs/changelog"),
+      images: [
+        {
+          url: `/og?title=${encodeURIComponent(
+            "Changelog"
+          )}&description=${encodeURIComponent(
+            "Latest updates and announcements."
+          )}`,
+        },
+      ],
+    },
+  }
+}
+
+export default function ChangelogPage() {
+  const pages = getChangelogPages()
+  const latestPages = pages.slice(0, 5)
+  const olderPages = pages.slice(5)
+
+  return (
+    <div
+      data-slot="docs"
+      className="flex scroll-mt-24 items-stretch pb-8 text-[1.05rem] sm:text-[15px] xl:w-full"
+    >
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div className="h-(--top-spacing) shrink-0" />
+        <div className="mx-auto flex w-full max-w-[40rem] min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300">
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center justify-between">
+              <h1 className="scroll-m-24 text-4xl font-semibold tracking-tight sm:text-3xl">
+                Changelog
+              </h1>
+              <Button variant="secondary" size="sm" asChild>
+                <a href="/rss.xml" target="_blank" rel="noopener noreferrer">
+                  <IconRss />
+                  RSS
+                </a>
+              </Button>
+            </div>
+            <p className="text-muted-foreground text-[1.05rem] sm:text-base sm:text-balance md:max-w-[80%]">
+              Latest updates and announcements.
+            </p>
+          </div>
+          <div className="w-full flex-1 pb-16 sm:pb-0">
+            {latestPages.map((page) => {
+              const data = page.data as ChangelogPageData
+              const MDX = page.data.body
+
+              return (
+                <article key={page.url} className="mb-12 border-b pb-12">
+                  <h2 className="font-heading text-xl font-semibold tracking-tight">
+                    {data.title}
+                  </h2>
+                  <div className="prose-changelog mt-6 *:first:mt-0">
+                    <MDX components={mdxComponents} />
+                  </div>
+                </article>
+              )
+            })}
+            {olderPages.length > 0 && (
+              <div id="more-updates" className="mb-24 scroll-mt-24">
+                <h2 className="font-heading mb-6 text-xl font-semibold tracking-tight">
+                  More Updates
+                </h2>
+                <ul className="flex flex-col gap-4">
+                  {olderPages.map((page) => {
+                    const data = page.data as ChangelogPageData
+                    return (
+                      <li key={page.url} className="flex items-center gap-3">
+                        <Link
+                          href={page.url}
+                          className="font-medium hover:underline"
+                        >
+                          {data.title}
+                        </Link>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[90svh] w-72 flex-col gap-4 overflow-hidden overscroll-none pb-8 lg:flex">
+        <div className="h-(--top-spacing) shrink-0"></div>
+        <div className="no-scrollbar flex flex-col gap-8 overflow-y-auto px-8">
+          <div className="flex flex-col gap-2 p-4 pt-0 text-sm">
+            <p className="text-muted-foreground bg-background sticky top-0 h-6 text-xs font-medium">
+              On This Page
+            </p>
+            {latestPages.map((page) => {
+              const data = page.data as ChangelogPageData
+              return (
+                <Link
+                  key={page.url}
+                  href={page.url}
+                  className="text-muted-foreground hover:text-foreground text-[0.8rem] no-underline transition-colors"
+                >
+                  {data.title}
+                </Link>
+              )
+            })}
+            {olderPages.length > 0 && (
+              <a
+                href="#more-updates"
+                className="text-muted-foreground hover:text-foreground text-[0.8rem] no-underline transition-colors"
+              >
+                More Updates
+              </a>
+            )}
+          </div>
+        </div>
+        <div className="hidden flex-1 flex-col gap-6 px-6 xl:flex">
+          <OpenInV0Cta />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -9,7 +9,10 @@ export default function DocsLayout({
 }) {
   return (
     <div className="container-wrapper flex flex-1 flex-col px-2">
-      <SidebarProvider className="3xl:fixed:container 3xl:fixed:px-3 min-h-min flex-1 items-start px-0 [--sidebar-width:220px] [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--sidebar-width:240px] lg:[--top-spacing:calc(var(--spacing)*4)]">
+      <SidebarProvider
+        className="3xl:fixed:container 3xl:fixed:px-3 min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:calc(var(--spacing)*4)]"
+        style={{ "--sidebar-width": "220px" } as React.CSSProperties}
+      >
         <DocsSidebar tree={source.pageTree} />
         <div className="h-full w-full">{children}</div>
       </SidebarProvider>

apps/v4/app/(app)/examples/authentication/page.tsx

@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"
 

apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx

@@ -13,10 +13,10 @@ import {
   CardTitle,
 } from "@/registry/new-york-v4/ui/card"
 import {
-  ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
+  type ChartConfig,
 } from "@/registry/new-york-v4/ui/chart"
 import {
   Select,

apps/v4/app/(app)/examples/dashboard/components/data-table.tsx

@@ -35,8 +35,6 @@ import {
   IconTrendingUp,
 } from "@tabler/icons-react"
 import {
-  ColumnDef,
-  ColumnFiltersState,
   flexRender,
   getCoreRowModel,
   getFacetedRowModel,
@@ -44,10 +42,12 @@ import {
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
-  Row,
-  SortingState,
   useReactTable,
-  VisibilityState,
+  type ColumnDef,
+  type ColumnFiltersState,
+  type Row,
+  type SortingState,
+  type VisibilityState,
 } from "@tanstack/react-table"
 import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 import { toast } from "sonner"
@@ -57,10 +57,10 @@ import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
 import { Badge } from "@/registry/new-york-v4/ui/badge"
 import { Button } from "@/registry/new-york-v4/ui/button"
 import {
-  ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
+  type ChartConfig,
 } from "@/registry/new-york-v4/ui/chart"
 import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
 import {

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

@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import Link from "next/link"
 
 import { Announcement } from "@/components/announcement"

apps/v4/app/(app)/examples/playground/components/maxlength-selector.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { SliderProps } from "@radix-ui/react-slider"
+import { type SliderProps } from "@radix-ui/react-slider"
 
 import {
   HoverCard,

apps/v4/app/(app)/examples/playground/components/model-selector.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { PopoverProps } from "@radix-ui/react-popover"
+import { type PopoverProps } from "@radix-ui/react-popover"
 import { Check, ChevronsUpDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
@@ -27,7 +27,7 @@ import {
   PopoverTrigger,
 } from "@/registry/new-york-v4/ui/popover"
 
-import { Model, ModelType } from "../data/models"
+import { type Model, type ModelType } from "../data/models"
 
 interface ModelSelectorProps extends PopoverProps {
   types: readonly ModelType[]

apps/v4/app/(app)/examples/playground/components/preset-selector.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { PopoverProps } from "@radix-ui/react-popover"
+import { type PopoverProps } from "@radix-ui/react-popover"
 import { Check, ChevronsUpDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
@@ -21,7 +21,7 @@ import {
   PopoverTrigger,
 } from "@/registry/new-york-v4/ui/popover"
 
-import { Preset } from "../data/presets"
+import { type Preset } from "../data/presets"
 
 interface PresetSelectorProps extends PopoverProps {
   presets: Preset[]

apps/v4/app/(app)/examples/playground/components/temperature-selector.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { SliderProps } from "@radix-ui/react-slider"
+import { type SliderProps } from "@radix-ui/react-slider"
 
 import {
   HoverCard,

apps/v4/app/(app)/examples/playground/components/top-p-selector.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { SliderProps } from "@radix-ui/react-slider"
+import { type SliderProps } from "@radix-ui/react-slider"
 
 import {
   HoverCard,

apps/v4/app/(app)/examples/playground/page.tsx

@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import Image from "next/image"
 import { RotateCcw } from "lucide-react"
 

apps/v4/app/(app)/examples/tasks/components/columns.tsx

@@ -1,12 +1,12 @@
 "use client"
 
-import { ColumnDef } from "@tanstack/react-table"
+import { type ColumnDef } from "@tanstack/react-table"
 
 import { Badge } from "@/registry/new-york-v4/ui/badge"
 import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
 
 import { labels, priorities, statuses } from "../data/data"
-import { Task } from "../data/schema"
+import { type Task } from "../data/schema"
 import { DataTableColumnHeader } from "./data-table-column-header"
 import { DataTableRowActions } from "./data-table-row-actions"
 

apps/v4/app/(app)/examples/tasks/components/data-table-column-header.tsx

@@ -1,4 +1,4 @@
-import { Column } from "@tanstack/react-table"
+import { type Column } from "@tanstack/react-table"
 import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react"
 
 import { cn } from "@/lib/utils"

apps/v4/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Column } from "@tanstack/react-table"
+import { type Column } from "@tanstack/react-table"
 import { Check, PlusCircle } from "lucide-react"
 
 import { cn } from "@/lib/utils"

apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx

@@ -1,4 +1,4 @@
-import { Table } from "@tanstack/react-table"
+import { type Table } from "@tanstack/react-table"
 import {
   ChevronLeft,
   ChevronRight,

apps/v4/app/(app)/examples/tasks/components/data-table-row-actions.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Row } from "@tanstack/react-table"
+import { type Row } from "@tanstack/react-table"
 import { MoreHorizontal } from "lucide-react"
 
 import { Button } from "@/registry/new-york-v4/ui/button"

apps/v4/app/(app)/examples/tasks/components/data-table-toolbar.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Table } from "@tanstack/react-table"
+import { type Table } from "@tanstack/react-table"
 import { X } from "lucide-react"
 
 import { Button } from "@/registry/new-york-v4/ui/button"

apps/v4/app/(app)/examples/tasks/components/data-table-view-options.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
-import { Table } from "@tanstack/react-table"
+import { type Table } from "@tanstack/react-table"
 import { Settings2 } from "lucide-react"
 
 import { Button } from "@/registry/new-york-v4/ui/button"

apps/v4/app/(app)/examples/tasks/components/data-table.tsx

@@ -2,8 +2,6 @@
 
 import * as React from "react"
 import {
-  ColumnDef,
-  ColumnFiltersState,
   flexRender,
   getCoreRowModel,
   getFacetedRowModel,
@@ -11,9 +9,11 @@ import {
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
-  SortingState,
   useReactTable,
-  VisibilityState,
+  type ColumnDef,
+  type ColumnFiltersState,
+  type SortingState,
+  type VisibilityState,
 } from "@tanstack/react-table"
 
 import {

apps/v4/app/(app)/examples/tasks/page.tsx

@@ -1,6 +1,6 @@
 import { promises as fs } from "fs"
 import path from "path"
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import Image from "next/image"
 import { z } from "zod"
 

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

@@ -3,10 +3,23 @@ import { NextResponse, type NextRequest } from "next/server"
 
 import { processMdxForLLMs } from "@/lib/llm"
 import { source } from "@/lib/source"
-import { getActiveStyle } from "@/registry/styles"
+import { getActiveStyle, type Style } from "@/registry/_legacy-styles"
 
 export const revalidate = false
 
+function getStyleFromSlug(slug: string[] | undefined, fallbackStyle: string) {
+  // Detect base from URL: /docs/components/base/... or /docs/components/radix/...
+  if (slug && slug[0] === "components" && slug[1]) {
+    if (slug[1] === "base") {
+      return "base-nova"
+    }
+    if (slug[1] === "radix") {
+      return "new-york-v4"
+    }
+  }
+  return fallbackStyle
+}
+
 export async function GET(
   _req: NextRequest,
   { params }: { params: Promise<{ slug?: string[] }> }
@@ -19,9 +32,11 @@ export async function GET(
     notFound()
   }
 
+  const effectiveStyle = getStyleFromSlug(slug, activeStyle.name)
+
   const processedContent = processMdxForLLMs(
     await page.data.getText("raw"),
-    activeStyle.name
+    effectiveStyle as Style["name"]
   )
 
   return new NextResponse(processedContent, {

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

@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import Link from "next/link"
 
 import { Announcement } from "@/components/announcement"

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

@@ -0,0 +1,95 @@
+"use client"
+
+import { MENU_ACCENTS, type MenuAccentValue } from "@/registry/config"
+import { LockButton } from "@/app/(create)/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerTrigger,
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function MenuAccentPicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const currentAccent = MENU_ACCENTS.find(
+    (accent) => accent.value === params.menuAccent
+  )
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-muted-foreground text-xs">Menu Accent</div>
+            <div className="text-foreground text-sm font-medium">
+              {currentAccent?.label}
+            </div>
+          </div>
+          <div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="128"
+              height="128"
+              viewBox="0 0 24 24"
+              fill="none"
+              className="text-foreground"
+            >
+              <path
+                d="M19 12.1294L12.9388 18.207C11.1557 19.9949 10.2641 20.8889 9.16993 20.9877C8.98904 21.0041 8.80705 21.0041 8.62616 20.9877C7.53195 20.8889 6.64039 19.9949 4.85726 18.207L2.83687 16.1811C1.72104 15.0622 1.72104 13.2482 2.83687 12.1294M19 12.1294L10.9184 4.02587M19 12.1294H2.83687M10.9184 4.02587L2.83687 12.1294M10.9184 4.02587L8.89805 2"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                data-accent={currentAccent?.value}
+                className="data-[accent=bold]:fill-foreground fill-muted-foreground/30"
+              ></path>
+              <path
+                d="M22 20C22 21.1046 21.1046 22 20 22C18.8954 22 18 21.1046 18 20C18 18.8954 20 17 20 17C20 17 22 18.8954 22 20Z"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                data-accent={currentAccent?.value}
+                className="data-[accent=bold]:fill-foreground fill-muted-foreground/30"
+              ></path>
+            </svg>
+          </div>
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+        >
+          <PickerRadioGroup
+            value={currentAccent?.value}
+            onValueChange={(value) => {
+              setParams({ menuAccent: value as MenuAccentValue })
+            }}
+          >
+            <PickerGroup>
+              {MENU_ACCENTS.map((accent) => (
+                <PickerRadioItem key={accent.value} value={accent.value}>
+                  {accent.label}
+                </PickerRadioItem>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="menuAccent"
+        className="absolute top-1/2 right-10 -translate-y-1/2"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+import { useTheme } from "next-themes"
+
+import { useMounted } from "@/hooks/use-mounted"
+import { BASE_COLORS, type BaseColorName } from "@/registry/config"
+import { LockButton } from "@/app/(create)/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerItem,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerSeparator,
+  PickerTrigger,
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function BaseColorPicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const { resolvedTheme, setTheme } = useTheme()
+  const mounted = useMounted()
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const currentBaseColor = React.useMemo(
+    () => BASE_COLORS.find((baseColor) => baseColor.name === params.baseColor),
+    [params.baseColor]
+  )
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-muted-foreground text-xs">Base Color</div>
+            <div className="text-foreground text-sm font-medium">
+              {currentBaseColor?.title}
+            </div>
+          </div>
+          {mounted && resolvedTheme && (
+            <div
+              style={
+                {
+                  "--color":
+                    currentBaseColor?.cssVars?.[
+                      resolvedTheme as "light" | "dark"
+                    ]?.["muted-foreground"],
+                } as React.CSSProperties
+              }
+              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none"
+            />
+          )}
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+        >
+          <PickerRadioGroup
+            value={currentBaseColor?.name}
+            onValueChange={(value) => {
+              if (value === "dark") {
+                setTheme(resolvedTheme === "dark" ? "light" : "dark")
+                return
+              }
+
+              setParams({ baseColor: value as BaseColorName })
+            }}
+          >
+            <PickerGroup>
+              {BASE_COLORS.map((baseColor) => (
+                <PickerRadioItem key={baseColor.name} value={baseColor.name}>
+                  <div className="flex items-center gap-2">
+                    {mounted && resolvedTheme && (
+                      <div
+                        style={
+                          {
+                            "--color":
+                              baseColor.cssVars?.[
+                                resolvedTheme as "light" | "dark"
+                              ]?.["muted-foreground"],
+                          } as React.CSSProperties
+                        }
+                        className="size-4 rounded-full bg-(--color)"
+                      />
+                    )}
+                    {baseColor.title}
+                  </div>
+                </PickerRadioItem>
+              ))}
+            </PickerGroup>
+            <PickerSeparator />
+            <PickerGroup>
+              <PickerItem
+                onClick={() => {
+                  setTheme(resolvedTheme === "dark" ? "light" : "dark")
+                }}
+              >
+                <div className="flex flex-col justify-start pointer-coarse:gap-1">
+                  <div>
+                    Switch to {resolvedTheme === "dark" ? "Light" : "Dark"} Mode
+                  </div>
+                  <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
+                    Base colors are easier to see in dark mode.
+                  </div>
+                </div>
+              </PickerItem>
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="baseColor"
+        className="absolute top-1/2 right-10 -translate-y-1/2"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,88 @@
+"use client"
+
+import * as React from "react"
+
+import { BASES } from "@/registry/config"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerTrigger,
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function BasePicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const currentBase = React.useMemo(
+    () => BASES.find((base) => base.name === params.base),
+    [params.base]
+  )
+
+  const handleValueChange = React.useCallback(
+    (value: string) => {
+      const newBase = BASES.find((base) => base.name === value)
+      if (!newBase) {
+        return
+      }
+
+      setParams({ base: newBase.name })
+    },
+    [setParams]
+  )
+
+  return (
+    <Picker>
+      <PickerTrigger>
+        <div className="flex flex-col justify-start text-left">
+          <div className="text-muted-foreground text-xs">Component Library</div>
+          <div className="text-foreground text-sm font-medium">
+            {currentBase?.title}
+          </div>
+        </div>
+        {currentBase?.meta?.logo && (
+          <div
+            className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 select-none *:[svg]:size-4"
+            dangerouslySetInnerHTML={{
+              __html: currentBase.meta.logo,
+            }}
+          />
+        )}
+      </PickerTrigger>
+      <PickerContent
+        anchor={isMobile ? anchorRef : undefined}
+        side={isMobile ? "top" : "right"}
+        align={isMobile ? "center" : "start"}
+      >
+        <PickerRadioGroup
+          value={currentBase?.name}
+          onValueChange={handleValueChange}
+        >
+          <PickerGroup>
+            {BASES.map((base) => (
+              <PickerRadioItem key={base.name} value={base.name}>
+                {base.meta?.logo && (
+                  <div
+                    className="text-foreground *:[svg]:text-foreground! size-4 shrink-0 [&_svg]:size-4"
+                    dangerouslySetInnerHTML={{
+                      __html: base.meta.logo,
+                    }}
+                  />
+                )}
+                {base.title}
+              </PickerRadioItem>
+            ))}
+          </PickerGroup>
+        </PickerRadioGroup>
+      </PickerContent>
+    </Picker>
+  )
+}

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

@@ -0,0 +1,88 @@
+"use client"
+
+import * as React from "react"
+import { Settings05Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { getThemesForBaseColor, PRESETS, STYLES } from "@/registry/config"
+import { FieldGroup } from "@/registry/new-york-v4/ui/field"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import { MenuAccentPicker } from "@/app/(create)/components/accent-picker"
+import { BaseColorPicker } from "@/app/(create)/components/base-color-picker"
+import { BasePicker } from "@/app/(create)/components/base-picker"
+import { FontPicker } from "@/app/(create)/components/font-picker"
+import { IconLibraryPicker } from "@/app/(create)/components/icon-library-picker"
+import { MenuColorPicker } from "@/app/(create)/components/menu-picker"
+import { PresetPicker } from "@/app/(create)/components/preset-picker"
+import { RadiusPicker } from "@/app/(create)/components/radius-picker"
+import { RandomButton } from "@/app/(create)/components/random-button"
+import { ResetButton } from "@/app/(create)/components/reset-button"
+import { StylePicker } from "@/app/(create)/components/style-picker"
+import { ThemePicker } from "@/app/(create)/components/theme-picker"
+import { FONTS } from "@/app/(create)/lib/fonts"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function Customizer() {
+  const [params] = useDesignSystemSearchParams()
+  const isMobile = useIsMobile()
+  const anchorRef = React.useRef<HTMLDivElement | null>(null)
+
+  const availableThemes = React.useMemo(
+    () => getThemesForBaseColor(params.baseColor),
+    [params.baseColor]
+  )
+
+  return (
+    <div
+      className="no-scrollbar -mx-2.5 flex flex-col overflow-y-auto p-1 md:mx-0 md:h-[calc(100svh-var(--header-height)-2rem)] md:w-48 md:gap-0 md:py-0"
+      ref={anchorRef}
+    >
+      <div className="hidden items-center gap-2 px-[calc(--spacing(2.5))] pb-1 md:flex md:flex-col md:items-start">
+        <HugeiconsIcon
+          icon={Settings05Icon}
+          className="size-4"
+          strokeWidth={2}
+        />
+        <div className="relative flex flex-col gap-1 rounded-lg text-[13px]/snug">
+          <div className="flex items-center gap-1 font-medium text-balance">
+            Build your own shadcn/ui
+          </div>
+          <div className="hidden md:flex">
+            When you&apos;re done, click Create Project to start a new project.
+          </div>
+        </div>
+      </div>
+      <div className="no-scrollbar h-14 overflow-x-auto overflow-y-hidden p-px md:h-full md:overflow-x-hidden md:overflow-y-auto">
+        <FieldGroup className="flex h-full flex-1 flex-row gap-2 md:flex-col md:gap-0">
+          <PresetPicker
+            presets={PRESETS}
+            isMobile={isMobile}
+            anchorRef={anchorRef}
+          />
+          <BasePicker isMobile={isMobile} anchorRef={anchorRef} />
+          <StylePicker
+            styles={STYLES}
+            isMobile={isMobile}
+            anchorRef={anchorRef}
+          />
+          <BaseColorPicker isMobile={isMobile} anchorRef={anchorRef} />
+          <ThemePicker
+            themes={availableThemes}
+            isMobile={isMobile}
+            anchorRef={anchorRef}
+          />
+          <IconLibraryPicker isMobile={isMobile} anchorRef={anchorRef} />
+          <FontPicker fonts={FONTS} isMobile={isMobile} anchorRef={anchorRef} />
+          <RadiusPicker isMobile={isMobile} anchorRef={anchorRef} />
+          <MenuColorPicker isMobile={isMobile} anchorRef={anchorRef} />
+          <MenuAccentPicker isMobile={isMobile} anchorRef={anchorRef} />
+          <div className="mt-auto hidden w-full flex-col items-center gap-0 md:flex">
+            <RandomButton />
+            <ResetButton />
+          </div>
+        </FieldGroup>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,174 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  buildRegistryTheme,
+  DEFAULT_CONFIG,
+  type DesignSystemConfig,
+} from "@/registry/config"
+import { useIframeMessageListener } from "@/app/(create)/hooks/use-iframe-sync"
+import { FONTS } from "@/app/(create)/lib/fonts"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function DesignSystemProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const [
+    { style, theme, font, baseColor, menuAccent, menuColor, radius },
+    setSearchParams,
+  ] = useDesignSystemSearchParams({
+    shallow: true, // No need to go through the server…
+    history: "replace", // …or push updates into the iframe history.
+  })
+  useIframeMessageListener("design-system-params", setSearchParams)
+  const [isReady, setIsReady] = React.useState(false)
+
+  // Use useLayoutEffect for synchronous style updates to prevent flash.
+  React.useLayoutEffect(() => {
+    if (!style || !theme || !font || !baseColor) {
+      return
+    }
+
+    const body = document.body
+
+    // Update style class in place (remove old, add new).
+    body.classList.forEach((className) => {
+      if (className.startsWith("style-")) {
+        body.classList.remove(className)
+      }
+    })
+    body.classList.add(`style-${style}`)
+
+    // Update base color class in place.
+    body.classList.forEach((className) => {
+      if (className.startsWith("base-color-")) {
+        body.classList.remove(className)
+      }
+    })
+    body.classList.add(`base-color-${baseColor}`)
+
+    // Update font.
+    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])
+
+  const registryTheme = React.useMemo(() => {
+    if (!baseColor || !theme || !menuAccent || !radius) {
+      return null
+    }
+
+    const config: DesignSystemConfig = {
+      ...DEFAULT_CONFIG,
+      baseColor,
+      theme,
+      menuAccent,
+      radius,
+    }
+
+    return buildRegistryTheme(config)
+  }, [baseColor, theme, menuAccent, radius])
+
+  // Use useLayoutEffect for synchronous CSS var updates.
+  React.useLayoutEffect(() => {
+    if (!registryTheme || !registryTheme.cssVars) {
+      return
+    }
+
+    const styleId = "design-system-theme-vars"
+    let styleElement = document.getElementById(
+      styleId
+    ) as HTMLStyleElement | null
+
+    if (!styleElement) {
+      styleElement = document.createElement("style")
+      styleElement.id = styleId
+      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
+  }, [registryTheme])
+
+  // Handle menu color inversion by adding/removing dark class to elements with cn-menu-target.
+  React.useEffect(() => {
+    if (!menuColor) {
+      return
+    }
+
+    const updateMenuElements = () => {
+      const menuElements = document.querySelectorAll(".cn-menu-target")
+      menuElements.forEach((element) => {
+        if (menuColor === "inverted") {
+          element.classList.add("dark")
+        } else {
+          element.classList.remove("dark")
+        }
+      })
+    }
+
+    // Update existing menu elements.
+    updateMenuElements()
+
+    // Watch for new menu elements being added to the DOM.
+    const observer = new MutationObserver(() => {
+      updateMenuElements()
+    })
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    })
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [menuColor])
+
+  if (!isReady) {
+    return null
+  }
+
+  return <>{children}</>
+}

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

@@ -0,0 +1,103 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "@/registry/bases/radix/ui/item"
+import { type FontValue } from "@/registry/config"
+import { LockButton } from "@/app/(create)/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerSeparator,
+  PickerTrigger,
+} from "@/app/(create)/components/picker"
+import { type Font } from "@/app/(create)/lib/fonts"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function FontPicker({
+  fonts,
+  isMobile,
+  anchorRef,
+}: {
+  fonts: readonly Font[]
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const currentFont = React.useMemo(
+    () => fonts.find((font) => font.value === params.font),
+    [fonts, params.font]
+  )
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-muted-foreground text-xs">Font</div>
+            <div className="text-foreground text-sm font-medium">
+              {currentFont?.name}
+            </div>
+          </div>
+          <div
+            className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none"
+            style={{ fontFamily: currentFont?.font.style.fontFamily }}
+          >
+            Aa
+          </div>
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+          className="max-h-80 md:w-72"
+        >
+          <PickerRadioGroup
+            value={currentFont?.value}
+            onValueChange={(value) => {
+              setParams({ font: value as FontValue })
+            }}
+          >
+            <PickerGroup>
+              {fonts.map((font, index) => (
+                <React.Fragment key={font.value}>
+                  <PickerRadioItem value={font.value}>
+                    <Item size="xs">
+                      <ItemContent className="gap-1">
+                        <ItemTitle className="text-muted-foreground text-xs font-medium">
+                          {font.name}
+                        </ItemTitle>
+                        <ItemDescription
+                          style={{ fontFamily: font.font.style.fontFamily }}
+                        >
+                          Designers love packing quirky glyphs into test
+                          phrases.
+                        </ItemDescription>
+                      </ItemContent>
+                    </Item>
+                  </PickerRadioItem>
+                  {index < fonts.length - 1 && (
+                    <PickerSeparator className="opacity-50" />
+                  )}
+                </React.Fragment>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="font"
+        className="absolute top-1/2 right-10 -translate-y-1/2"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,366 @@
+"use client"
+
+import * as React from "react"
+import { lazy, memo, Suspense } from "react"
+
+import { Item, ItemContent, ItemTitle } from "@/registry/bases/radix/ui/item"
+import {
+  iconLibraries,
+  type IconLibrary,
+  type IconLibraryName,
+} from "@/registry/config"
+import { LockButton } from "@/app/(create)/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerSeparator,
+  PickerTrigger,
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+const IconLucide = lazy(() =>
+  import("@/registry/icons/icon-lucide").then((mod) => ({
+    default: mod.IconLucide,
+  }))
+)
+
+const IconTabler = lazy(() =>
+  import("@/registry/icons/icon-tabler").then((mod) => ({
+    default: mod.IconTabler,
+  }))
+)
+
+const IconHugeicons = lazy(() =>
+  import("@/registry/icons/icon-hugeicons").then((mod) => ({
+    default: mod.IconHugeicons,
+  }))
+)
+
+const IconPhosphor = lazy(() =>
+  import("@/registry/icons/icon-phosphor").then((mod) => ({
+    default: mod.IconPhosphor,
+  }))
+)
+
+const IconRemixicon = lazy(() =>
+  import("@/registry/icons/icon-remixicon").then((mod) => ({
+    default: mod.IconRemixicon,
+  }))
+)
+
+const PREVIEW_ICONS = {
+  lucide: [
+    "CopyIcon",
+    "CircleAlertIcon",
+    "TrashIcon",
+    "ShareIcon",
+    "ShoppingBagIcon",
+    "MoreHorizontalIcon",
+    "Loader2Icon",
+    "PlusIcon",
+    "MinusIcon",
+    "ArrowLeftIcon",
+    "ArrowRightIcon",
+    "CheckIcon",
+    "ChevronDownIcon",
+    "ChevronRightIcon",
+  ],
+  tabler: [
+    "IconCopy",
+    "IconExclamationCircle",
+    "IconTrash",
+    "IconShare",
+    "IconShoppingBag",
+    "IconDots",
+    "IconLoader",
+    "IconPlus",
+    "IconMinus",
+    "IconArrowLeft",
+    "IconArrowRight",
+    "IconCheck",
+    "IconChevronDown",
+    "IconChevronRight",
+  ],
+  hugeicons: [
+    "Copy01Icon",
+    "AlertCircleIcon",
+    "Delete02Icon",
+    "Share03Icon",
+    "ShoppingBag01Icon",
+    "MoreHorizontalCircle01Icon",
+    "Loading03Icon",
+    "PlusSignIcon",
+    "MinusSignIcon",
+    "ArrowLeft02Icon",
+    "ArrowRight02Icon",
+    "Tick02Icon",
+    "ArrowDown01Icon",
+    "ArrowRight01Icon",
+  ],
+  phosphor: [
+    "CopyIcon",
+    "WarningCircleIcon",
+    "TrashIcon",
+    "ShareIcon",
+    "BagIcon",
+    "DotsThreeIcon",
+    "SpinnerIcon",
+    "PlusIcon",
+    "MinusIcon",
+    "ArrowLeftIcon",
+    "ArrowRightIcon",
+    "CheckIcon",
+    "CaretDownIcon",
+    "CaretRightIcon",
+  ],
+  remixicon: [
+    "RiFileCopyLine",
+    "RiErrorWarningLine",
+    "RiDeleteBinLine",
+    "RiShareLine",
+    "RiShoppingBagLine",
+    "RiMoreLine",
+    "RiLoaderLine",
+    "RiAddLine",
+    "RiSubtractLine",
+    "RiArrowLeftLine",
+    "RiArrowRightLine",
+    "RiCheckLine",
+    "RiArrowDownSLine",
+    "RiArrowRightSLine",
+  ],
+}
+
+const logos = {
+  lucide: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="currentColor"
+        d="M14 12a4 4 0 0 0-8 0 8 8 0 1 0 16 0 11.97 11.97 0 0 0-4-8.944"
+      />
+      <path
+        stroke="currentColor"
+        d="M10 12a4 4 0 0 0 8 0 8 8 0 1 0-16 0 11.97 11.97 0 0 0 4.063 9"
+      />
+    </svg>
+  ),
+  tabler: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      fill="none"
+      viewBox="0 0 32 32"
+    >
+      <path
+        fill="currentColor"
+        d="M31.288 7.107A8.83 8.83 0 0 0 24.893.712a55.9 55.9 0 0 0-17.786 0A8.83 8.83 0 0 0 .712 7.107a55.9 55.9 0 0 0 0 17.786 8.83 8.83 0 0 0 6.395 6.395c5.895.95 11.89.95 17.786 0a8.83 8.83 0 0 0 6.395-6.395c.95-5.895.95-11.89 0-17.786"
+      />
+      <path
+        fill="#fff"
+        d="m17.884 9.076 1.5-2.488 6.97 6.977-2.492 1.494zm-7.96 3.127 7.814-.909 3.91 3.66-.974 7.287-9.582 2.159a3.06 3.06 0 0 1-2.17-.329l5.244-4.897c.91.407 2.003.142 2.587-.626.584-.77.488-1.818-.226-2.484s-1.84-.755-2.664-.21c-.823.543-1.107 1.562-.67 2.412l-5.245 4.89a2.53 2.53 0 0 1-.339-2.017z"
+      />
+    </svg>
+  ),
+  hugeicons: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="128"
+      height="128"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    >
+      <path d="M2 9.5H22" stroke="currentColor"></path>
+      <path
+        d="M20.5 9.5H3.5L4.23353 15.3682C4.59849 18.2879 4.78097 19.7477 5.77343 20.6239C6.76589 21.5 8.23708 21.5 11.1795 21.5H12.8205C15.7629 21.5 17.2341 21.5 18.2266 20.6239C19.219 19.7477 19.4015 18.2879 19.7665 15.3682L20.5 9.5Z"
+        stroke="currentColor"
+      ></path>
+      <path
+        d="M5 9C5 5.41015 8.13401 2.5 12 2.5C15.866 2.5 19 5.41015 19 9"
+        stroke="currentColor"
+      ></path>
+    </svg>
+  ),
+  phosphor: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 32 32"
+      width="32"
+      height="32"
+    >
+      <path fill="none" d="M0 0h32v32H0z" />
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M9 5h9v16H9zm9 16v9a9 9 0 0 1-9-9M9 5l9 16m0 0h1a8 8 0 0 0 0-16h-1"
+      />
+    </svg>
+  ),
+  remixicon: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="currentColor"
+    >
+      <path d="M12 2C17.5228 2 22 6.47715 22 12C22 15.3137 19.3137 18 16 18C12.6863 18 10 15.3137 10 12C10 11.4477 9.55228 11 9 11C8.44772 11 8 11.4477 8 12C8 16.4183 11.5817 20 16 20C16.8708 20 17.7084 19.8588 18.4932 19.6016C16.7458 21.0956 14.4792 22 12 22C6.6689 22 2.3127 17.8283 2.0166 12.5713C2.23647 9.45772 4.83048 7 8 7C11.3137 7 14 9.68629 14 13C14 13.5523 14.4477 14 15 14C15.5523 14 16 13.5523 16 13C16 8.58172 12.4183 5 8 5C6.50513 5 5.1062 5.41032 3.90918 6.12402C5.72712 3.62515 8.67334 2 12 2Z" />
+    </svg>
+  ),
+}
+
+export function IconLibraryPicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const currentIconLibrary = React.useMemo(
+    () => iconLibraries[params.iconLibrary as keyof typeof iconLibraries],
+    [params.iconLibrary]
+  )
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-muted-foreground text-xs">Icon Library</div>
+            <div className="text-foreground text-sm font-medium">
+              {currentIconLibrary?.title}
+            </div>
+          </div>
+          <div className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
+            {logos[currentIconLibrary?.name as keyof typeof logos]}
+          </div>
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+        >
+          <PickerRadioGroup
+            value={currentIconLibrary?.name}
+            onValueChange={(value) => {
+              setParams({ iconLibrary: value as IconLibraryName })
+            }}
+          >
+            <PickerGroup>
+              {Object.values(iconLibraries).map((iconLibrary, index) => (
+                <React.Fragment key={iconLibrary.name}>
+                  <IconLibraryPickerItem
+                    iconLibrary={iconLibrary}
+                    value={iconLibrary.name}
+                  />
+                  {index < Object.values(iconLibraries).length - 1 && (
+                    <PickerSeparator className="opacity-50" />
+                  )}
+                </React.Fragment>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="iconLibrary"
+        className="absolute top-1/2 right-10 -translate-y-1/2"
+      />
+    </div>
+  )
+}
+
+function IconLibraryPickerItem({
+  iconLibrary,
+  value,
+}: {
+  iconLibrary: IconLibrary
+  value: string
+}) {
+  return (
+    <PickerRadioItem
+      value={value}
+      className="pr-2 *:data-[slot=dropdown-menu-radio-item-indicator]:hidden"
+    >
+      <Item size="xs">
+        <ItemContent className="gap-1">
+          <ItemTitle className="text-muted-foreground text-xs font-medium">
+            {iconLibrary.title}
+          </ItemTitle>
+          <IconLibraryPreview iconLibrary={iconLibrary.name} />
+        </ItemContent>
+      </Item>
+    </PickerRadioItem>
+  )
+}
+
+const IconLibraryPreview = memo(function IconLibraryPreview({
+  iconLibrary,
+}: {
+  iconLibrary: IconLibraryName
+}) {
+  const previewIcons = PREVIEW_ICONS[iconLibrary]
+
+  if (!previewIcons) {
+    return null
+  }
+
+  const IconRenderer =
+    iconLibrary === "lucide"
+      ? IconLucide
+      : iconLibrary === "tabler"
+        ? IconTabler
+        : iconLibrary === "hugeicons"
+          ? IconHugeicons
+          : iconLibrary === "phosphor"
+            ? IconPhosphor
+            : IconRemixicon
+
+  return (
+    <Suspense
+      fallback={
+        <div className="-mx-1 grid w-full grid-cols-7 gap-2">
+          {previewIcons.map((iconName) => (
+            <div
+              key={iconName}
+              className="bg-muted size-6 animate-pulse rounded"
+            />
+          ))}
+        </div>
+      }
+    >
+      <div className="-mx-1 grid w-full grid-cols-7 gap-2">
+        {previewIcons.map((iconName) => (
+          <div
+            key={iconName}
+            className="flex size-6 items-center justify-center *:[svg]:size-5"
+          >
+            <IconRenderer name={iconName} />
+          </div>
+        ))}
+      </div>
+    </Suspense>
+  )
+})

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

@@ -0,0 +1,66 @@
+"use client"
+
+import { lazy, Suspense } from "react"
+import { SquareIcon } from "lucide-react"
+import type { IconLibraryName } from "shadcn/icons"
+
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+const IconLucide = lazy(() =>
+  import("@/registry/icons/icon-lucide").then((mod) => ({
+    default: mod.IconLucide,
+  }))
+)
+
+const IconTabler = lazy(() =>
+  import("@/registry/icons/icon-tabler").then((mod) => ({
+    default: mod.IconTabler,
+  }))
+)
+
+const IconHugeicons = lazy(() =>
+  import("@/registry/icons/icon-hugeicons").then((mod) => ({
+    default: mod.IconHugeicons,
+  }))
+)
+
+const IconPhosphor = lazy(() =>
+  import("@/registry/icons/icon-phosphor").then((mod) => ({
+    default: mod.IconPhosphor,
+  }))
+)
+
+const IconRemixicon = lazy(() =>
+  import("@/registry/icons/icon-remixicon").then((mod) => ({
+    default: mod.IconRemixicon,
+  }))
+)
+
+export function IconPlaceholder({
+  ...props
+}: {
+  [K in IconLibraryName]: string
+} & React.ComponentProps<"svg">) {
+  const [{ iconLibrary }] = useDesignSystemSearchParams()
+  const iconName = props[iconLibrary]
+
+  if (!iconName) {
+    return null
+  }
+
+  return (
+    <Suspense fallback={<SquareIcon {...props} />}>
+      {iconLibrary === "lucide" && <IconLucide name={iconName} {...props} />}
+      {iconLibrary === "tabler" && <IconTabler name={iconName} {...props} />}
+      {iconLibrary === "hugeicons" && (
+        <IconHugeicons name={iconName} {...props} />
+      )}
+      {iconLibrary === "phosphor" && (
+        <IconPhosphor name={iconName} {...props} />
+      )}
+      {iconLibrary === "remixicon" && (
+        <IconRemixicon name={iconName} {...props} />
+      )}
+    </Suspense>
+  )
+}

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

@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import { ChevronRightIcon } from "lucide-react"
+import { type RegistryItem } from "shadcn/schema"
+
+import { cn } from "@/lib/utils"
+import { type Base } from "@/registry/bases"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york-v4/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york-v4/ui/sidebar"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { groupItemsByType } from "@/app/(create)/lib/utils"
+
+const cachedGroupedItems = React.cache(
+  (items: Pick<RegistryItem, "name" | "title" | "type">[]) => {
+    return groupItemsByType(items)
+  }
+)
+
+export function ItemExplorer({
+  base,
+  items,
+}: {
+  base: Base["name"]
+  items: Pick<RegistryItem, "name" | "title" | "type">[]
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const groupedItems = React.useMemo(() => cachedGroupedItems(items), [items])
+
+  const currentItem = React.useMemo(
+    () => items.find((item) => item.name === params.item) ?? null,
+    [items, params.item]
+  )
+
+  return (
+    <Sidebar
+      className="sticky z-30 hidden h-[calc(100svh-var(--header-height)-2rem)] overscroll-none bg-transparent xl:flex"
+      collapsible="none"
+    >
+      <SidebarContent className="no-scrollbar -mx-1 overflow-x-hidden">
+        {groupedItems.map((group) => (
+          <Collapsible
+            key={group.type}
+            defaultOpen
+            className="group/collapsible"
+          >
+            <SidebarGroup className="px-1 py-0">
+              <CollapsibleTrigger className="flex w-full items-center gap-1 py-1.5 text-[0.8rem] font-medium [&[data-state=open]>svg]:rotate-90">
+                <ChevronRightIcon className="text-muted-foreground size-3.5 transition-transform" />
+                <span>{group.title}</span>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu className="border-border/50 relative ml-1.5 border-l pl-2">
+                    {group.items.map((item, index) => (
+                      <SidebarMenuItem key={item.name} className="relative">
+                        <div
+                          className={cn(
+                            "border-border/50 absolute top-1/2 -left-2 h-px w-2 border-t",
+                            index === group.items.length - 1 && "bg-sidebar"
+                          )}
+                        />
+                        {index === group.items.length - 1 && (
+                          <div className="bg-sidebar absolute top-1/2 -bottom-1 -left-2.5 w-1" />
+                        )}
+                        <SidebarMenuButton
+                          onClick={() => setParams({ item: item.name })}
+                          className="data-[active=true]:bg-accent data-[active=true]:border-accent 3xl:fixed:w-full 3xl:fixed:max-w-48 relative h-[26px] w-fit cursor-pointer overflow-visible border border-transparent text-[0.8rem] font-normal after:absolute after:inset-x-0 after:-inset-y-1 after:-z-0 after:rounded-md"
+                          data-active={item.name === currentItem?.name}
+                          isActive={item.name === currentItem?.name}
+                        >
+                          {item.title}
+                          <span className="absolute inset-0 flex w-(--sidebar-width) bg-transparent" />
+                        </SidebarMenuButton>
+                        <Link
+                          href={`/preview/${base}/${item.name}`}
+                          prefetch
+                          className="sr-only"
+                          tabIndex={-1}
+                        >
+                          {item.title}
+                        </Link>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </SidebarGroup>
+          </Collapsible>
+        ))}
+      </SidebarContent>
+    </Sidebar>
+  )
+}

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

@@ -0,0 +1,193 @@
+"use client"
+
+import * as React from "react"
+import Script from "next/script"
+import { Search01Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { type RegistryItem } from "shadcn/schema"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Combobox,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "@/registry/new-york-v4/ui/combobox"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { groupItemsByType } from "@/app/(create)/lib/utils"
+
+export const CMD_K_FORWARD_TYPE = "cmd-k-forward"
+
+const cachedGroupedItems = React.cache(
+  (items: Pick<RegistryItem, "name" | "title" | "type">[]) => {
+    return groupItemsByType(items)
+  }
+)
+
+export function ItemPicker({
+  items,
+}: {
+  items: Pick<RegistryItem, "name" | "title" | "type">[]
+}) {
+  const [open, setOpen] = React.useState(false)
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const groupedItems = React.useMemo(() => cachedGroupedItems(items), [items])
+
+  const currentItem = React.useMemo(
+    () => items.find((item) => item.name === params.item) ?? null,
+    [items, params.item]
+  )
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if ((e.key === "k" || e.key === "p") && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [])
+
+  const handleSelect = React.useCallback(
+    (item: Pick<RegistryItem, "name" | "title" | "type">) => {
+      setParams({ item: item.name })
+      setOpen(false)
+    },
+    [setParams]
+  )
+
+  const comboboxValue = React.useMemo(() => {
+    return currentItem ?? null
+  }, [currentItem])
+
+  return (
+    <Combobox
+      autoHighlight
+      items={groupedItems}
+      value={comboboxValue}
+      onValueChange={(value) => {
+        if (value) {
+          handleSelect(value)
+        }
+      }}
+      open={open}
+      onOpenChange={setOpen}
+      itemToStringValue={(item) => {
+        if (!item) {
+          return ""
+        }
+        // Handle both groups and items.
+        if ("items" in item) {
+          return item.title ?? ""
+        }
+        return item.title ?? item.name ?? ""
+      }}
+    >
+      <ComboboxTrigger
+        render={
+          <Button
+            variant="outline"
+            aria-label="Select item"
+            size="sm"
+            className="data-popup-open:bg-muted dark:data-popup-open:bg-muted/50 bg-muted/50 sm:bg-background md:dark:bg-background border-foreground/10 dark:bg-muted/50 h-[calc(--spacing(13.5))] flex-1 touch-manipulation justify-between gap-2 rounded-xl pr-4! pl-2.5 text-left shadow-none select-none *:data-[slot=combobox-trigger-icon]:hidden sm:h-8 sm:max-w-56 sm:rounded-lg sm:pr-2! xl:max-w-64"
+          />
+        }
+      >
+        <ComboboxValue>
+          {(value) => (
+            <>
+              <div className="flex flex-col justify-start text-left sm:hidden">
+                <div className="text-muted-foreground text-xs font-normal">
+                  Preview
+                </div>
+                <div className="text-foreground text-sm font-medium">
+                  {value?.title || "Not Found"}
+                </div>
+              </div>
+              <div className="text-foreground hidden flex-1 text-sm sm:flex">
+                {value?.title || "Not Found"}
+              </div>
+            </>
+          )}
+        </ComboboxValue>
+        <HugeiconsIcon icon={Search01Icon} />
+      </ComboboxTrigger>
+      <ComboboxContent
+        className="ring-foreground/10 min-w-[calc(var(--available-width)---spacing(4))] translate-x-2 animate-none rounded-xl border-0 ring-1 data-open:animate-none sm:min-w-[calc(var(--anchor-width)+--spacing(7))] sm:translate-x-0 xl:w-96"
+        side="bottom"
+        align="end"
+      >
+        <ComboboxInput
+          showTrigger={false}
+          placeholder="Search"
+          className="bg-muted h-8 rounded-lg shadow-none has-focus-visible:border-inherit! has-focus-visible:ring-0! pointer-coarse:hidden"
+        />
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList className="no-scrollbar scroll-my-1 pb-1">
+          {(group) => (
+            <ComboboxGroup key={group.type} items={group.items}>
+              <ComboboxLabel>{group.title}</ComboboxLabel>
+              <ComboboxCollection>
+                {(item) => (
+                  <ComboboxItem
+                    key={item.name}
+                    value={item}
+                    className="group/combobox-item rounded-lg pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base"
+                  >
+                    {item.title}
+                    <span className="text-muted-foreground ml-auto text-xs opacity-0 group-data-[selected=true]/combobox-item:opacity-100">
+                      {group.title}
+                    </span>
+                  </ComboboxItem>
+                )}
+              </ComboboxCollection>
+            </ComboboxGroup>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+      <div
+        data-open={open}
+        className="fixed inset-0 z-50 hidden bg-transparent data-[open=true]:block"
+        onClick={() => setOpen(false)}
+      />
+    </Combobox>
+  )
+}
+
+export function ItemPickerScript() {
+  return (
+    <Script
+      id="design-system-listener"
+      strategy="beforeInteractive"
+      dangerouslySetInnerHTML={{
+        __html: `
+            (function() {
+              // Forward Cmd/Ctrl + K and Cmd/Ctrl + P
+              document.addEventListener('keydown', function(e) {
+                if ((e.key === 'k' || e.key === 'p') && (e.metaKey || e.ctrlKey)) {
+                  e.preventDefault();
+                  if (window.parent && window.parent !== window) {
+                    window.parent.postMessage({
+                      type: '${CMD_K_FORWARD_TYPE}',
+                      key: e.key
+                    }, '*');
+                  }
+                }
+              });
+
+            })();
+          `,
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,50 @@
+"use client"
+
+import {
+  SquareLock01Icon,
+  SquareUnlock01Icon,
+} from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { cn } from "@/lib/utils"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/new-york-v4/ui/tooltip"
+import { useLocks, type LockableParam } from "@/app/(create)/hooks/use-locks"
+
+export function LockButton({
+  param,
+  className,
+}: {
+  param: LockableParam
+  className?: string
+}) {
+  const { isLocked, toggleLock } = useLocks()
+  const locked = isLocked(param)
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={() => toggleLock(param)}
+          data-locked={locked}
+          className={cn(
+            "flex size-4 cursor-pointer items-center justify-center rounded opacity-0 transition-opacity group-focus-within/picker:opacity-100 group-hover/picker:opacity-100 focus:opacity-100 data-[locked=true]:opacity-100 pointer-coarse:hidden",
+            className
+          )}
+          aria-label={locked ? "Unlock" : "Lock"}
+        >
+          <HugeiconsIcon
+            icon={locked ? SquareLock01Icon : SquareUnlock01Icon}
+            strokeWidth={2}
+            className="text-foreground size-5"
+          />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>{locked ? "Unlock" : "Lock"}</TooltipContent>
+    </Tooltip>
+  )
+}

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

@@ -0,0 +1,163 @@
+"use client"
+
+import * as React from "react"
+import { useTheme } from "next-themes"
+
+import { useMounted } from "@/hooks/use-mounted"
+import { type MenuColorValue } from "@/registry/config"
+import { LockButton } from "@/app/(create)/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerTrigger,
+} from "@/app/(create)/components/picker"
+import { 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="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="fill-foreground 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="var(--background)"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9.5 15H13.5"
+          stroke="var(--background)"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M7.5 8H15.5"
+          stroke="var(--background)"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    ),
+  },
+] as const
+
+export function MenuColorPicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const { resolvedTheme } = useTheme()
+  const mounted = useMounted()
+  const [params, setParams] = useDesignSystemSearchParams()
+  const currentMenu = MENU_OPTIONS.find(
+    (menu) => menu.value === params.menuColor
+  )
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger disabled={mounted && resolvedTheme === "dark"}>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-muted-foreground text-xs">Menu Color</div>
+            <div className="text-foreground text-sm font-medium">
+              {currentMenu?.label}
+            </div>
+          </div>
+          <div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
+            {currentMenu?.icon}
+          </div>
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          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}>
+                  {menu.icon}
+                  {menu.label}
+                </PickerRadioItem>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="menuColor"
+        className="absolute top-1/2 right-10 -translate-y-1/2"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,290 @@
+"use client"
+
+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/(create)/components/icon-placeholder"
+
+function Picker({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function PickerPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function PickerTrigger({ className, ...props }: MenuPrimitive.Trigger.Props) {
+  return (
+    <MenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      className={cn(
+        "hover:bg-muted data-popup-open:bg-muted border-foreground/10 bg-muted/50 relative w-[160px] shrink-0 touch-manipulation rounded-xl border p-2 select-none disabled:opacity-50 md:w-full md:rounded-lg md:border-transparent md:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PickerContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  anchor,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "anchor"
+  >) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        anchor={anchor}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn(
+            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 bg-popover text-popover-foreground cn-menu-target ring-foreground/10 no-scrollbar z-50 max-h-(--available-height) w-[calc(var(--available-width)-(--spacing(3.5)))] min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border-0 p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden md:w-52",
+            className
+          )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+      <div className="absolute inset-0 z-40 bg-transparent" />
+    </MenuPrimitive.Portal>
+  )
+}
+
+function PickerGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function PickerLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PickerItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PickerSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+function PickerSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <IconPlaceholder
+        lucide="ChevronRightIcon"
+        tabler="IconChevronRight"
+        hugeicons="ArrowRight01Icon"
+        phosphor="CaretRightIcon"
+        remixicon="RiArrowRightSLine"
+        className="ml-auto"
+      />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function PickerSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof PickerContent>) {
+  return (
+    <PickerContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 bg-popover text-popover-foreground w-auto min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100",
+        className
+      )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function PickerCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex items-center justify-center">
+        <MenuPrimitive.CheckboxItemIndicator>
+          <IconPlaceholder
+            lucide="CheckIcon"
+            tabler="IconCheck"
+            hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
+            remixicon="RiCheckLine"
+          />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function PickerRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function PickerRadioItem({
+  className,
+  children,
+  ...props
+}: MenuPrimitive.RadioItem.Props) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pointer-coarse:gap-3 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <IconPlaceholder
+            lucide="CheckIcon"
+            tabler="IconCheck"
+            hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
+            remixicon="RiCheckLine"
+            className="size-4 pointer-coarse:size-5"
+          />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function PickerSeparator({
+  className,
+  ...props
+}: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function PickerShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Picker,
+  PickerPortal,
+  PickerTrigger,
+  PickerContent,
+  PickerGroup,
+  PickerLabel,
+  PickerItem,
+  PickerCheckboxItem,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerSeparator,
+  PickerShortcut,
+  PickerSub,
+  PickerSubTrigger,
+  PickerSubContent,
+}

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

@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+
+import { STYLES, type Preset } from "@/registry/config"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerTrigger,
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function PresetPicker({
+  presets,
+  isMobile,
+  anchorRef,
+}: {
+  presets: readonly Preset[]
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const currentPreset = React.useMemo(() => {
+    return presets.find(
+      (preset) =>
+        preset.base === params.base &&
+        preset.style === params.style &&
+        preset.baseColor === params.baseColor &&
+        preset.theme === params.theme &&
+        preset.iconLibrary === params.iconLibrary &&
+        preset.font === params.font &&
+        preset.menuAccent === params.menuAccent &&
+        preset.menuColor === params.menuColor &&
+        preset.radius === params.radius
+    )
+  }, [
+    presets,
+    params.base,
+    params.style,
+    params.baseColor,
+    params.theme,
+    params.iconLibrary,
+    params.font,
+    params.menuAccent,
+    params.menuColor,
+    params.radius,
+  ])
+
+  // Filter presets for current base only
+  const currentBasePresets = React.useMemo(() => {
+    return presets.filter((preset) => preset.base === params.base)
+  }, [presets, params.base])
+
+  const handlePresetChange = (value: string) => {
+    const preset = presets.find((p) => p.title === value)
+    if (!preset) {
+      return
+    }
+
+    // Update all params including base.
+    setParams({
+      base: preset.base,
+      style: preset.style,
+      baseColor: preset.baseColor,
+      theme: preset.theme,
+      iconLibrary: preset.iconLibrary,
+      font: preset.font,
+      menuAccent: preset.menuAccent,
+      menuColor: preset.menuColor,
+      radius: preset.radius,
+      custom: false,
+    })
+  }
+
+  return (
+    <Picker>
+      <PickerTrigger>
+        <div className="flex flex-col justify-start text-left">
+          <div className="text-muted-foreground text-xs">Preset</div>
+          <div className="text-foreground line-clamp-1 text-sm font-medium">
+            {currentPreset?.description ?? "Custom"}
+          </div>
+        </div>
+      </PickerTrigger>
+      <PickerContent
+        anchor={isMobile ? anchorRef : undefined}
+        side={isMobile ? "top" : "right"}
+        align={isMobile ? "center" : "start"}
+        className="md:w-72"
+      >
+        <PickerRadioGroup
+          value={currentPreset?.title ?? ""}
+          onValueChange={handlePresetChange}
+        >
+          <PickerGroup>
+            {currentBasePresets.map((preset) => {
+              const style = STYLES.find((s) => s.name === preset.style)
+              return (
+                <PickerRadioItem key={preset.title} value={preset.title}>
+                  <div className="flex items-center gap-2">
+                    {style?.icon && (
+                      <div className="flex size-4 shrink-0 items-center justify-center">
+                        {React.cloneElement(style.icon, {
+                          className: "size-4",
+                        })}
+                      </div>
+                    )}
+                    {preset.description}
+                  </div>
+                </PickerRadioItem>
+              )
+            })}
+          </PickerGroup>
+        </PickerRadioGroup>
+      </PickerContent>
+    </Picker>
+  )
+}

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

@@ -0,0 +1,40 @@
+"use client"
+
+import { Monitor, Smartphone, Tablet } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york-v4/ui/toggle-group"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function PreviewControls() {
+  const [params, setParams] = useDesignSystemSearchParams({
+    history: "replace",
+  })
+
+  return (
+    <div className="flex h-8 items-center gap-1.5 rounded-md border p-1">
+      <ToggleGroup
+        type="single"
+        value={params.size.toString()}
+        onValueChange={(newValue) => {
+          if (newValue) {
+            setParams({ size: parseInt(newValue) })
+          }
+        }}
+        className="gap-1 *:data-[slot=toggle-group-item]:!size-6 *:data-[slot=toggle-group-item]:!rounded-sm"
+      >
+        <ToggleGroupItem value="100" title="Desktop">
+          <Monitor />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="60" title="Tablet">
+          <Tablet />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="30" title="Mobile">
+          <Smartphone />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  )
+}

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

@@ -0,0 +1,16 @@
+"use client"
+
+export function PreviewStyle() {
+  return (
+    <style jsx global>{`
+      html {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+    `}</style>
+  )
+}

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

@@ -0,0 +1,126 @@
+"use client"
+
+import * as React from "react"
+import { type ImperativePanelHandle } from "react-resizable-panels"
+
+import { DARK_MODE_FORWARD_TYPE } from "@/components/mode-switcher"
+import { Badge } from "@/registry/new-york-v4/ui/badge"
+import { CMD_K_FORWARD_TYPE } from "@/app/(create)/components/item-picker"
+import { RANDOMIZE_FORWARD_TYPE } from "@/app/(create)/components/random-button"
+import { sendToIframe } from "@/app/(create)/hooks/use-iframe-sync"
+import {
+  serializeDesignSystemSearchParams,
+  useDesignSystemSearchParams,
+} from "@/app/(create)/lib/search-params"
+
+export function Preview() {
+  const [params] = useDesignSystemSearchParams()
+  const iframeRef = React.useRef<HTMLIFrameElement>(null)
+  const resizablePanelRef = React.useRef<ImperativePanelHandle>(null)
+
+  // Sync resizable panel with URL param changes.
+  React.useEffect(() => {
+    if (resizablePanelRef.current && params.size) {
+      resizablePanelRef.current.resize(params.size)
+    }
+  }, [params.size])
+
+  React.useEffect(() => {
+    const iframe = iframeRef.current
+    if (!iframe) {
+      return
+    }
+
+    const sendParams = () => {
+      sendToIframe(iframe, "design-system-params", params)
+    }
+
+    if (iframe.contentWindow) {
+      sendParams()
+    }
+
+    iframe.addEventListener("load", sendParams)
+    return () => {
+      iframe.removeEventListener("load", sendParams)
+    }
+  }, [params])
+
+  const handleMessage = (event: MessageEvent) => {
+    if (event.data.type === CMD_K_FORWARD_TYPE) {
+      const isMac = /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)
+      const key = event.data.key || "k"
+
+      const syntheticEvent = new KeyboardEvent("keydown", {
+        key,
+        metaKey: isMac,
+        ctrlKey: !isMac,
+        bubbles: true,
+        cancelable: true,
+      })
+      document.dispatchEvent(syntheticEvent)
+    }
+
+    if (event.data.type === RANDOMIZE_FORWARD_TYPE) {
+      const key = event.data.key || "r"
+
+      const syntheticEvent = new KeyboardEvent("keydown", {
+        key,
+        bubbles: true,
+        cancelable: true,
+      })
+      document.dispatchEvent(syntheticEvent)
+    }
+
+    if (event.data.type === DARK_MODE_FORWARD_TYPE) {
+      const key = event.data.key || "d"
+
+      const syntheticEvent = new KeyboardEvent("keydown", {
+        key,
+        bubbles: true,
+        cancelable: true,
+      })
+      document.dispatchEvent(syntheticEvent)
+    }
+  }
+
+  React.useEffect(() => {
+    window.addEventListener("message", handleMessage)
+    return () => {
+      window.removeEventListener("message", handleMessage)
+    }
+  }, [])
+
+  const iframeSrc = React.useMemo(() => {
+    // The iframe src needs to include the serialized design system params
+    // for the initial load, but not be reactive to them as it would cause
+    // full-iframe reloads on every param change (flashes & loss of state).
+    // Further updates of the search params will be sent to the iframe
+    // via a postMessage channel, for it to sync its own history onto the host's.
+    return serializeDesignSystemSearchParams(
+      `/preview/${params.base}/${params.item}`,
+      params
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [params.base, params.item])
+
+  return (
+    <div className="relative -mx-1 flex flex-1 flex-col justify-center sm:mx-0">
+      <div className="ring-foreground/15 3xl:max-h-[1200px] 3xl:max-w-[1800px] relative -z-0 mx-auto flex w-full flex-1 flex-col overflow-hidden rounded-2xl ring-1">
+        <div className="bg-muted dark:bg-muted/30 absolute inset-0 rounded-2xl" />
+        <iframe
+          key={params.base + params.item}
+          ref={iframeRef}
+          src={iframeSrc}
+          className="z-10 size-full flex-1"
+          title="Preview"
+        />
+        <Badge
+          className="absolute right-2 bottom-2 isolate z-10"
+          variant="secondary"
+        >
+          Preview
+        </Badge>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,101 @@
+"use client"
+
+import { RADII, type RadiusValue } from "@/registry/config"
+import { LockButton } from "@/app/(create)/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerSeparator,
+  PickerTrigger,
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function RadiusPicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const currentRadius = RADII.find((radius) => radius.name === params.radius)
+  const defaultRadius = RADII.find((radius) => radius.name === "default")
+  const otherRadii = RADII.filter((radius) => radius.name !== "default")
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-muted-foreground text-xs">Radius</div>
+            <div className="text-foreground text-sm font-medium">
+              {currentRadius?.label}
+            </div>
+          </div>
+          <div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 rotate-90 items-center justify-center text-base select-none">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              className="text-foreground"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M4 20v-5C4 8.925 8.925 4 15 4h5"
+              />
+            </svg>
+          </div>
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+        >
+          <PickerRadioGroup
+            value={currentRadius?.name}
+            onValueChange={(value) => {
+              setParams({ radius: value as RadiusValue })
+            }}
+          >
+            <PickerGroup>
+              {defaultRadius && (
+                <PickerRadioItem
+                  key={defaultRadius.name}
+                  value={defaultRadius.name}
+                >
+                  <div className="flex flex-col justify-start pointer-coarse:gap-1">
+                    <div>{defaultRadius.label}</div>
+                    <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
+                      Use radius from style
+                    </div>
+                  </div>
+                </PickerRadioItem>
+              )}
+            </PickerGroup>
+            <PickerSeparator />
+            <PickerGroup>
+              {otherRadii.map((radius) => (
+                <PickerRadioItem key={radius.name} value={radius.name}>
+                  {radius.label}
+                </PickerRadioItem>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="radius"
+        className="absolute top-1/2 right-10 -translate-y-1/2"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+import Script from "next/script"
+import { DiceFaces05Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import {
+  BASE_COLORS,
+  getThemesForBaseColor,
+  iconLibraries,
+  MENU_ACCENTS,
+  MENU_COLORS,
+  RADII,
+  STYLES,
+} from "@/registry/config"
+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"
+import { useLocks } from "@/app/(create)/hooks/use-locks"
+import { FONTS } from "@/app/(create)/lib/fonts"
+import {
+  applyBias,
+  RANDOMIZE_BIASES,
+  type RandomizeContext,
+} from "@/app/(create)/lib/randomize-biases"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export const RANDOMIZE_FORWARD_TYPE = "randomize-forward"
+
+function randomItem<T>(array: readonly T[]): T {
+  return array[Math.floor(Math.random() * array.length)]
+}
+
+export function RandomButton() {
+  const { locks } = useLocks()
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const handleRandomize = React.useCallback(() => {
+    // Use current value if locked, otherwise randomize.
+    const baseColor = locks.has("baseColor")
+      ? params.baseColor
+      : randomItem(BASE_COLORS).name
+    const selectedStyle = locks.has("style")
+      ? params.style
+      : randomItem(STYLES).name
+
+    // Build context for bias application.
+    const context: RandomizeContext = {
+      style: selectedStyle,
+      baseColor,
+    }
+
+    const availableThemes = getThemesForBaseColor(baseColor)
+    const availableFonts = applyBias(FONTS, context, RANDOMIZE_BIASES.fonts)
+    const availableRadii = applyBias(RADII, context, RANDOMIZE_BIASES.radius)
+
+    const selectedTheme = locks.has("theme")
+      ? params.theme
+      : randomItem(availableThemes).name
+    const selectedFont = locks.has("font")
+      ? params.font
+      : randomItem(availableFonts).value
+    const selectedRadius = locks.has("radius")
+      ? params.radius
+      : randomItem(availableRadii).name
+    const selectedIconLibrary = locks.has("iconLibrary")
+      ? params.iconLibrary
+      : randomItem(Object.values(iconLibraries)).name
+    const selectedMenuAccent = locks.has("menuAccent")
+      ? params.menuAccent
+      : randomItem(MENU_ACCENTS).value
+    const selectedMenuColor = locks.has("menuColor")
+      ? params.menuColor
+      : randomItem(MENU_COLORS).value
+
+    // Update context with selected values for potential future biases.
+    context.theme = selectedTheme
+    context.font = selectedFont
+    context.radius = selectedRadius
+
+    setParams({
+      style: selectedStyle,
+      baseColor,
+      theme: selectedTheme,
+      iconLibrary: selectedIconLibrary,
+      font: selectedFont,
+      menuAccent: selectedMenuAccent,
+      menuColor: selectedMenuColor,
+      radius: selectedRadius,
+    })
+  }, [setParams, locks, params])
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if ((e.key === "r" || e.key === "R") && !e.metaKey && !e.ctrlKey) {
+        if (
+          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+          e.target instanceof HTMLInputElement ||
+          e.target instanceof HTMLTextAreaElement ||
+          e.target instanceof HTMLSelectElement
+        ) {
+          return
+        }
+
+        e.preventDefault()
+        handleRandomize()
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [handleRandomize])
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleRandomize}
+          className="border-foreground/10 bg-muted/50 h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
+        >
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-muted-foreground text-xs">Shuffle</div>
+            <div className="text-foreground text-sm font-medium">
+              Try Random
+            </div>
+          </div>
+          <HugeiconsIcon icon={DiceFaces05Icon} className="size-5 md:hidden" />
+          <Kbd className="bg-foreground/10 text-foreground hidden md:flex">
+            R
+          </Kbd>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="left">
+        Use browser back/forward to navigate history
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+export function RandomizeScript() {
+  return (
+    <Script
+      id="randomize-listener"
+      strategy="beforeInteractive"
+      dangerouslySetInnerHTML={{
+        __html: `
+            (function() {
+              // Forward R key
+              document.addEventListener('keydown', function(e) {
+                if ((e.key === 'r' || e.key === 'R') && !e.metaKey && !e.ctrlKey) {
+                  if (
+                    (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+                    e.target instanceof HTMLInputElement ||
+                    e.target instanceof HTMLTextAreaElement ||
+                    e.target instanceof HTMLSelectElement
+                  ) {
+                    return;
+                  }
+                  e.preventDefault();
+                  if (window.parent && window.parent !== window) {
+                    window.parent.postMessage({
+                      type: '${RANDOMIZE_FORWARD_TYPE}',
+                      key: e.key
+                    }, '*');
+                  }
+                }
+              });
+
+            })();
+          `,
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,75 @@
+"use client"
+
+import * as React from "react"
+import { Undo02Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { DEFAULT_CONFIG } from "@/registry/config"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/registry/new-york-v4/ui/alert-dialog"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function ResetButton() {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const handleReset = React.useCallback(() => {
+    setParams({
+      base: params.base, // Keep the current base value.
+      style: DEFAULT_CONFIG.style,
+      baseColor: DEFAULT_CONFIG.baseColor,
+      theme: DEFAULT_CONFIG.theme,
+      iconLibrary: DEFAULT_CONFIG.iconLibrary,
+      font: DEFAULT_CONFIG.font,
+      menuAccent: DEFAULT_CONFIG.menuAccent,
+      menuColor: DEFAULT_CONFIG.menuColor,
+      radius: DEFAULT_CONFIG.radius,
+      template: DEFAULT_CONFIG.template,
+      item: "preview",
+    })
+  }, [setParams, params.base])
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="border-foreground/10 bg-muted/50 hidden h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:flex md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
+        >
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-muted-foreground text-xs">Reset</div>
+            <div className="text-foreground text-sm font-medium">
+              Start Over
+            </div>
+          </div>
+          <HugeiconsIcon icon={Undo02Icon} className="-translate-x-0.5" />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent className="dialog-ring p-4 sm:max-w-sm">
+        <AlertDialogHeader>
+          <AlertDialogTitle>Reset to defaults?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will reset all customization options to their default values.
+            This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel className="rounded-lg">Cancel</AlertDialogCancel>
+          <AlertDialogAction className="rounded-lg" onClick={handleReset}>
+            Reset
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

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

@@ -0,0 +1,73 @@
+"use client"
+
+import * as React from "react"
+import { Share03Icon, Tick02Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/new-york-v4/ui/tooltip"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function ShareButton() {
+  const [params] = useDesignSystemSearchParams()
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  const shareUrl = React.useMemo(() => {
+    const origin = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000"
+    return `${origin}/create?base=${params.base}&style=${params.style}&baseColor=${params.baseColor}&theme=${params.theme}&iconLibrary=${params.iconLibrary}&font=${params.font}&menuAccent=${params.menuAccent}&menuColor=${params.menuColor}&radius=${params.radius}&item=${params.item}`
+  }, [
+    params.base,
+    params.style,
+    params.baseColor,
+    params.theme,
+    params.iconLibrary,
+    params.font,
+    params.menuAccent,
+    params.menuColor,
+    params.radius,
+    params.item,
+  ])
+
+  React.useEffect(() => {
+    if (hasCopied) {
+      const timer = setTimeout(() => setHasCopied(false), 2000)
+      return () => clearTimeout(timer)
+    }
+  }, [hasCopied])
+
+  const handleCopy = React.useCallback(() => {
+    copyToClipboardWithMeta(shareUrl, {
+      name: "copy_create_share_url",
+      properties: {
+        url: shareUrl,
+      },
+    })
+    setHasCopied(true)
+  }, [shareUrl])
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          size="sm"
+          variant="outline"
+          className="rounded-lg shadow-none lg:w-8 xl:w-fit"
+          onClick={handleCopy}
+        >
+          {hasCopied ? (
+            <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
+          ) : (
+            <HugeiconsIcon icon={Share03Icon} strokeWidth={2} />
+          )}
+          <span className="lg:hidden xl:block">Share</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>Copy Link</TooltipContent>
+    </Tooltip>
+  )
+}

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

@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+
+import { type Style, type StyleName } from "@/registry/config"
+import { LockButton } from "@/app/(create)/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerSeparator,
+  PickerTrigger,
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function StylePicker({
+  styles,
+  isMobile,
+  anchorRef,
+}: {
+  styles: readonly Style[]
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const currentStyle = styles.find((style) => style.name === params.style)
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-muted-foreground text-xs">Style</div>
+            <div className="text-foreground text-sm font-medium">
+              {currentStyle?.title}
+            </div>
+          </div>
+          {currentStyle?.icon && (
+            <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center select-none">
+              {React.cloneElement(currentStyle.icon, {
+                className: "size-4",
+              })}
+            </div>
+          )}
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+          className="md:w-64"
+        >
+          <PickerRadioGroup
+            value={currentStyle?.name}
+            onValueChange={(value) => {
+              setParams({ style: value as StyleName })
+            }}
+          >
+            <PickerGroup>
+              {styles.map((style, index) => (
+                <React.Fragment key={style.name}>
+                  <PickerRadioItem value={style.name}>
+                    <div className="flex items-start gap-2">
+                      {style.icon && (
+                        <div className="flex size-4 translate-y-0.5 items-center justify-center">
+                          {React.cloneElement(style.icon, {
+                            className: "size-4",
+                          })}
+                        </div>
+                      )}
+                      <div className="flex flex-col justify-start pointer-coarse:gap-1">
+                        <div>{style.title}</div>
+                        <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
+                          {style.description}
+                        </div>
+                      </div>
+                    </div>
+                  </PickerRadioItem>
+                  {index < styles.length - 1 && (
+                    <PickerSeparator className="opacity-50" />
+                  )}
+                </React.Fragment>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="style"
+        className="absolute top-1/2 right-10 -translate-y-1/2"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,94 @@
+"use client"
+
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerTrigger,
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+const TEMPLATES = [
+  {
+    value: "next",
+    title: "Next.js",
+    logo: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Next.js</title><path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z"/></svg>',
+  },
+  {
+    value: "start",
+    title: "TanStack Start",
+    logo: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>TanStack</title><path d="M11.078.042c.316-.042.65-.014.97-.014 1.181 0 2.341.184 3.472.532a12.3 12.3 0 0 1 3.973 2.086 11.9 11.9 0 0 1 3.432 4.33c1.446 3.15 1.436 6.97-.046 10.107-.958 2.029-2.495 3.727-4.356 4.965-1.518 1.01-3.293 1.629-5.1 1.848-2.298.279-4.784-.129-6.85-1.188-3.88-1.99-6.518-5.994-6.57-10.382-.01-.846.003-1.697.17-2.534.273-1.365.748-2.683 1.463-3.88a12 12 0 0 1 2.966-3.36A12.3 12.3 0 0 1 9.357.3a12 12 0 0 1 1.255-.2l.133-.016zM7.064 19.99c-.535.057-1.098.154-1.557.454.103.025.222 0 .33 0 .258 0 .52-.01.778.002.647.028 1.32.131 1.945.303.8.22 1.505.65 2.275.942.813.307 1.622.402 2.484.402.435 0 .866-.001 1.287-.12-.22-.117-.534-.095-.778-.144a11 11 0 0 1-1.556-.416 12 12 0 0 1-1.093-.467l-.23-.108a15 15 0 0 0-1.012-.44c-.905-.343-1.908-.512-2.873-.408m.808-2.274c-1.059 0-2.13.187-3.083.667q-.346.177-.659.41c-.063.046-.175.106-.199.188s.061.151.11.204c.238-.127.464-.261.718-.357 1.64-.624 3.63-.493 5.268.078.817.285 1.569.712 2.365 1.046.89.374 1.798.616 2.753.74 1.127.147 2.412.028 3.442-.48.362-.179.865-.451 1.018-.847-.189.017-.36.098-.539.154a9 9 0 0 1-.868.222c-.994.2-2.052.24-3.053.06-.943-.17-1.82-.513-2.693-.873l-.111-.046-.223-.092-.112-.046a26 26 0 0 0-1.35-.527c-.89-.31-1.842-.5-2.784-.5M9.728 1.452c-1.27.28-2.407.826-3.502 1.514-.637.4-1.245.81-1.796 1.323-.82.765-1.447 1.695-1.993 2.666-.563 1-.924 2.166-1.098 3.297-.172 1.11-.2 2.277-.004 3.388.245 1.388.712 2.691 1.448 3.897.248-.116.424-.38.629-.557.414-.359.85-.691 1.317-.978a3.5 3.5 0 0 1 .539-.264c.07-.029.187-.055.22-.132.053-.124-.045-.34-.062-.468a7 7 0 0 1-.068-1.109 9.7 9.7 0 0 1 .61-3.177c.29-.76.73-1.45 1.254-2.069.177-.21.365-.405.56-.6.115-.114.258-.212.33-.359-.376 0-.751.108-1.108.218-.769.237-1.518.588-2.155 1.084-.291.226-.504.522-.779.76-.084.073-.235.17-.352.116-.176-.083-.149-.43-.169-.59-.078-.612.154-1.387.45-1.918.473-.852 1.348-1.58 2.376-1.555.444.011.833.166 1.257.266-.107-.153-.252-.264-.389-.39a5.4 5.4 0 0 0-1.107-.8c-.163-.085-.338-.136-.509-.2-.086-.03-.195-.074-.227-.17-.06-.177.26-.342.377-.417.453-.289 1.01-.527 1.556-.54.854-.021 1.688.452 2.04 1.258.123.284.16.583.184.885l.004.057.006.085.002.029.005.057.004.056c.268-.218.457-.54.718-.774.612-.547 1.45-.79 2.245-.544a2.97 2.97 0 0 1 1.71 1.378c.097.173.365.595.171.767-.152.134-.344.03-.504-.026a3 3 0 0 0-.372-.094l-.068-.014-.069-.013a3.9 3.9 0 0 0-1.377-.002c-.282.05-.557.15-.838.192v.06c.768.006 1.51.444 1.89 1.109.157.275.235.59.295.9.075.38.022.796-.082 1.168-.035.125-.098.336-.247.365-.106.02-.195-.085-.256-.155a4.6 4.6 0 0 0-.492-.522 20 20 0 0 0-1.467-1.14c-.267-.19-.56-.44-.868-.556.087.208.171.402.2.63.088.667-.192 1.296-.612 1.798a2.6 2.6 0 0 1-.426.427c-.067.05-.151.114-.24.1-.277-.044-.31-.463-.353-.677-.144-.726-.086-1.447.114-2.158-.178.09-.307.287-.418.45a5.3 5.3 0 0 0-.612 1.138c-.61 1.617-.604 3.51.186 5.066.088.174.221.15.395.15h.157a3 3 0 0 1 .472.018c.08.01.193 0 .257.06.077.072.036.194.018.282-.05.246-.066.469-.066.72.328-.051.419-.576.535-.84.131-.298.265-.597.387-.9.06-.148.14-.314.119-.479-.024-.185-.157-.381-.25-.54-.177-.298-.378-.606-.508-.929-.104-.258-.007-.58.286-.672.161-.05.334.049.439.166.22.244.363.609.523.896l1.249 2.248q.159.286.32.57c.043.074.086.188.173.219.077.028.182-.012.26-.027.198-.04.398-.083.598-.12.24-.043.605-.035.778-.222-.253-.08-.545-.075-.808-.057-.158.01-.333.067-.479-.025-.216-.137-.36-.455-.492-.667-.326-.525-.633-1.057-.945-1.59l-.05-.084-.1-.17q-.075-.126-.149-.255c-.037-.066-.092-.153-.039-.227.056-.076.179-.08.29-.081h.021q.066.001.117-.004a10 10 0 0 1 1.347-.107c-.035-.122-.135-.26-.103-.39.071-.292.49-.383.686-.174.131.14.207.334.292.504.113.223.24.44.361.66.211.383.441.757.658 1.138l.055.094.028.047c.093.156.187.314.238.489-.753-.035-1.318-.909-1.646-1.499-.027.095.016.179.05.27q.103.282.262.54c.152.244.326.495.556.673.408.315.945.317 1.436.283.315-.022.708-.165 1.018-.068s.434.438.25.7c-.138.196-.321.27-.55.3.162.346.373.667.527 1.02.064.146.13.37.283.448.102.051.248.003.358 0-.11-.292-.317-.54-.419-.839.31.015.61.176.898.28.567.202 1.128.424 1.687.648l.258.104c.23.092.462.183.689.283.083.037.198.123.29.07.074-.043.123-.146.169-.215a10.3 10.3 0 0 0 1.393-3.208c.75-2.989.106-6.287-1.695-8.783-.692-.96-1.562-1.789-2.522-2.476-2.401-1.718-5.551-2.407-8.44-1.768m4.908 14.904c-.636.166-1.292.317-1.945.401.086.293.296.577.45.84.059.101.122.237.24.281.132.05.292-.03.417-.072-.058-.158-.155-.3-.235-.45-.033-.06-.084-.133-.056-.206.05-.137.263-.13.381-.153.31-.063.617-.142.928-.204.114-.023.274-.085.389-.047.086.03.138.1.187.174l.022.033q.043.07.097.122c.125.113.313.13.472.162-.097-.219-.259-.41-.362-.63-.06-.127-.11-.315-.242-.388-.182-.102-.557.089-.743.137m-4.01-1.457c-.03.38-.147.689-.33 1.019.21.026.423.036.629.087.154.038.296.11.449.153-.082-.224-.233-.423-.35-.63-.12-.208-.226-.462-.398-.63"/></svg>',
+  },
+  {
+    value: "vite",
+    title: "Vite",
+    logo: '<svg xmlns="http://www.w3.org/2000/svg" width="410" height="404" fill="none" viewBox="0 0 410 404"><path fill="var(--foreground)" d="m399.641 59.525-183.998 329.02c-3.799 6.793-13.559 6.833-17.415.073L10.582 59.556C6.38 52.19 12.68 43.266 21.028 44.76l184.195 32.923c1.175.21 2.378.208 3.553-.006l180.343-32.87c8.32-1.517 14.649 7.337 10.522 14.719"/><path fill="var(--background)" d="M292.965 1.574 156.801 28.255a5 5 0 0 0-4.03 4.611l-8.376 141.464c-.197 3.332 2.863 5.918 6.115 5.168l37.91-8.749c3.547-.818 6.752 2.306 6.023 5.873l-11.263 55.153c-.758 3.712 2.727 6.886 6.352 5.785l23.415-7.114c3.63-1.102 7.118 2.081 6.35 5.796l-17.899 86.633c-1.12 5.419 6.088 8.374 9.094 3.728l2.008-3.103 110.954-221.428c1.858-3.707-1.346-7.935-5.418-7.15l-39.022 7.532c-3.667.707-6.787-2.708-5.752-6.296l25.469-88.291c1.036-3.594-2.095-7.012-5.766-6.293"/></svg>',
+  },
+] as const
+
+export function TemplatePicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const currentTemplate = TEMPLATES.find(
+    (template) => template.value === params.template
+  )
+
+  return (
+    <Picker>
+      <PickerTrigger className="hidden md:flex">
+        <div className="flex flex-col justify-start text-left">
+          <div className="text-muted-foreground text-xs">Template</div>
+          <div className="text-foreground text-sm font-medium">
+            {currentTemplate?.title}
+          </div>
+        </div>
+        {currentTemplate?.logo && (
+          <div
+            className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 select-none *:[svg]:size-4"
+            dangerouslySetInnerHTML={{
+              __html: currentTemplate.logo,
+            }}
+          />
+        )}
+      </PickerTrigger>
+      <PickerContent
+        anchor={isMobile ? anchorRef : undefined}
+        side={isMobile ? "top" : "right"}
+        align={isMobile ? "center" : "start"}
+      >
+        <PickerRadioGroup
+          value={params.template}
+          onValueChange={(value) => {
+            setParams({
+              template: value as "next" | "start" | "vite",
+            })
+          }}
+        >
+          <PickerGroup>
+            {TEMPLATES.map((template) => (
+              <PickerRadioItem key={template.value} value={template.value}>
+                {template.logo && (
+                  <div
+                    className="text-foreground *:[svg]:text-foreground! size-4 shrink-0 [&_svg]:size-4"
+                    dangerouslySetInnerHTML={{
+                      __html: template.logo,
+                    }}
+                  />
+                )}
+                {template.title}
+              </PickerRadioItem>
+            ))}
+          </PickerGroup>
+        </PickerRadioGroup>
+      </PickerContent>
+    </Picker>
+  )
+}

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

@@ -0,0 +1,166 @@
+"use client"
+
+import * as React from "react"
+import { useTheme } from "next-themes"
+
+import { useMounted } from "@/hooks/use-mounted"
+import { BASE_COLORS, type Theme, type ThemeName } from "@/registry/config"
+import { LockButton } from "@/app/(create)/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerSeparator,
+  PickerTrigger,
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function ThemePicker({
+  themes,
+  isMobile,
+  anchorRef,
+}: {
+  themes: readonly Theme[]
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const { resolvedTheme } = useTheme()
+  const mounted = useMounted()
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const currentTheme = React.useMemo(
+    () => themes.find((theme) => theme.name === params.theme),
+    [themes, params.theme]
+  )
+
+  const currentThemeIsBaseColor = React.useMemo(
+    () => BASE_COLORS.find((baseColor) => baseColor.name === params.theme),
+    [params.theme]
+  )
+
+  React.useEffect(() => {
+    if (!currentTheme && themes.length > 0) {
+      setParams({ theme: themes[0].name })
+    }
+  }, [currentTheme, themes, setParams])
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-muted-foreground text-xs">Theme</div>
+            <div className="text-foreground text-sm font-medium">
+              {currentTheme?.title}
+            </div>
+          </div>
+          {mounted && resolvedTheme && (
+            <div
+              style={
+                {
+                  "--color":
+                    currentTheme?.cssVars?.[
+                      resolvedTheme as "light" | "dark"
+                    ]?.[
+                      currentThemeIsBaseColor ? "muted-foreground" : "primary"
+                    ],
+                } as React.CSSProperties
+              }
+              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none"
+            />
+          )}
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+          className="max-h-96"
+        >
+          <PickerRadioGroup
+            value={currentTheme?.name}
+            onValueChange={(value) => {
+              setParams({ theme: value as ThemeName })
+            }}
+          >
+            <PickerGroup>
+              {themes
+                .filter((theme) =>
+                  BASE_COLORS.find((baseColor) => baseColor.name === theme.name)
+                )
+                .map((theme) => {
+                  const isBaseColor = BASE_COLORS.find(
+                    (baseColor) => baseColor.name === theme.name
+                  )
+                  return (
+                    <PickerRadioItem key={theme.name} value={theme.name}>
+                      <div className="flex items-start gap-2">
+                        {mounted && resolvedTheme && (
+                          <div
+                            style={
+                              {
+                                "--color":
+                                  theme.cssVars?.[
+                                    resolvedTheme as "light" | "dark"
+                                  ]?.[
+                                    isBaseColor ? "muted-foreground" : "primary"
+                                  ],
+                              } as React.CSSProperties
+                            }
+                            className="size-4 translate-y-1 rounded-full bg-(--color)"
+                          />
+                        )}
+                        <div className="flex flex-col justify-start pointer-coarse:gap-1">
+                          <div>{theme.title}</div>
+                          <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
+                            Match base color
+                          </div>
+                        </div>
+                      </div>
+                    </PickerRadioItem>
+                  )
+                })}
+            </PickerGroup>
+            <PickerSeparator />
+            <PickerGroup>
+              {themes
+                .filter(
+                  (theme) =>
+                    !BASE_COLORS.find(
+                      (baseColor) => baseColor.name === theme.name
+                    )
+                )
+                .map((theme) => {
+                  return (
+                    <PickerRadioItem key={theme.name} value={theme.name}>
+                      <div className="flex items-center gap-2">
+                        {mounted && resolvedTheme && (
+                          <div
+                            style={
+                              {
+                                "--color":
+                                  theme.cssVars?.[
+                                    resolvedTheme as "light" | "dark"
+                                  ]?.["primary"],
+                              } as React.CSSProperties
+                            }
+                            className="size-4 rounded-full bg-(--color)"
+                          />
+                        )}
+                        {theme.title}
+                      </div>
+                    </PickerRadioItem>
+                  )
+                })}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="theme"
+        className="absolute top-1/2 right-10 -translate-y-1/2"
+      />
+    </div>
+  )
+}

apps/v4/app/(create)/components/toolbar-controls.tsx

@@ -0,0 +1,273 @@
+"use client"
+
+import * as React from "react"
+import {
+  ComputerTerminal01Icon,
+  Copy01Icon,
+  Tick02Icon,
+} from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { toast } from "sonner"
+
+import { useConfig } from "@/hooks/use-config"
+import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york-v4/ui/dialog"
+import {
+  Field,
+  FieldGroup,
+  FieldLabel,
+  FieldTitle,
+} from "@/registry/new-york-v4/ui/field"
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from "@/registry/new-york-v4/ui/radio-group"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york-v4/ui/tabs"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/new-york-v4/ui/tooltip"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+const TEMPLATES = [
+  {
+    value: "next",
+    title: "Next.js",
+    logo: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Next.js</title><path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z" fill="currentColor"/></svg>',
+  },
+  {
+    value: "start",
+    title: "TanStack Start",
+    logo: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>TanStack</title><path d="M11.078.042c.316-.042.65-.014.97-.014 1.181 0 2.341.184 3.472.532a12.3 12.3 0 0 1 3.973 2.086 11.9 11.9 0 0 1 3.432 4.33c1.446 3.15 1.436 6.97-.046 10.107-.958 2.029-2.495 3.727-4.356 4.965-1.518 1.01-3.293 1.629-5.1 1.848-2.298.279-4.784-.129-6.85-1.188-3.88-1.99-6.518-5.994-6.57-10.382-.01-.846.003-1.697.17-2.534.273-1.365.748-2.683 1.463-3.88a12 12 0 0 1 2.966-3.36A12.3 12.3 0 0 1 9.357.3a12 12 0 0 1 1.255-.2l.133-.016zM7.064 19.99c-.535.057-1.098.154-1.557.454.103.025.222 0 .33 0 .258 0 .52-.01.778.002.647.028 1.32.131 1.945.303.8.22 1.505.65 2.275.942.813.307 1.622.402 2.484.402.435 0 .866-.001 1.287-.12-.22-.117-.534-.095-.778-.144a11 11 0 0 1-1.556-.416 12 12 0 0 1-1.093-.467l-.23-.108a15 15 0 0 0-1.012-.44c-.905-.343-1.908-.512-2.873-.408m.808-2.274c-1.059 0-2.13.187-3.083.667q-.346.177-.659.41c-.063.046-.175.106-.199.188s.061.151.11.204c.238-.127.464-.261.718-.357 1.64-.624 3.63-.493 5.268.078.817.285 1.569.712 2.365 1.046.89.374 1.798.616 2.753.74 1.127.147 2.412.028 3.442-.48.362-.179.865-.451 1.018-.847-.189.017-.36.098-.539.154a9 9 0 0 1-.868.222c-.994.2-2.052.24-3.053.06-.943-.17-1.82-.513-2.693-.873l-.111-.046-.223-.092-.112-.046a26 26 0 0 0-1.35-.527c-.89-.31-1.842-.5-2.784-.5M9.728 1.452c-1.27.28-2.407.826-3.502 1.514-.637.4-1.245.81-1.796 1.323-.82.765-1.447 1.695-1.993 2.666-.563 1-.924 2.166-1.098 3.297-.172 1.11-.2 2.277-.004 3.388.245 1.388.712 2.691 1.448 3.897.248-.116.424-.38.629-.557.414-.359.85-.691 1.317-.978a3.5 3.5 0 0 1 .539-.264c.07-.029.187-.055.22-.132.053-.124-.045-.34-.062-.468a7 7 0 0 1-.068-1.109 9.7 9.7 0 0 1 .61-3.177c.29-.76.73-1.45 1.254-2.069.177-.21.365-.405.56-.6.115-.114.258-.212.33-.359-.376 0-.751.108-1.108.218-.769.237-1.518.588-2.155 1.084-.291.226-.504.522-.779.76-.084.073-.235.17-.352.116-.176-.083-.149-.43-.169-.59-.078-.612.154-1.387.45-1.918.473-.852 1.348-1.58 2.376-1.555.444.011.833.166 1.257.266-.107-.153-.252-.264-.389-.39a5.4 5.4 0 0 0-1.107-.8c-.163-.085-.338-.136-.509-.2-.086-.03-.195-.074-.227-.17-.06-.177.26-.342.377-.417.453-.289 1.01-.527 1.556-.54.854-.021 1.688.452 2.04 1.258.123.284.16.583.184.885l.004.057.006.085.002.029.005.057.004.056c.268-.218.457-.54.718-.774.612-.547 1.45-.79 2.245-.544a2.97 2.97 0 0 1 1.71 1.378c.097.173.365.595.171.767-.152.134-.344.03-.504-.026a3 3 0 0 0-.372-.094l-.068-.014-.069-.013a3.9 3.9 0 0 0-1.377-.002c-.282.05-.557.15-.838.192v.06c.768.006 1.51.444 1.89 1.109.157.275.235.59.295.9.075.38.022.796-.082 1.168-.035.125-.098.336-.247.365-.106.02-.195-.085-.256-.155a4.6 4.6 0 0 0-.492-.522 20 20 0 0 0-1.467-1.14c-.267-.19-.56-.44-.868-.556.087.208.171.402.2.63.088.667-.192 1.296-.612 1.798a2.6 2.6 0 0 1-.426.427c-.067.05-.151.114-.24.1-.277-.044-.31-.463-.353-.677-.144-.726-.086-1.447.114-2.158-.178.09-.307.287-.418.45a5.3 5.3 0 0 0-.612 1.138c-.61 1.617-.604 3.51.186 5.066.088.174.221.15.395.15h.157a3 3 0 0 1 .472.018c.08.01.193 0 .257.06.077.072.036.194.018.282-.05.246-.066.469-.066.72.328-.051.419-.576.535-.84.131-.298.265-.597.387-.9.06-.148.14-.314.119-.479-.024-.185-.157-.381-.25-.54-.177-.298-.378-.606-.508-.929-.104-.258-.007-.58.286-.672.161-.05.334.049.439.166.22.244.363.609.523.896l1.249 2.248q.159.286.32.57c.043.074.086.188.173.219.077.028.182-.012.26-.027.198-.04.398-.083.598-.12.24-.043.605-.035.778-.222-.253-.08-.545-.075-.808-.057-.158.01-.333.067-.479-.025-.216-.137-.36-.455-.492-.667-.326-.525-.633-1.057-.945-1.59l-.05-.084-.1-.17q-.075-.126-.149-.255c-.037-.066-.092-.153-.039-.227.056-.076.179-.08.29-.081h.021q.066.001.117-.004a10 10 0 0 1 1.347-.107c-.035-.122-.135-.26-.103-.39.071-.292.49-.383.686-.174.131.14.207.334.292.504.113.223.24.44.361.66.211.383.441.757.658 1.138l.055.094.028.047c.093.156.187.314.238.489-.753-.035-1.318-.909-1.646-1.499-.027.095.016.179.05.27q.103.282.262.54c.152.244.326.495.556.673.408.315.945.317 1.436.283.315-.022.708-.165 1.018-.068s.434.438.25.7c-.138.196-.321.27-.55.3.162.346.373.667.527 1.02.064.146.13.37.283.448.102.051.248.003.358 0-.11-.292-.317-.54-.419-.839.31.015.61.176.898.28.567.202 1.128.424 1.687.648l.258.104c.23.092.462.183.689.283.083.037.198.123.29.07.074-.043.123-.146.169-.215a10.3 10.3 0 0 0 1.393-3.208c.75-2.989.106-6.287-1.695-8.783-.692-.96-1.562-1.789-2.522-2.476-2.401-1.718-5.551-2.407-8.44-1.768m4.908 14.904c-.636.166-1.292.317-1.945.401.086.293.296.577.45.84.059.101.122.237.24.281.132.05.292-.03.417-.072-.058-.158-.155-.3-.235-.45-.033-.06-.084-.133-.056-.206.05-.137.263-.13.381-.153.31-.063.617-.142.928-.204.114-.023.274-.085.389-.047.086.03.138.1.187.174l.022.033q.043.07.097.122c.125.113.313.13.472.162-.097-.219-.259-.41-.362-.63-.06-.127-.11-.315-.242-.388-.182-.102-.557.089-.743.137m-4.01-1.457c-.03.38-.147.689-.33 1.019.21.026.423.036.629.087.154.038.296.11.449.153-.082-.224-.233-.423-.35-.63-.12-.208-.226-.462-.398-.63" fill="currentColor"/></svg>',
+  },
+  {
+    value: "vite",
+    title: "Vite",
+    logo: '<svg xmlns="http://www.w3.org/2000/svg" width="410" height="404" fill="none" viewBox="0 0 410 404"><path fill="var(--foreground)" d="m399.641 59.525-183.998 329.02c-3.799 6.793-13.559 6.833-17.415.073L10.582 59.556C6.38 52.19 12.68 43.266 21.028 44.76l184.195 32.923c1.175.21 2.378.208 3.553-.006l180.343-32.87c8.32-1.517 14.649 7.337 10.522 14.719"/><path fill="var(--background)" d="M292.965 1.574 156.801 28.255a5 5 0 0 0-4.03 4.611l-8.376 141.464c-.197 3.332 2.863 5.918 6.115 5.168l37.91-8.749c3.547-.818 6.752 2.306 6.023 5.873l-11.263 55.153c-.758 3.712 2.727 6.886 6.352 5.785l23.415-7.114c3.63-1.102 7.118 2.081 6.35 5.796l-17.899 86.633c-1.12 5.419 6.088 8.374 9.094 3.728l2.008-3.103 110.954-221.428c1.858-3.707-1.346-7.935-5.418-7.15l-39.022 7.532c-3.667.707-6.787-2.708-5.752-6.296l25.469-88.291c1.036-3.594-2.095-7.012-5.766-6.293"/></svg>',
+  },
+] as const
+
+export function ToolbarControls() {
+  const [open, setOpen] = React.useState(false)
+  const [params, setParams] = useDesignSystemSearchParams()
+  const [config, setConfig] = useConfig()
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  const packageManager = config.packageManager || "pnpm"
+
+  const commands = React.useMemo(() => {
+    const origin = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000"
+    const url = `${origin}/init?base=${params.base}&style=${params.style}&baseColor=${params.baseColor}&theme=${params.theme}&iconLibrary=${params.iconLibrary}&font=${params.font}&menuAccent=${params.menuAccent}&menuColor=${params.menuColor}&radius=${params.radius}&template=${params.template}`
+    const templateFlag = params.template ? ` --template ${params.template}` : ""
+    return {
+      pnpm: `pnpm dlx shadcn@latest create --preset "${url}"${templateFlag}`,
+      npm: `npx shadcn@latest create --preset "${url}"${templateFlag}`,
+      yarn: `yarn dlx shadcn@latest create --preset "${url}"${templateFlag}`,
+      bun: `bunx --bun shadcn@latest create --preset "${url}"${templateFlag}`,
+    }
+  }, [
+    params.base,
+    params.style,
+    params.baseColor,
+    params.theme,
+    params.iconLibrary,
+    params.font,
+    params.menuAccent,
+    params.menuColor,
+    params.radius,
+    params.template,
+  ])
+
+  const command = commands[packageManager]
+
+  React.useEffect(() => {
+    if (hasCopied) {
+      const timer = setTimeout(() => setHasCopied(false), 2000)
+      return () => clearTimeout(timer)
+    }
+  }, [hasCopied])
+
+  const handleCopy = React.useCallback(() => {
+    const properties: Record<string, string> = {
+      command,
+    }
+    if (params.template) {
+      properties.template = params.template
+    }
+    copyToClipboardWithMeta(command, {
+      name: "copy_npm_command",
+      properties,
+    })
+    setOpen(false)
+    setHasCopied(true)
+    toast("Command copied to clipboard.", {
+      description:
+        "Paste and run the command in your terminal to create a new shadcn/ui project.",
+      position: "bottom-center",
+      classNames: {
+        content: "rounded-xl",
+        toast: "rounded-xl!",
+        description: "text-sm/leading-normal!",
+      },
+    })
+  }, [command, params.template, setOpen])
+
+  const handleCopyFromTabs = React.useCallback(() => {
+    const properties: Record<string, string> = {
+      command,
+    }
+    if (params.template) {
+      properties.template = params.template
+    }
+    copyToClipboardWithMeta(command, {
+      name: "copy_npm_command",
+      properties,
+    })
+    setHasCopied(true)
+  }, [command, params.template])
+
+  const selectedTemplate = TEMPLATES.find(
+    (template) => template.value === params.template
+  )
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm" className="hidden h-[31px] rounded-lg pl-2 md:flex">
+          <HugeiconsIcon
+            icon={ComputerTerminal01Icon}
+            className="hidden xl:flex"
+          />
+          Create Project
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="dialog-ring min-w-0 overflow-hidden rounded-xl sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Create Project</DialogTitle>
+          <DialogDescription className="text-balance">
+            Select a template and run this command to create a{" "}
+            {selectedTemplate?.title} + shadcn/ui project.
+          </DialogDescription>
+        </DialogHeader>
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor="template" className="sr-only">
+              Template
+            </FieldLabel>
+            <RadioGroup
+              id="template"
+              value={params.template}
+              onValueChange={(value) => {
+                setParams({
+                  template: value as "next" | "start" | "vite",
+                })
+              }}
+              className="grid grid-cols-3 gap-2"
+            >
+              {TEMPLATES.map((template) => (
+                <FieldLabel
+                  key={template.value}
+                  htmlFor={template.value}
+                  className="rounded-lg!"
+                >
+                  <Field className="flex min-w-0 flex-col items-center justify-center gap-2 p-3! text-center *:w-auto!">
+                    <RadioGroupItem
+                      value={template.value}
+                      id={template.value}
+                      className="sr-only"
+                    />
+                    {template.logo && (
+                      <div
+                        className="text-foreground *:[svg]:text-foreground! size-6 [&_svg]:size-6"
+                        dangerouslySetInnerHTML={{
+                          __html: template.logo,
+                        }}
+                      />
+                    )}
+                    <FieldTitle>{template.title}</FieldTitle>
+                  </Field>
+                </FieldLabel>
+              ))}
+            </RadioGroup>
+          </Field>
+        </FieldGroup>
+        <Tabs
+          value={packageManager}
+          onValueChange={(value) => {
+            setConfig({
+              ...config,
+              packageManager: value as "pnpm" | "npm" | "yarn" | "bun",
+            })
+          }}
+          className="bg-surface min-w-0 gap-0 overflow-hidden rounded-lg border"
+        >
+          <div className="flex items-center gap-2 p-2">
+            <TabsList className="*:data-[slot=tabs-trigger]:data-[state=active]:border-input h-auto rounded-none bg-transparent p-0 font-mono *:data-[slot=tabs-trigger]:border *:data-[slot=tabs-trigger]:border-transparent *:data-[slot=tabs-trigger]:pt-0.5 *:data-[slot=tabs-trigger]:shadow-none!">
+              <TabsTrigger value="pnpm">pnpm</TabsTrigger>
+              <TabsTrigger value="npm">npm</TabsTrigger>
+              <TabsTrigger value="yarn">yarn</TabsTrigger>
+              <TabsTrigger value="bun">bun</TabsTrigger>
+            </TabsList>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size="icon-sm"
+                  variant="ghost"
+                  className="ml-auto size-7 rounded-lg"
+                  onClick={handleCopyFromTabs}
+                >
+                  {hasCopied ? (
+                    <HugeiconsIcon icon={Tick02Icon} className="size-4" />
+                  ) : (
+                    <HugeiconsIcon icon={Copy01Icon} className="size-4" />
+                  )}
+                  <span className="sr-only">Copy command</span>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {hasCopied ? "Copied!" : "Copy command"}
+              </TooltipContent>
+            </Tooltip>
+          </div>
+          {Object.entries(commands).map(([key, cmd]) => {
+            return (
+              <TabsContent key={key} value={key}>
+                <div className="bg-surface border-border/50 text-surface-foreground relative overflow-hidden border-t px-3 py-3">
+                  <div className="no-scrollbar overflow-x-auto">
+                    <code className="font-mono text-sm whitespace-nowrap">
+                      {cmd}
+                    </code>
+                  </div>
+                </div>
+              </TabsContent>
+            )
+          })}
+        </Tabs>
+        <DialogFooter className="bg-muted/50 -mx-6 mt-2 -mb-6 flex flex-col gap-2 border-t p-6 sm:flex-col">
+          <Button
+            size="sm"
+            onClick={handleCopy}
+            className="h-9 w-full rounded-lg"
+          >
+            Copy Command
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,55 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { useMounted } from "@/hooks/use-mounted"
+import { Icons } from "@/components/icons"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Skeleton } from "@/registry/new-york-v4/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/new-york-v4/ui/tooltip"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function V0Button({ className }: { className?: string }) {
+  const [params] = useDesignSystemSearchParams()
+  const isMobile = useIsMobile()
+  const isMounted = useMounted()
+
+  const url = `${process.env.NEXT_PUBLIC_APP_URL}/create/v0?base=${params.base}&style=${params.style}&baseColor=${params.baseColor}&theme=${params.theme}&iconLibrary=${params.iconLibrary}&font=${params.font}&menuAccent=${params.menuAccent}&menuColor=${params.menuColor}&radius=${params.radius}&item=${params.item}`
+
+  if (!isMounted) {
+    return <Skeleton className="h-8 w-24 rounded-lg" />
+  }
+
+  return (
+    <>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            size="sm"
+            variant={isMobile ? "default" : "outline"}
+            className={cn(
+              "w-24 rounded-lg shadow-none data-[variant=default]:h-[31px] lg:w-8 xl:w-24",
+              className
+            )}
+            asChild
+          >
+            <a
+              href={`${process.env.NEXT_PUBLIC_V0_URL}/chat/api/open?url=${encodeURIComponent(url)}&title=${params.item}`}
+              target="_blank"
+            >
+              <span className="lg:hidden xl:block">Open in</span>
+              <Icons.v0 className="size-5" />
+            </a>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Open current design in v0</p>
+        </TooltipContent>
+      </Tooltip>
+    </>
+  )
+}

apps/v4/app/(create)/components/welcome-dialog.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import * as React from "react"
+
+import { Icons } from "@/components/icons"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/registry/new-york-v4/ui/dialog"
+
+const STORAGE_KEY = "shadcn-create-welcome-dialog"
+
+export function WelcomeDialog() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    const dismissed = localStorage.getItem(STORAGE_KEY)
+    if (!dismissed) {
+      setIsOpen(true)
+    }
+  }, [])
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open)
+    if (!open) {
+      localStorage.setItem(STORAGE_KEY, "true")
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        className="dialog-ring max-w-[23rem] min-w-0 gap-0 overflow-hidden rounded-xl p-0 sm:max-w-sm dark:bg-neutral-900"
+      >
+        <div className="flex aspect-[2/1.2] w-full items-center justify-center rounded-t-xl bg-neutral-950 text-center text-neutral-100 sm:aspect-[2/1]">
+          <div className="font-mono text-2xl font-bold">
+            <Icons.logo className="size-12" />
+          </div>
+        </div>
+        <DialogHeader className="gap-1 p-4">
+          <DialogTitle className="text-left text-base">
+            Build your own shadcn/ui
+          </DialogTitle>
+          <DialogDescription className="text-foreground text-left leading-relaxed">
+            Customize everything from the ground up. Pick your component
+            library, font, color scheme, and more.
+          </DialogDescription>
+          <DialogDescription className="text-foreground mt-2 text-left leading-relaxed font-medium">
+            Available for Next.js, Vite, TanStack Start, and v0.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="p-4 pt-0">
+          <DialogClose asChild>
+            <Button className="w-full rounded-lg shadow-none">
+              Get Started
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

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

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

@@ -0,0 +1,147 @@
+import { type Metadata } from "next"
+import Link from "next/link"
+import { ArrowLeftIcon } from "lucide-react"
+import type { SearchParams } from "nuqs/server"
+
+import { siteConfig } from "@/lib/config"
+import { source } from "@/lib/source"
+import { absoluteUrl } from "@/lib/utils"
+import { Icons } from "@/components/icons"
+import { MainNav } from "@/components/main-nav"
+import { MobileNav } from "@/components/mobile-nav"
+import { ModeSwitcher } from "@/components/mode-switcher"
+import { SiteConfig } from "@/components/site-config"
+import { BASES } from "@/registry/config"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
+import { SidebarProvider } from "@/registry/new-york-v4/ui/sidebar"
+import { Customizer } from "@/app/(create)/components/customizer"
+import { ItemExplorer } from "@/app/(create)/components/item-explorer"
+import { ItemPicker } from "@/app/(create)/components/item-picker"
+import { Preview } from "@/app/(create)/components/preview"
+import { RandomButton } from "@/app/(create)/components/random-button"
+import { ResetButton } from "@/app/(create)/components/reset-button"
+import { ShareButton } from "@/app/(create)/components/share-button"
+import { ToolbarControls } from "@/app/(create)/components/toolbar-controls"
+import { V0Button } from "@/app/(create)/components/v0-button"
+import { WelcomeDialog } from "@/app/(create)/components/welcome-dialog"
+import { getItemsForBase } from "@/app/(create)/lib/api"
+import { loadDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export const revalidate = false
+export const dynamic = "force-static"
+
+export const metadata: Metadata = {
+  title: "New Project",
+  description:
+    "Customize everything. Pick your component library, icons, base color, theme, fonts and create your own version of shadcn/ui.",
+  openGraph: {
+    title: "New Project",
+    description:
+      "Customize everything. Pick your component library, icons, base color, theme, fonts and create your own version of shadcn/ui.",
+    type: "website",
+    url: absoluteUrl("/create"),
+    images: [
+      {
+        url: siteConfig.ogImage,
+        width: 1200,
+        height: 630,
+        alt: siteConfig.name,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "New Project",
+    description:
+      "Customize everything. Pick your component library, icons, base color, theme, fonts and create your own version of shadcn/ui.",
+    images: [siteConfig.ogImage],
+    creator: "@shadcn",
+  },
+}
+
+export default async function CreatePage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParams>
+}) {
+  const params = await loadDesignSystemSearchParams(searchParams)
+  const base = BASES.find((b) => b.name === params.base) ?? BASES[0]
+
+  const pageTree = source.pageTree
+  const items = await getItemsForBase(base.name)
+
+  const filteredItems = items
+    .filter((item) => item !== null)
+    .map((item) => ({
+      name: item.name,
+      title: item.title,
+      type: item.type,
+    }))
+
+  return (
+    <div
+      data-slot="layout"
+      className="section-soft relative z-10 flex min-h-svh flex-col"
+    >
+      <header className="sticky top-0 z-50 w-full">
+        <div className="container-wrapper 3xl:fixed:px-0 px-6">
+          <div className="3xl:fixed:container flex h-(--header-height) items-center **:data-[slot=separator]:!h-4">
+            <div className="3xl:fixed:container flex h-(--header-height) items-center **:data-[slot=separator]:!h-4">
+              <MobileNav
+                tree={pageTree}
+                items={siteConfig.navItems}
+                className="flex lg:hidden"
+              />
+              <Button
+                asChild
+                variant="ghost"
+                size="icon"
+                className="hidden size-8 lg:flex"
+              >
+                <Link href="/">
+                  <Icons.logo className="size-5" />
+                  <span className="sr-only">{siteConfig.name}</span>
+                </Link>
+              </Button>
+              <MainNav items={siteConfig.navItems} className="hidden lg:flex" />
+            </div>
+            <div className="fixed inset-x-0 bottom-0 ml-auto flex flex-1 items-center justify-end gap-2 px-4.5 pb-4 sm:static sm:p-0 lg:ml-0">
+              <ItemPicker items={filteredItems} />
+              <div className="items-center gap-0 sm:hidden">
+                <RandomButton />
+                <ResetButton />
+              </div>
+              <Separator orientation="vertical" className="mr-2 flex" />
+            </div>
+            <div className="ml-auto flex items-center gap-2 sm:ml-0 md:justify-end">
+              <SiteConfig className="3xl:flex hidden" />
+              <Separator orientation="vertical" className="3xl:flex hidden" />
+              <ModeSwitcher />
+              <Separator
+                orientation="vertical"
+                className="mr-0 -ml-2 sm:ml-0"
+              />
+              <ShareButton />
+              <V0Button />
+              <ToolbarControls />
+            </div>
+          </div>
+        </div>
+      </header>
+      <main className="flex flex-1 flex-col pb-16 sm:pb-0">
+        <SidebarProvider className="flex h-auto min-h-min flex-1 flex-col items-start overflow-hidden px-0">
+          <div
+            data-slot="designer"
+            className="3xl:fixed:container flex w-full flex-1 flex-col gap-2 p-6 pt-1 pb-4 [--sidebar-width:--spacing(40)] sm:gap-2 sm:pt-2 md:flex-row md:pb-6 2xl:gap-6"
+          >
+            <ItemExplorer base={base.name} items={filteredItems} />
+            <Preview />
+            <Customizer />
+          </div>
+        </SidebarProvider>
+        <WelcomeDialog />
+      </main>
+    </div>
+  )
+}

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

@@ -0,0 +1,374 @@
+import { NextResponse, type NextRequest } from "next/server"
+import { track } from "@vercel/analytics/server"
+import dedent from "dedent"
+import {
+  registryItemFileSchema,
+  registryItemSchema,
+  type configSchema,
+  type RegistryItem,
+} from "shadcn/schema"
+import { transformIcons, transformMenu, transformRender } from "shadcn/utils"
+import { Project, ScriptKind } from "ts-morph"
+import { z } from "zod"
+
+import {
+  buildRegistryBase,
+  designSystemConfigSchema,
+  fonts,
+  type DesignSystemConfig,
+} from "@/registry/config"
+
+const { Index } = await import("@/registry/bases/__index__")
+
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams
+
+    const parseResult = designSystemConfigSchema.safeParse({
+      base: searchParams.get("base"),
+      style: searchParams.get("style"),
+      iconLibrary: searchParams.get("iconLibrary"),
+      baseColor: searchParams.get("baseColor"),
+      theme: searchParams.get("theme"),
+      font: searchParams.get("font"),
+      item: searchParams.get("item"),
+      menuAccent: searchParams.get("menuAccent"),
+      menuColor: searchParams.get("menuColor"),
+      radius: searchParams.get("radius"),
+    })
+
+    if (!parseResult.success) {
+      return NextResponse.json(
+        { error: parseResult.error.issues[0].message },
+        { status: 400 }
+      )
+    }
+
+    const designSystemConfig = parseResult.data
+
+    track("create_open_in_v0", designSystemConfig)
+
+    const payload = await buildV0Payload(designSystemConfig)
+
+    return NextResponse.json(payload)
+  } catch (error) {
+    return NextResponse.json(
+      {
+        error:
+          error instanceof Error ? error.message : "An unknown error occurred",
+      },
+      { status: 500 }
+    )
+  }
+}
+
+async function buildV0Payload(designSystemConfig: DesignSystemConfig) {
+  const registryBase = buildRegistryBase(designSystemConfig)
+
+  // Build all files in parallel.
+  const [globalsCss, layoutFile, componentFiles] = await Promise.all([
+    buildGlobalsCss(registryBase),
+    buildLayoutFile(designSystemConfig),
+    buildComponentFiles(designSystemConfig),
+  ])
+
+  return registryItemSchema.parse({
+    name: designSystemConfig.item ?? "Item",
+    type: "registry:item",
+    files: [globalsCss, layoutFile, ...componentFiles],
+  })
+}
+
+function buildGlobalsCss(registryBase: RegistryItem) {
+  const lightVars = Object.entries(registryBase.cssVars?.light ?? {})
+    .map(([key, value]) => `  --${key}: ${value};`)
+    .join("\n")
+
+  const darkVars = Object.entries(registryBase.cssVars?.dark ?? {})
+    .map(([key, value]) => `  --${key}: ${value};`)
+    .join("\n")
+
+  const content = dedent`@import "tailwindcss";
+@import "tw-animate-css";
+/* @import "shadcn/tailwind.css"; */
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  ${lightVars}
+}
+
+.dark {
+  ${darkVars}
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+  `
+
+  return registryItemFileSchema.parse({
+    path: "app/globals.css",
+    type: "registry:file",
+    target: "app/globals.css",
+    content,
+  })
+}
+
+function buildLayoutFile(designSystemConfig: DesignSystemConfig) {
+  const font = fonts.find(
+    (font) => font.name === `font-${designSystemConfig.font}`
+  )
+  if (!font) {
+    throw new Error(`Font "${designSystemConfig.font}" not found`)
+  }
+
+  const content = dedent`
+    import type { Metadata } from "next";
+    import { ${font.font.import} } from "next/font/google";
+    import "./globals.css";
+
+    const fontSans = ${font.font.import}({subsets:['latin'],variable:'--font-sans'});
+
+    export const metadata: Metadata = {
+      title: "Create Next App",
+      description: "Generated by create next app",
+    };
+
+    export default function RootLayout({
+      children,
+    }: Readonly<{
+      children: React.ReactNode;
+    }>) {
+      return (
+        <html lang="en" className={fontSans.variable}>
+          <body
+            className="antialiased"
+          >
+            {children}
+          </body>
+        </html>
+      );
+    }
+  `
+
+  return registryItemFileSchema.parse({
+    path: "app/layout.tsx",
+    type: "registry:page",
+    target: "app/layout.tsx",
+    content,
+  })
+}
+
+async function buildComponentFiles(designSystemConfig: DesignSystemConfig) {
+  const files = []
+  const allItemsForBase = Object.values(Index[designSystemConfig.base])
+    .filter(
+      (item: RegistryItem) =>
+        item.type === "registry:ui" || item.name === "example"
+    )
+    .map((item) => item.name)
+
+  const registryItemFiles = await Promise.all(
+    allItemsForBase.map(async (name) => {
+      const file = await getRegistryItemFile(name, designSystemConfig)
+      return file
+    })
+  )
+  files.push(...registryItemFiles)
+
+  const pageFile = {
+    path: "app/page.tsx",
+    type: "registry:page",
+    target: "app/page.tsx",
+    content: dedent`
+      import { Button } from "@/components/ui/button";
+      export default function Page() {
+        return <Button>Click me</Button>
+      }
+    `,
+  }
+
+  // Build the actual item component.
+  if (designSystemConfig.item) {
+    const itemComponentFile = await getRegistryItemFile(
+      designSystemConfig.item,
+      designSystemConfig
+    )
+    if (itemComponentFile) {
+      // Find the export default function from the component file.
+      const exportDefault = itemComponentFile.content.match(
+        /export default function (\w+)/
+      )
+      if (exportDefault) {
+        const functionName = exportDefault[1]
+
+        // Replace the export default function with a named export.
+        itemComponentFile.content = itemComponentFile.content.replace(
+          /export default function (\w+)/,
+          `export function ${functionName}`
+        )
+
+        // Import and render the item on the page.
+        pageFile.content = dedent`import { ${functionName} } from "@/components/${designSystemConfig.item}";
+
+        export default function Page() {
+          return <${functionName} />
+        }`
+      }
+
+      files.push({
+        ...itemComponentFile,
+        target: `components/${designSystemConfig.item}.tsx`,
+        type: "registry:component",
+      })
+    }
+  }
+
+  files.push(pageFile)
+
+  return z.array(registryItemFileSchema).parse(files)
+}
+
+async function getRegistryItemFile(
+  name: string,
+  designSystemConfig: DesignSystemConfig
+) {
+  const response = await fetch(
+    `${process.env.NEXT_PUBLIC_APP_URL}/r/styles/${designSystemConfig.base}-${designSystemConfig.style}/${name}.json`
+  )
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch registry item: ${response.statusText}`)
+  }
+
+  const json = await response.json()
+  const item = registryItemSchema.parse(json)
+
+  // Build a v0 config i.e components.json
+  const config = {
+    $schema: "https://ui.shadcn.com/schema.json",
+    style: `${designSystemConfig.base}-${designSystemConfig.style}`,
+    rsc: true,
+    tsx: true,
+    tailwind: {
+      config: "",
+      css: "app/globals.css",
+      baseColor: designSystemConfig.baseColor,
+      cssVariables: true,
+      prefix: "",
+    },
+    iconLibrary: designSystemConfig.iconLibrary,
+    aliases: {
+      components: "@/components",
+      utils: "@/lib/utils",
+      ui: "@/components/ui",
+      lib: "@/lib",
+      hooks: "@/hooks",
+    },
+    menuAccent: designSystemConfig.menuAccent,
+    menuColor: designSystemConfig.menuColor,
+    resolvedPaths: {
+      cwd: "/",
+      tailwindConfig: "./tailwind.config.js",
+      tailwindCss: "./globals.css",
+      utils: "./lib/utils",
+      components: "./components",
+      lib: "./lib",
+      hooks: "./hooks",
+      ui: "./components/ui",
+    },
+  } satisfies z.infer<typeof configSchema>
+
+  const file = item.files?.[0]
+  if (!file?.content) {
+    return null
+  }
+
+  const content = await transformFileContent(file.content, config)
+
+  return {
+    ...file,
+    target:
+      name === "example"
+        ? "components/example.tsx"
+        : `components/ui/${name}.tsx`,
+    type: name === "example" ? "registry:component" : "registry:ui",
+    content,
+  }
+}
+
+const transformers = [transformIcons, transformMenu, transformRender]
+
+async function transformFileContent(
+  content: string,
+  config: z.infer<typeof configSchema>
+) {
+  const project = new Project({
+    compilerOptions: {},
+  })
+
+  const sourceFile = project.createSourceFile("component.tsx", content, {
+    scriptKind: ScriptKind.TSX,
+  })
+
+  for (const transformer of transformers) {
+    await transformer({
+      filename: "component.tsx",
+      raw: content,
+      sourceFile,
+      config,
+    })
+  }
+
+  return sourceFile.getText()
+}

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

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+
+import type { DesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+type ParentToIframeMessage = {
+  type: "design-system-params"
+  data: DesignSystemSearchParams
+}
+
+export const isInIframe = () => {
+  if (typeof window === "undefined") {
+    return false
+  }
+  return window.self !== window.top
+}
+
+export function useIframeMessageListener<
+  Message extends ParentToIframeMessage,
+  MessageType extends Message["type"],
+>(
+  messageType: MessageType,
+  onMessage: (data: Extract<Message, { type: MessageType }>["data"]) => void
+) {
+  React.useEffect(() => {
+    if (!isInIframe()) {
+      return
+    }
+
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data.type === messageType) {
+        onMessage(event.data.data)
+      }
+    }
+
+    window.addEventListener("message", handleMessage)
+    return () => {
+      window.removeEventListener("message", handleMessage)
+    }
+  }, [messageType, onMessage])
+}
+
+export function sendToIframe<
+  Message extends ParentToIframeMessage,
+  MessageType extends Message["type"],
+>(
+  iframe: HTMLIFrameElement | null,
+  messageType: MessageType,
+  data: Extract<Message, { type: MessageType }>["data"]
+) {
+  if (!iframe?.contentWindow) {
+    return
+  }
+
+  iframe.contentWindow.postMessage(
+    {
+      type: messageType,
+      data,
+    },
+    "*"
+  )
+}

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

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+
+export type LockableParam =
+  | "style"
+  | "baseColor"
+  | "theme"
+  | "iconLibrary"
+  | "font"
+  | "menuAccent"
+  | "menuColor"
+  | "radius"
+
+type LocksContextValue = {
+  locks: Set<LockableParam>
+  isLocked: (param: LockableParam) => boolean
+  toggleLock: (param: LockableParam) => void
+}
+
+const LocksContext = React.createContext<LocksContextValue | null>(null)
+
+export function LocksProvider({ children }: { children: React.ReactNode }) {
+  const [locks, setLocks] = React.useState<Set<LockableParam>>(new Set())
+
+  const isLocked = React.useCallback(
+    (param: LockableParam) => locks.has(param),
+    [locks]
+  )
+
+  const toggleLock = React.useCallback((param: LockableParam) => {
+    setLocks((prev) => {
+      const next = new Set(prev)
+      if (next.has(param)) {
+        next.delete(param)
+      } else {
+        next.add(param)
+      }
+      return next
+    })
+  }, [])
+
+  const value = React.useMemo(
+    () => ({ locks, isLocked, toggleLock }),
+    [locks, isLocked, toggleLock]
+  )
+
+  return <LocksContext value={value}>{children}</LocksContext>
+}
+
+export function useLocks() {
+  const context = React.useContext(LocksContext)
+  if (!context) {
+    throw new Error("useLocks must be used within LocksProvider")
+  }
+  return context
+}

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

@@ -0,0 +1,56 @@
+import { NextResponse, type NextRequest } from "next/server"
+import { track } from "@vercel/analytics/server"
+import { registryItemSchema } from "shadcn/schema"
+
+import { buildRegistryBase, designSystemConfigSchema } from "@/registry/config"
+
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams
+
+    const result = designSystemConfigSchema.safeParse({
+      base: searchParams.get("base"),
+      style: searchParams.get("style"),
+      iconLibrary: searchParams.get("iconLibrary"),
+      baseColor: searchParams.get("baseColor"),
+      theme: searchParams.get("theme"),
+      font: searchParams.get("font"),
+      menuAccent: searchParams.get("menuAccent"),
+      menuColor: searchParams.get("menuColor"),
+      radius: searchParams.get("radius"),
+      template: searchParams.get("template"),
+    })
+
+    if (!result.success) {
+      return NextResponse.json(
+        { error: result.error.issues[0].message },
+        { status: 400 }
+      )
+    }
+
+    const registryBase = buildRegistryBase(result.data)
+    const parseResult = registryItemSchema.safeParse(registryBase)
+
+    if (!parseResult.success) {
+      return NextResponse.json(
+        {
+          error: "Invalid registry base item",
+          details: parseResult.error.format(),
+        },
+        { status: 500 }
+      )
+    }
+
+    track("create_app", result.data)
+
+    return NextResponse.json(parseResult.data)
+  } catch (error) {
+    return NextResponse.json(
+      {
+        error:
+          error instanceof Error ? error.message : "An unknown error occurred",
+      },
+      { status: 500 }
+    )
+  }
+}

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

@@ -0,0 +1,44 @@
+import "server-only"
+
+import { registryItemSchema } from "shadcn/schema"
+
+import { getThemesForBaseColor, type BaseName } from "@/registry/config"
+import { ALLOWED_ITEM_TYPES } from "@/app/(create)/lib/constants"
+
+export async function getItemsForBase(base: BaseName) {
+  const { Index } = await import("@/registry/bases/__index__")
+  const index = Index[base]
+
+  if (!index) {
+    return []
+  }
+
+  return Object.values(index).filter((item) =>
+    ALLOWED_ITEM_TYPES.includes(item.type)
+  )
+}
+
+export async function getBaseItem(name: string, base: BaseName) {
+  const { Index } = await import("@/registry/bases/__index__")
+  const index = Index[base]
+
+  if (!index?.[name]) {
+    return null
+  }
+
+  return registryItemSchema.parse(index[name])
+}
+
+export async function getBaseComponent(name: string, base: BaseName) {
+  const { Index } = await import("@/registry/bases/__index__")
+  const index = Index[base]
+
+  if (!index?.[name]) {
+    return null
+  }
+
+  return index[name].component
+}
+
+// Re-export for server-side use.
+export { getThemesForBaseColor }

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

@@ -0,0 +1 @@
+export const ALLOWED_ITEM_TYPES = ["registry:block", "registry:example"]

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

@@ -0,0 +1,151 @@
+import {
+  DM_Sans,
+  Figtree,
+  Geist,
+  Geist_Mono,
+  Inter,
+  JetBrains_Mono,
+  Noto_Sans,
+  Nunito_Sans,
+  Outfit,
+  Public_Sans,
+  Raleway,
+  Roboto,
+} from "next/font/google"
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+})
+
+const notoSans = Noto_Sans({
+  subsets: ["latin"],
+  variable: "--font-noto-sans",
+})
+
+const nunitoSans = Nunito_Sans({
+  subsets: ["latin"],
+  variable: "--font-nunito-sans",
+})
+
+const figtree = Figtree({
+  subsets: ["latin"],
+  variable: "--font-figtree",
+})
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-jetbrains-mono",
+})
+
+// const geistSans = Geist({
+//   subsets: ["latin"],
+//   variable: "--font-geist-sans",
+// })
+
+// const geistMono = Geist_Mono({
+//   subsets: ["latin"],
+//   variable: "--font-geist-mono",
+// })
+
+const roboto = Roboto({
+  subsets: ["latin"],
+  variable: "--font-roboto",
+})
+
+const raleway = Raleway({
+  subsets: ["latin"],
+  variable: "--font-raleway",
+})
+
+const dmSans = DM_Sans({
+  subsets: ["latin"],
+  variable: "--font-dm-sans",
+})
+
+const publicSans = Public_Sans({
+  subsets: ["latin"],
+  variable: "--font-public-sans",
+})
+
+const outfit = Outfit({
+  subsets: ["latin"],
+  variable: "--font-outfit",
+})
+
+export const FONTS = [
+  // {
+  //   name: "Geist Sans",
+  //   value: "geist",
+  //   font: geistSans,
+  //   type: "sans",
+  // },
+  {
+    name: "Inter",
+    value: "inter",
+    font: inter,
+    type: "sans",
+  },
+  {
+    name: "Noto Sans",
+    value: "noto-sans",
+    font: notoSans,
+    type: "sans",
+  },
+  {
+    name: "Nunito Sans",
+    value: "nunito-sans",
+    font: nunitoSans,
+    type: "sans",
+  },
+  {
+    name: "Figtree",
+    value: "figtree",
+    font: figtree,
+    type: "sans",
+  },
+  {
+    name: "Roboto",
+    value: "roboto",
+    font: roboto,
+    type: "sans",
+  },
+  {
+    name: "Raleway",
+    value: "raleway",
+    font: raleway,
+    type: "sans",
+  },
+  {
+    name: "DM Sans",
+    value: "dm-sans",
+    font: dmSans,
+    type: "sans",
+  },
+  {
+    name: "Public Sans",
+    value: "public-sans",
+    font: publicSans,
+    type: "sans",
+  },
+  {
+    name: "Outfit",
+    value: "outfit",
+    font: outfit,
+    type: "sans",
+  },
+  {
+    name: "JetBrains Mono",
+    value: "jetbrains-mono",
+    font: jetbrainsMono,
+    type: "mono",
+  },
+  // {
+  //   name: "Geist Mono",
+  //   value: "geist-mono",
+  //   font: geistMono,
+  //   type: "mono",
+  // },
+] as const
+
+export type Font = (typeof FONTS)[number]

apps/v4/app/(create)/lib/merge-theme.ts

@@ -0,0 +1,32 @@
+import { registryItemSchema, type RegistryItem } from "shadcn/schema"
+
+import { BASE_COLORS, THEMES } from "@/registry/config"
+
+export function buildTheme(baseColorName: string, themeName: string) {
+  const baseColor = BASE_COLORS.find((c) => c.name === baseColorName)
+  const theme = THEMES.find((t) => t.name === themeName)
+
+  if (!baseColor || !theme) {
+    throw new Error(
+      `Base color "${baseColorName}" or theme "${themeName}" not found`
+    )
+  }
+
+  const mergedTheme: RegistryItem = {
+    name: `${baseColor.name}-${theme.name}`,
+    title: `${baseColor.title} ${theme.title}`,
+    type: "registry:theme",
+    cssVars: {
+      light: {
+        ...baseColor.cssVars?.light,
+        ...theme.cssVars?.light,
+      },
+      dark: {
+        ...baseColor.cssVars?.dark,
+        ...theme.cssVars?.dark,
+      },
+    },
+  }
+
+  return registryItemSchema.parse(mergedTheme)
+}

apps/v4/app/(create)/lib/randomize-biases.ts

@@ -0,0 +1,80 @@
+import type {
+  BaseColorName,
+  Radius,
+  StyleName,
+  ThemeName,
+} from "@/registry/config"
+
+import { type FONTS } from "./fonts"
+
+export type RandomizeContext = {
+  style?: StyleName
+  baseColor?: BaseColorName
+  theme?: ThemeName
+  iconLibrary?: string
+  font?: string
+  menuAccent?: string
+  menuColor?: string
+  radius?: string
+}
+
+export type BiasFilter<T> = (
+  items: readonly T[],
+  context: RandomizeContext
+) => readonly T[]
+
+export type RandomizeBiases = {
+  fonts?: BiasFilter<(typeof FONTS)[number]>
+  radius?: BiasFilter<Radius>
+  // Add more bias filters as needed:
+  // styles?: BiasFilter<Style>
+  // baseColors?: BiasFilter<BaseColor>
+  // themes?: BiasFilter<Theme>
+  // etc.
+}
+
+/**
+ * Configuration for randomization biases.
+ * Add biases here to influence random selection based on context.
+ */
+export const RANDOMIZE_BIASES: RandomizeBiases = {
+  fonts: (fonts, context) => {
+    // When style is lyra, only use mono fonts.
+    if (context.style === "lyra") {
+      return fonts.filter((font) => font.value === "jetbrains-mono")
+    }
+
+    return fonts
+  },
+  radius: (radii, context) => {
+    // When style is lyra, always use "none" radius
+    if (context.style === "lyra") {
+      return radii.filter((radius) => radius.name === "none")
+    }
+
+    return radii
+  },
+  // Add more biases here as needed:
+  // Example: When baseColor is "blue", prefer certain themes
+  // themes: (themes, context) => {
+  //   if (context.baseColor === "blue") {
+  //     return themes.filter(theme => theme.name.includes("dark"))
+  //   }
+  //   return themes
+  // },
+}
+
+/**
+ * Applies biases to a list of items based on the current context.
+ */
+export function applyBias<T>(
+  items: readonly T[],
+  context: RandomizeContext,
+  biasFilter?: BiasFilter<T>
+): readonly T[] {
+  if (!biasFilter) {
+    return items
+  }
+
+  return biasFilter(items, context)
+}

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

@@ -0,0 +1,90 @@
+import { useQueryStates } from "nuqs"
+import {
+  createLoader,
+  createSerializer,
+  parseAsBoolean,
+  parseAsInteger,
+  parseAsString,
+  parseAsStringLiteral,
+  type inferParserType,
+  type Options,
+} from "nuqs/server"
+
+import {
+  BASE_COLORS,
+  BASES,
+  DEFAULT_CONFIG,
+  iconLibraries,
+  MENU_ACCENTS,
+  MENU_COLORS,
+  RADII,
+  STYLES,
+  THEMES,
+  type BaseColorName,
+  type BaseName,
+  type FontValue,
+  type IconLibraryName,
+  type MenuAccentValue,
+  type MenuColorValue,
+  type RadiusValue,
+  type StyleName,
+  type ThemeName,
+} from "@/registry/config"
+import { FONTS } from "@/app/(create)/lib/fonts"
+
+const designSystemSearchParams = {
+  base: parseAsStringLiteral<BaseName>(BASES.map((b) => b.name)).withDefault(
+    DEFAULT_CONFIG.base
+  ),
+  item: parseAsString.withDefault("preview").withOptions({ shallow: true }),
+  iconLibrary: parseAsStringLiteral<IconLibraryName>(
+    Object.values(iconLibraries).map((i) => i.name)
+  ).withDefault(DEFAULT_CONFIG.iconLibrary),
+  style: parseAsStringLiteral<StyleName>(STYLES.map((s) => s.name)).withDefault(
+    DEFAULT_CONFIG.style
+  ),
+  theme: parseAsStringLiteral<ThemeName>(THEMES.map((t) => t.name)).withDefault(
+    DEFAULT_CONFIG.theme
+  ),
+  font: parseAsStringLiteral<FontValue>(FONTS.map((f) => f.value)).withDefault(
+    DEFAULT_CONFIG.font
+  ),
+  baseColor: parseAsStringLiteral<BaseColorName>(
+    BASE_COLORS.map((b) => b.name)
+  ).withDefault(DEFAULT_CONFIG.baseColor),
+  menuAccent: parseAsStringLiteral<MenuAccentValue>(
+    MENU_ACCENTS.map((a) => a.value)
+  ).withDefault(DEFAULT_CONFIG.menuAccent),
+  menuColor: parseAsStringLiteral<MenuColorValue>(
+    MENU_COLORS.map((m) => m.value)
+  ).withDefault(DEFAULT_CONFIG.menuColor),
+  radius: parseAsStringLiteral<RadiusValue>(
+    RADII.map((r) => r.name)
+  ).withDefault("default"),
+  template: parseAsStringLiteral([
+    "next",
+    "start",
+    "vite",
+  ] as const).withDefault("next"),
+  size: parseAsInteger.withDefault(100),
+  custom: parseAsBoolean.withDefault(false),
+}
+
+export const loadDesignSystemSearchParams = createLoader(
+  designSystemSearchParams
+)
+
+export const serializeDesignSystemSearchParams = createSerializer(
+  designSystemSearchParams
+)
+
+export const useDesignSystemSearchParams = (options: Options = {}) =>
+  useQueryStates(designSystemSearchParams, {
+    shallow: false,
+    history: "push",
+    ...options,
+  })
+
+export type DesignSystemSearchParams = inferParserType<
+  typeof designSystemSearchParams
+>

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

@@ -0,0 +1,44 @@
+import { type RegistryItem } from "shadcn/schema"
+
+const mapping = {
+  "registry:block": "Blocks",
+  "registry:example": "Components",
+}
+
+export function groupItemsByType(
+  items: Pick<RegistryItem, "name" | "title" | "type">[]
+) {
+  const grouped = items.reduce(
+    (acc, item) => {
+      acc[item.type] = [...(acc[item.type] || []), item]
+      return acc
+    },
+    {} as Record<string, Pick<RegistryItem, "name" | "title" | "type">[]>
+  )
+
+  return Object.entries(grouped)
+    .map(([type, items]) => ({
+      type,
+      title: mapping[type as keyof typeof mapping] || type,
+      items,
+    }))
+    .sort((a, b) => {
+      const aIndex = Object.keys(mapping).indexOf(a.type)
+      const bIndex = Object.keys(mapping).indexOf(b.type)
+
+      // If both are in mapping, sort by their order.
+      if (aIndex !== -1 && bIndex !== -1) {
+        return aIndex - bIndex
+      }
+      // If only a is in mapping, it comes first.
+      if (aIndex !== -1) {
+        return -1
+      }
+      // If only b is in mapping, it comes first.
+      if (bIndex !== -1) {
+        return 1
+      }
+      // If neither is in mapping, maintain original order.
+      return 0
+    })
+}

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

@@ -0,0 +1,143 @@
+import * as React from "react"
+import { type Metadata } from "next"
+import { notFound } from "next/navigation"
+
+import { siteConfig } from "@/lib/config"
+import { absoluteUrl } from "@/lib/utils"
+import { DarkModeScript } from "@/components/mode-switcher"
+import { TailwindIndicator } from "@/components/tailwind-indicator"
+import { BASES, type Base } from "@/registry/config"
+import { DesignSystemProvider } from "@/app/(create)/components/design-system-provider"
+import { ItemPickerScript } from "@/app/(create)/components/item-picker"
+import { PreviewStyle } from "@/app/(create)/components/preview-style"
+import { RandomizeScript } from "@/app/(create)/components/random-button"
+import { getBaseComponent, getBaseItem } from "@/app/(create)/lib/api"
+import { ALLOWED_ITEM_TYPES } from "@/app/(create)/lib/constants"
+
+export const revalidate = false
+export const dynamic = "force-static"
+export const dynamicParams = false
+
+const getCacheRegistryItem = React.cache(
+  async (name: string, base: Base["name"]) => {
+    return await getBaseItem(name, base)
+  }
+)
+
+const getCachedRegistryComponent = React.cache(
+  async (name: string, base: Base["name"]) => {
+    return await getBaseComponent(name, base)
+  }
+)
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{
+    base: string
+    name: string
+  }>
+}): Promise<Metadata> {
+  const paramBag = await params
+  const base = BASES.find((l) => l.name === paramBag.base)
+
+  if (!base) {
+    return {}
+  }
+  const item = await getBaseItem(paramBag.name, base.name)
+
+  if (!item) {
+    return {}
+  }
+
+  const title = item.name
+  const description = item.description
+
+  return {
+    title: item.name,
+    description,
+    openGraph: {
+      title,
+      description,
+      type: "article",
+      url: absoluteUrl(`/preview/${base.name}/${item.name}`),
+      images: [
+        {
+          url: siteConfig.ogImage,
+          width: 1200,
+          height: 630,
+          alt: siteConfig.name,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      images: [siteConfig.ogImage],
+      creator: "@shadcn",
+    },
+  }
+}
+
+export async function generateStaticParams() {
+  const { Index } = await import("@/registry/bases/__index__")
+  const params: Array<{ base: string; name: string }> = []
+
+  for (const base of BASES) {
+    if (!Index[base.name]) {
+      continue
+    }
+
+    const styleIndex = Index[base.name]
+    for (const itemName in styleIndex) {
+      const item = styleIndex[itemName]
+      if (ALLOWED_ITEM_TYPES.includes(item.type)) {
+        params.push({
+          base: base.name,
+          name: item.name,
+        })
+      }
+    }
+  }
+
+  return params
+}
+
+export default async function BlockPage({
+  params,
+}: {
+  params: Promise<{
+    base: string
+    name: string
+  }>
+}) {
+  const paramBag = await params
+  const base = BASES.find((l) => l.name === paramBag.base)
+
+  if (!base) {
+    return notFound()
+  }
+
+  const [item, Component] = await Promise.all([
+    getCacheRegistryItem(paramBag.name, base.name),
+    getCachedRegistryComponent(paramBag.name, base.name),
+  ])
+
+  if (!item || !Component) {
+    return notFound()
+  }
+
+  return (
+    <div className="relative">
+      <PreviewStyle />
+      <ItemPickerScript />
+      <RandomizeScript />
+      <DarkModeScript />
+      <DesignSystemProvider>
+        <Component />
+      </DesignSystemProvider>
+      <TailwindIndicator forceMount />
+    </div>
+  )
+}

apps/v4/app/(examples)/dashboard-03/components/analytics-date-picker.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import { addDays, format } from "date-fns"
 import { CalendarIcon } from "lucide-react"
-import { DateRange } from "react-day-picker"
+import { type DateRange } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york-v4/ui/button"

apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx

@@ -12,10 +12,10 @@ import {
   CardTitle,
 } from "@/registry/new-york-v4/ui/card"
 import {
-  ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
+  type ChartConfig,
 } from "@/registry/new-york-v4/ui/chart"
 
 const chartData = [

apps/v4/app/(examples)/dashboard-03/components/chart-visitors.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { Label, Pie, PieChart, Sector } from "recharts"
-import { PieSectorDataItem } from "recharts/types/polar/Pie"
+import { type PieSectorDataItem } from "recharts/types/polar/Pie"
 
 import {
   Card,
@@ -13,11 +13,11 @@ import {
   CardTitle,
 } from "@/registry/new-york-v4/ui/card"
 import {
-  ChartConfig,
   ChartContainer,
   ChartStyle,
   ChartTooltip,
   ChartTooltipContent,
+  type ChartConfig,
 } from "@/registry/new-york-v4/ui/chart"
 import {
   Select,