chore: update deps (#9022)

* feat: init * fix * fix * fix * feat * feat * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * feat: implement icons * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * feat: update init command * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * feat: dialog * feat * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * feat: add registry:base item type * feat: rename frame to canva * fix * feat * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fi * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * feat: add all colors * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * feat: add outfit font * fix * fix * fix * fix * fix * chore: changeset * fix * fix * fix * fix * fix * fix * fix * fix
2026-06-11 01:41:37 +00:00 · 2025-12-12 21:01:44 +04:00
parent 672f845322
commit 86d9b00084
2395 changed files with 148484 additions and 6510 deletions
--- a/.changeset/fast-games-open.md
+++ b/.changeset/fast-games-open.md
@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add registry:base item type
--- a/.changeset/spotty-rivers-kneel.md
+++ b/.changeset/spotty-rivers-kneel.md
@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add npx shadcn create
--- a/.claude/settings.local.json
+++ b/.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": []
  }
-}
+}
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,5 @@ tsconfig.tsbuildinfo
 .idea
 .fleet
 .vscode
+
+.notes
--- a/.vscode/settings.json
+++ b/.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
  }
 }
--- a/apps/v4/app/(app)/(root)/components/button-group-demo.tsx
+++ b/apps/v4/app/(app)/(root)/components/button-group-demo.tsx
@@ -6,7 +6,7 @@ import {
  ArrowLeftIcon,
  CalendarPlusIcon,
  ClockIcon,
-  ListFilterPlusIcon,
+  ListFilterIcon,
  MailCheckIcon,
  MoreHorizontalIcon,
  TagIcon,
@@ -79,7 +79,7 @@ export function ButtonGroupDemo() {
                Add to Calendar
              </DropdownMenuItem>
              <DropdownMenuItem>
-                <ListFilterPlusIcon />
+                <ListFilterIcon />
                Add to List
              </DropdownMenuItem>
              <DropdownMenuSub>
--- a/apps/v4/app/(app)/(root)/page.tsx
+++ b/apps/v4/app/(app)/(root)/page.tsx
@@ -1,6 +1,8 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"
+import { PlusSignIcon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"

 import { Announcement } from "@/components/announcement"
 import { ExamplesNav } from "@/components/examples-nav"
@@ -55,10 +57,13 @@ export default function IndexPage() {
        <PageHeaderHeading className="max-w-4xl">{title}</PageHeaderHeading>
        <PageHeaderDescription>{description}</PageHeaderDescription>
        <PageActions>
-          <Button asChild size="sm">
-            <Link href="/docs/installation">Get Started</Link>
+          <Button asChild size="sm" className="h-[31px] rounded-lg">
+            <Link href="/create">
+              <HugeiconsIcon icon={PlusSignIcon} />
+              New Project
+            </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>
--- a/apps/v4/app/(app)/blocks/[...categories]/page.tsx
+++ b/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"
--- a/apps/v4/app/(app)/blocks/layout.tsx
+++ b/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"
--- a/apps/v4/app/(app)/blocks/page.tsx
+++ b/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
--- a/apps/v4/app/(app)/charts/[type]/page.tsx
+++ b/apps/v4/app/(app)/charts/[type]/page.tsx
@@ -3,7 +3,7 @@ import { notFound } from "next/navigation"

 import { cn } from "@/lib/utils"
 import { ChartDisplay } from "@/components/chart-display"
-import { getActiveStyle } from "@/registry/styles"
+import { getActiveStyle } from "@/registry/_legacy-styles"
 import { charts } from "@/app/(app)/charts/charts"

 export const revalidate = false
--- a/apps/v4/app/(app)/charts/charts.tsx
+++ b/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"
--- a/apps/v4/app/(app)/charts/layout.tsx
+++ b/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"
--- a/apps/v4/app/(app)/colors/layout.tsx
+++ b/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"
--- a/apps/v4/app/(app)/examples/authentication/page.tsx
+++ b/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"

--- a/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx
+++ b/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,
--- a/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx
+++ b/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 {
--- a/apps/v4/app/(app)/examples/layout.tsx
+++ b/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"
--- a/apps/v4/app/(app)/examples/playground/components/maxlength-selector.tsx
+++ b/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,
--- a/apps/v4/app/(app)/examples/playground/components/model-selector.tsx
+++ b/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[]
--- a/apps/v4/app/(app)/examples/playground/components/preset-selector.tsx
+++ b/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[]
--- a/apps/v4/app/(app)/examples/playground/components/temperature-selector.tsx
+++ b/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,
--- a/apps/v4/app/(app)/examples/playground/components/top-p-selector.tsx
+++ b/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,
--- a/apps/v4/app/(app)/examples/playground/page.tsx
+++ b/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"

--- a/apps/v4/app/(app)/examples/tasks/components/columns.tsx
+++ b/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"

--- a/apps/v4/app/(app)/examples/tasks/components/data-table-column-header.tsx
+++ b/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"
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
+++ b/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"
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx
+++ b/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,
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-row-actions.tsx
+++ b/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"
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-toolbar.tsx
+++ b/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"
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-view-options.tsx
+++ b/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"
--- a/apps/v4/app/(app)/examples/tasks/components/data-table.tsx
+++ b/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 {
--- a/apps/v4/app/(app)/examples/tasks/page.tsx
+++ b/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"

--- a/apps/v4/app/(app)/llm/[[...slug]]/route.ts
+++ b/apps/v4/app/(app)/llm/[[...slug]]/route.ts
@@ -3,7 +3,7 @@ import { NextResponse, type NextRequest } from "next/server"

 import { processMdxForLLMs } from "@/lib/llm"
 import { source } from "@/lib/source"
-import { getActiveStyle } from "@/registry/styles"
+import { getActiveStyle } from "@/registry/_legacy-styles"

 export const revalidate = false

--- a/apps/v4/app/(app)/themes/layout.tsx
+++ b/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"
--- a/apps/v4/app/(create)/components/accent-picker.tsx
+++ b/apps/v4/app/(create)/components/accent-picker.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { useQueryStates } from "nuqs"
+
+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 { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function MenuAccentPicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+    history: "push",
+  })
+
+  const currentAccent = MENU_ACCENTS.find(
+    (accent) => accent.value === params.menuAccent
+  )
+
+  return (
+    <Picker>
+      <div className="group/picker relative">
+        <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 absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base">
+            <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>
+        <LockButton
+          param="menuAccent"
+          className="absolute top-1/2 right-10 -translate-y-1/2"
+        />
+      </div>
+      <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>
+  )
+}
--- a/apps/v4/app/(create)/components/base-color-picker.tsx
+++ b/apps/v4/app/(create)/components/base-color-picker.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import { useTheme } from "next-themes"
+import { useQueryStates } from "nuqs"
+
+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 { designSystemSearchParams } 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] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+    history: "push",
+  })
+
+  const currentBaseColor = React.useMemo(
+    () => BASE_COLORS.find((baseColor) => baseColor.name === params.baseColor),
+    [params.baseColor]
+  )
+
+  return (
+    <Picker>
+      <div className="group/picker relative">
+        <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="absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color)"
+            />
+          )}
+        </PickerTrigger>
+        <LockButton
+          param="baseColor"
+          className="absolute top-1/2 right-10 -translate-y-1/2"
+        />
+      </div>
+      <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>
+  )
+}
--- a/apps/v4/app/(create)/components/base-picker.tsx
+++ b/apps/v4/app/(create)/components/base-picker.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import * as React from "react"
+import { useQueryStates } from "nuqs"
+
+import { BASES } from "@/registry/config"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerTrigger,
+} from "@/app/(create)/components/picker"
+import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function BasePicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+    history: "push",
+  })
+
+  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! absolute top-1/2 right-4 size-4 -translate-y-1/2 *:[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>
+  )
+}
--- a/apps/v4/app/(create)/components/create-project-dialog.tsx
+++ b/apps/v4/app/(create)/components/create-project-dialog.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import * as React from "react"
+import { IconCheck, IconCopy } from "@tabler/icons-react"
+import { useQueryStates } from "nuqs"
+
+import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { Icons } from "@/components/icons"
+import { DEFAULT_CONFIG } from "@/registry/config"
+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 { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function ToolbarControls() {
+  const [open, setOpen] = React.useState(false)
+  const [params, setParams] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+  })
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  const command = 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}`
+    return `pnpm shadcn create --preset ${url} -c ~/Playground`
+  }, [
+    params.base,
+    params.style,
+    params.baseColor,
+    params.theme,
+    params.iconLibrary,
+    params.font,
+    params.menuAccent,
+    params.menuColor,
+    params.radius,
+  ])
+
+  React.useEffect(() => {
+    if (hasCopied) {
+      const timer = setTimeout(() => setHasCopied(false), 2000)
+      return () => clearTimeout(timer)
+    }
+  }, [hasCopied])
+
+  const handleCopy = React.useCallback(() => {
+    copyToClipboardWithMeta(command, {
+      name: "copy_npm_command",
+      properties: {
+        command,
+      },
+    })
+    setOpen(false)
+    setHasCopied(true)
+  }, [command, setOpen])
+
+  const handleReset = React.useCallback(() => {
+    setParams({
+      item: "cover",
+      iconLibrary: DEFAULT_CONFIG.iconLibrary,
+      style: DEFAULT_CONFIG.style,
+      theme: DEFAULT_CONFIG.theme,
+      font: DEFAULT_CONFIG.font,
+      baseColor: DEFAULT_CONFIG.baseColor,
+      menuAccent: DEFAULT_CONFIG.menuAccent,
+      menuColor: DEFAULT_CONFIG.menuColor,
+      radius: DEFAULT_CONFIG.radius,
+      size: 100,
+      custom: false,
+    })
+  }, [setParams])
+
+  return (
+    <div className="bg-background sticky bottom-0 flex gap-2">
+      <Button
+        size="sm"
+        variant="outline"
+        className="h-[31px] rounded-lg"
+        onClick={handleReset}
+      >
+        Reset
+      </Button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <Button size="sm" className="h-[31px] flex-1 rounded-lg">
+            Create Project
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="dialog-ring sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>Install shadcn/ui</DialogTitle>
+            <DialogDescription>
+              Run this command to start a new shadcn/ui project with your
+              selected configuration.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="bg-surface text-surface-foreground relative overflow-hidden rounded-lg p-4">
+            <div className="no-scrollbar overflow-x-auto pr-10">
+              <code className="font-mono text-sm whitespace-nowrap">
+                {command}
+              </code>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              size="sm"
+              variant="secondary"
+              onClick={() => setOpen(false)}
+            >
+              Open in <Icons.v0 className="size-5" />
+            </Button>
+            <Button size="sm" onClick={handleCopy}>
+              Copy Command
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
--- a/apps/v4/app/(create)/components/customizer-controls.tsx
+++ b/apps/v4/app/(create)/components/customizer-controls.tsx
@@ -0,0 +1,208 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import Script from "next/script"
+import { DiceFaces05Icon, Undo02Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { useQueryStates } from "nuqs"
+
+import { cn } from "@/lib/utils"
+import {
+  BASE_COLORS,
+  DEFAULT_CONFIG,
+  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 { designSystemSearchParams } 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 CustomizerControls({ className }: { className?: string }) {
+  const router = useRouter()
+  const { locks } = useLocks()
+  const [params, setParams] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+    history: "push",
+  })
+
+  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])
+
+  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 (
+    <div className={cn("items-center gap-0", className)}>
+      <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>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={handleReset}
+        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>
+    </div>
+  )
+}
+
+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
+                    }, '*');
+                  }
+                }
+              });
+
+            })();
+          `,
+      }}
+    />
+  )
+}
--- a/apps/v4/app/(create)/components/customizer.tsx
+++ b/apps/v4/app/(create)/components/customizer.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import * as React from "react"
+import { Settings05Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { useQueryStates } from "nuqs"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { getThemesForBaseColor, PRESETS, STYLES } from "@/registry/config"
+import { FieldGroup } from "@/registry/new-york-v4/ui/field"
+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 { CustomizerControls } from "@/app/(create)/components/customizer-controls"
+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 { StylePicker } from "@/app/(create)/components/style-picker"
+import { ThemePicker } from "@/app/(create)/components/theme-picker"
+import { FONTS } from "@/app/(create)/lib/fonts"
+import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function Customizer() {
+  const [params] = useQueryStates(designSystemSearchParams)
+  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} />
+          <CustomizerControls className="mt-auto hidden w-full flex-col md:flex" />
+        </FieldGroup>
+      </div>
+    </div>
+  )
+}
--- a/apps/v4/app/(create)/components/design-system-provider.tsx
+++ b/apps/v4/app/(create)/components/design-system-provider.tsx
@@ -0,0 +1,172 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  buildRegistryTheme,
+  DEFAULT_CONFIG,
+  type DesignSystemConfig,
+} from "@/registry/config"
+import { useDesignSystemParam } from "@/app/(create)/hooks/use-design-system"
+import { FONTS } from "@/app/(create)/lib/fonts"
+
+export function DesignSystemProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const style = useDesignSystemParam("style")
+  const theme = useDesignSystemParam("theme")
+  const font = useDesignSystemParam("font")
+  const baseColor = useDesignSystemParam("baseColor")
+  const menuAccent = useDesignSystemParam("menuAccent")
+  const menuColor = useDesignSystemParam("menuColor")
+  const radius = useDesignSystemParam("radius")
+  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}</>
+}
--- a/apps/v4/app/(create)/components/font-picker.tsx
+++ b/apps/v4/app/(create)/components/font-picker.tsx
@@ -0,0 +1,106 @@
+"use client"
+
+import * as React from "react"
+import { useQueryStates } from "nuqs"
+
+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 { designSystemSearchParams } 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] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+    history: "push",
+  })
+
+  const currentFont = React.useMemo(
+    () => fonts.find((font) => font.value === params.font),
+    [fonts, params.font]
+  )
+
+  return (
+    <Picker>
+      <div className="group/picker relative">
+        <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 absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base"
+            style={{ fontFamily: currentFont?.font.style.fontFamily }}
+          >
+            Aa
+          </div>
+        </PickerTrigger>
+        <LockButton
+          param="font"
+          className="absolute top-1/2 right-10 -translate-y-1/2"
+        />
+      </div>
+      <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>
+  )
+}
--- a/apps/v4/app/(create)/components/icon-library-picker.tsx
+++ b/apps/v4/app/(create)/components/icon-library-picker.tsx
@@ -0,0 +1,293 @@
+"use client"
+
+import * as React from "react"
+import { lazy, memo, Suspense } from "react"
+import { useQueryStates } from "nuqs"
+
+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 { designSystemSearchParams } 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 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",
+    "MoreHorizontalIcon",
+    "Loading03Icon",
+    "PlusSignIcon",
+    "MinusSignIcon",
+    "ArrowLeft02Icon",
+    "ArrowRight02Icon",
+    "Tick02Icon",
+    "ArrowDown01Icon",
+    "ArrowRight01Icon",
+  ],
+}
+
+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>
+  ),
+}
+
+export function IconLibraryPicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+    history: "push",
+  })
+
+  const currentIconLibrary = React.useMemo(
+    () => iconLibraries[params.iconLibrary as keyof typeof iconLibraries],
+    [params.iconLibrary]
+  )
+
+  return (
+    <Picker>
+      <div className="group/picker relative">
+        <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! absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base">
+            {logos[currentIconLibrary?.name as keyof typeof logos]}
+          </div>
+        </PickerTrigger>
+        <LockButton
+          param="iconLibrary"
+          className="absolute top-1/2 right-10 -translate-y-1/2"
+        />
+      </div>
+      <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>
+  )
+}
+
+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
+        : IconHugeicons
+
+  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>
+  )
+})
--- a/apps/v4/app/(create)/components/icon-placeholder.tsx
+++ b/apps/v4/app/(create)/components/icon-placeholder.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import { lazy, Suspense } from "react"
+import { SquareIcon } from "lucide-react"
+import type { IconLibraryName } from "shadcn/icons"
+
+import { useDesignSystemParam } from "@/app/(create)/hooks/use-design-system"
+
+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,
+  }))
+)
+
+export function IconPlaceholder({
+  ...props
+}: {
+  [K in IconLibraryName]: string
+} & React.ComponentProps<"svg">) {
+  const iconLibrary = useDesignSystemParam("iconLibrary")
+  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} />
+      )}
+    </Suspense>
+  )
+}
--- a/apps/v4/app/(create)/components/item-explorer.tsx
+++ b/apps/v4/app/(create)/components/item-explorer.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import { ChevronRightIcon } from "lucide-react"
+import { useQueryStates } from "nuqs"
+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 { designSystemSearchParams } 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] = useQueryStates(designSystemSearchParams, {
+    history: "push",
+    shallow: true,
+  })
+
+  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>
+  )
+}
--- a/apps/v4/app/(create)/components/item-picker.tsx
+++ b/apps/v4/app/(create)/components/item-picker.tsx
@@ -0,0 +1,197 @@
+"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 { useQueryStates } from "nuqs"
+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 { designSystemSearchParams } 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] = useQueryStates(designSystemSearchParams, {
+    history: "push",
+    shallow: true,
+  })
+
+  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-md"
+          />
+        }
+      >
+        <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"
+        side="bottom"
+        align="center"
+      >
+        <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
+                    }, '*');
+                  }
+                }
+              });
+
+            })();
+          `,
+      }}
+    />
+  )
+}
--- a/apps/v4/app/(create)/components/lock-button.tsx
+++ b/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>
+  )
+}
--- a/apps/v4/app/(create)/components/menu-picker.tsx
+++ b/apps/v4/app/(create)/components/menu-picker.tsx
@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import { useTheme } from "next-themes"
+import { useQueryStates } from "nuqs"
+
+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 { designSystemSearchParams } 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] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+    history: "push",
+  })
+  const currentMenu = MENU_OPTIONS.find(
+    (menu) => menu.value === params.menuColor
+  )
+
+  return (
+    <Picker>
+      <div className="group/picker relative">
+        <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 absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base">
+            {currentMenu?.icon}
+          </div>
+        </PickerTrigger>
+        <LockButton
+          param="menuColor"
+          className="absolute top-1/2 right-10 -translate-y-1/2"
+        />
+      </div>
+      <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>
+  )
+}
--- a/apps/v4/app/(create)/components/picker.tsx
+++ b/apps/v4/app/(create)/components/picker.tsx
@@ -0,0 +1,284 @@
+"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"
+        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"
+          />
+        </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"
+            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,
+}
--- a/apps/v4/app/(create)/components/preset-picker.tsx
+++ b/apps/v4/app/(create)/components/preset-picker.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import * as React from "react"
+import { useQueryStates } from "nuqs"
+
+import { BASES, STYLES, type Preset } from "@/registry/config"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerTrigger,
+} from "@/app/(create)/components/picker"
+import { designSystemSearchParams } 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] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+    history: "push",
+  })
+
+  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>
+  )
+}
--- a/apps/v4/app/(create)/components/preview-controls.tsx
+++ b/apps/v4/app/(create)/components/preview-controls.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import { Monitor, Smartphone, Tablet } from "lucide-react"
+import { useQueryStates } from "nuqs"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york-v4/ui/toggle-group"
+import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function PreviewControls() {
+  const [urlParams, setUrlParams] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+  })
+
+  return (
+    <div className="flex h-8 items-center gap-1.5 rounded-md border p-1">
+      <ToggleGroup
+        type="single"
+        value={(urlParams.size ?? 100).toString()}
+        onValueChange={(newValue) => {
+          if (newValue) {
+            setUrlParams({ 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>
+  )
+}
--- a/apps/v4/app/(create)/components/preview-style.tsx
+++ b/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>
+  )
+}
--- a/apps/v4/app/(create)/components/preview.tsx
+++ b/apps/v4/app/(create)/components/preview.tsx
@@ -0,0 +1,125 @@
+"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 { RANDOMIZE_FORWARD_TYPE } from "@/app/(create)/components/customizer-controls"
+import { CMD_K_FORWARD_TYPE } from "@/app/(create)/components/item-picker"
+import { useDesignSystemSync } from "@/app/(create)/hooks/use-design-system"
+
+const MESSAGE_TYPE = "design-system-params"
+
+export function Preview() {
+  const params = useDesignSystemSync()
+  const iframeRef = React.useRef<HTMLIFrameElement>(null)
+  const resizablePanelRef = React.useRef<ImperativePanelHandle>(null)
+  const [initialParams] = React.useState(params)
+  const [iframeKey, setIframeKey] = React.useState(0)
+
+  // 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 = () => {
+      iframe.contentWindow?.postMessage(
+        {
+          type: MESSAGE_TYPE,
+          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)
+    }
+  }, [])
+
+  if (!params.item || !params.base) {
+    return null
+  }
+
+  const iframeSrc = `/preview/${params.base}/${params.item}?theme=${initialParams.theme ?? "neutral"}&iconLibrary=${initialParams.iconLibrary ?? "lucide"}&style=${initialParams.style ?? "vega"}&font=${initialParams.font ?? "inter"}&baseColor=${initialParams.baseColor ?? "neutral"}`
+
+  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.item}-${iframeKey}`}
+          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>
+  )
+}
--- a/apps/v4/app/(create)/components/radius-picker.tsx
+++ b/apps/v4/app/(create)/components/radius-picker.tsx
@@ -0,0 +1,106 @@
+"use client"
+
+import { useQueryStates } from "nuqs"
+
+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 { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function RadiusPicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+    history: "push",
+  })
+
+  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 (
+    <Picker>
+      <div className="group/picker relative">
+        <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 absolute top-1/2 right-4 flex size-4 -translate-y-1/2 rotate-90 items-center justify-center text-base">
+            <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>
+        <LockButton
+          param="radius"
+          className="absolute top-1/2 right-10 -translate-y-1/2"
+        />
+      </div>
+      <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>
+  )
+}
--- a/apps/v4/app/(create)/components/share-button.tsx
+++ b/apps/v4/app/(create)/components/share-button.tsx
@@ -0,0 +1,76 @@
+"use client"
+
+import * as React from "react"
+import { Share03Icon, Tick02Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { useQueryStates } from "nuqs"
+
+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 { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function ShareButton() {
+  const [params] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+  })
+  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"
+          onClick={handleCopy}
+        >
+          {hasCopied ? (
+            <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
+          ) : (
+            <HugeiconsIcon icon={Share03Icon} strokeWidth={2} />
+          )}
+          Share
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>Copy Link</TooltipContent>
+    </Tooltip>
+  )
+}
--- a/apps/v4/app/(create)/components/style-picker.tsx
+++ b/apps/v4/app/(create)/components/style-picker.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import * as React from "react"
+import { useQueryStates } from "nuqs"
+
+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 { designSystemSearchParams } 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] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+    history: "push",
+  })
+
+  const currentStyle = styles.find((style) => style.name === params.style)
+
+  return (
+    <Picker>
+      <div className="group/picker relative">
+        <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="absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center">
+              {React.cloneElement(currentStyle.icon, {
+                className: "size-4",
+              })}
+            </div>
+          )}
+        </PickerTrigger>
+        <LockButton
+          param="style"
+          className="absolute top-1/2 right-10 -translate-y-1/2"
+        />
+      </div>
+      <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>
+  )
+}
--- a/apps/v4/app/(create)/components/template-picker.tsx
+++ b/apps/v4/app/(create)/components/template-picker.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import { useQueryStates } from "nuqs"
+
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerTrigger,
+} from "@/app/(create)/components/picker"
+import { designSystemSearchParams } 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] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+    history: "push",
+  })
+
+  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! absolute top-1/2 right-4 size-4 -translate-y-1/2 *:[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>
+  )
+}
--- a/apps/v4/app/(create)/components/theme-picker.tsx
+++ b/apps/v4/app/(create)/components/theme-picker.tsx
@@ -0,0 +1,171 @@
+"use client"
+
+import * as React from "react"
+import { useTheme } from "next-themes"
+import { useQueryStates } from "nuqs"
+
+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,
+  PickerLabel,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerSeparator,
+  PickerTrigger,
+} from "@/app/(create)/components/picker"
+import { designSystemSearchParams } 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] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+    history: "push",
+  })
+
+  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 (
+    <Picker>
+      <div className="group/picker relative">
+        <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="absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color)"
+            />
+          )}
+        </PickerTrigger>
+        <LockButton
+          param="theme"
+          className="absolute top-1/2 right-10 -translate-y-1/2"
+        />
+      </div>
+      <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>
+  )
+}
--- a/apps/v4/app/(create)/components/toolbar-controls.tsx
+++ b/apps/v4/app/(create)/components/toolbar-controls.tsx
@@ -0,0 +1,277 @@
+"use client"
+
+import * as React from "react"
+import {
+  ComputerTerminal01Icon,
+  Copy01Icon,
+  Tick02Icon,
+} from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { useQueryStates } from "nuqs"
+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 { designSystemSearchParams } 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] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+    history: "push",
+  })
+  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>
+  )
+}
--- a/apps/v4/app/(create)/components/v0-button.tsx
+++ b/apps/v4/app/(create)/components/v0-button.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import { useQueryStates } from "nuqs"
+
+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 { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function V0Button({ className }: { className?: string }) {
+  const [params] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+    history: "push",
+  })
+  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}`
+
+  console.log(url)
+
+  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]",
+              className
+            )}
+            asChild
+          >
+            <a
+              href={`${process.env.NEXT_PUBLIC_V0_URL}/chat/api/open?url=${encodeURIComponent(url)}&title=${params.item}`}
+              target="_blank"
+            >
+              Open in <Icons.v0 className="size-5" />
+            </a>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Open current design in v0</p>
+        </TooltipContent>
+      </Tooltip>
+    </>
+  )
+}
--- a/apps/v4/app/(create)/components/welcome-dialog.tsx
+++ b/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>
+  )
+}
--- a/apps/v4/app/(create)/create/layout.tsx
+++ b/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>
+}
--- a/apps/v4/app/(create)/create/page.tsx
+++ b/apps/v4/app/(create)/create/page.tsx
@@ -0,0 +1,142 @@
+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 { absoluteUrl } from "@/lib/utils"
+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 { CustomizerControls } from "@/app/(create)/components/customizer-controls"
+import { ItemExplorer } from "@/app/(create)/components/item-explorer"
+import { ItemPicker } from "@/app/(create)/components/item-picker"
+import { Preview } from "@/app/(create)/components/preview"
+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 { designSystemSearchParamsCache } 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 designSystemSearchParamsCache.parse(searchParams)
+  const base = BASES.find((b) => b.name === params.base) ?? BASES[0]
+
+  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="flex items-center xl:w-1/3">
+              <Button
+                asChild
+                variant="outline"
+                size="sm"
+                className="rounded-lg shadow-none"
+              >
+                <Link href="/">
+                  <ArrowLeftIcon />
+                  Back
+                </Link>
+              </Button>
+              <Separator
+                orientation="vertical"
+                className="mx-2 hidden sm:mx-4 lg:flex"
+              />
+              <div className="text-muted-foreground hidden text-sm font-medium lg:flex">
+                New Project
+              </div>
+            </div>
+            <div className="fixed inset-x-0 bottom-0 ml-auto flex flex-1 items-center gap-2 px-4.5 pb-4 sm:static sm:justify-end sm:p-0 lg:ml-0 xl:justify-center">
+              <ItemPicker items={filteredItems} />
+              <CustomizerControls className="sm:hidden" />
+              <Separator
+                orientation="vertical"
+                className="mr-2 hidden sm:flex xl:hidden"
+              />
+            </div>
+            <div className="ml-auto flex items-center gap-2 sm:ml-0 md:justify-end xl:ml-auto xl:w-1/3">
+              <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>
+  )
+}
--- a/apps/v4/app/(create)/create/v0/route.ts
+++ b/apps/v4/app/(create)/create/v0/route.ts
@@ -0,0 +1,391 @@
+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
+    const registryBase = buildRegistryBase(designSystemConfig)
+    const validateResult = registryItemSchema.safeParse(registryBase)
+
+    if (!validateResult.success) {
+      return NextResponse.json(
+        {
+          error: "Invalid registry base item",
+          details: validateResult.error.format(),
+        },
+        { status: 500 }
+      )
+    }
+
+    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 files: z.infer<typeof registryItemFileSchema>[] = []
+
+  // Build globals.css file.
+  files.push(buildGlobalsCss(designSystemConfig))
+
+  // Build layout.tsx file.
+  files.push(buildLayoutFile(designSystemConfig))
+
+  // Build component files.
+  const componentFiles = await buildComponentFiles(designSystemConfig)
+  files.push(...componentFiles)
+
+  return registryItemSchema.parse({
+    name: designSystemConfig.item ?? "Item",
+    type: "registry:item",
+    files,
+  })
+}
+
+function buildGlobalsCss(designSystemConfig: DesignSystemConfig) {
+  const registryBase = buildRegistryBase(designSystemConfig)
+
+  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()
+}
--- a/apps/v4/app/(create)/hooks/use-canva.tsx
+++ b/apps/v4/app/(create)/hooks/use-canva.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  sendToIframe,
+  sendToParent,
+  useParentMessageListener,
+} from "@/app/(create)/hooks/use-iframe-sync"
+
+const MESSAGE_TYPE = "canva-zoom"
+
+export type ZoomCommand =
+  | { type: "ZOOM_IN" }
+  | { type: "ZOOM_OUT" }
+  | { type: "ZOOM_SET"; value: number }
+  | { type: "ZOOM_FIT" }
+  | { type: "RESET" }
+
+export function sendCanvaZoomCommand(
+  iframe: HTMLIFrameElement | null,
+  command: ZoomCommand
+) {
+  sendToIframe(iframe, MESSAGE_TYPE, { command })
+}
+
+export function sendCanvaZoomUpdate(zoom: number) {
+  sendToParent(MESSAGE_TYPE, { zoom })
+}
+
+export function useCanvaZoomSync() {
+  const [zoom, setZoom] = React.useState(1)
+
+  useParentMessageListener<{ zoom: number }>(MESSAGE_TYPE, (data) => {
+    if (typeof data.zoom === "number") {
+      setZoom(data.zoom)
+    }
+  })
+
+  return zoom
+}
--- a/apps/v4/app/(create)/hooks/use-design-system.tsx
+++ b/apps/v4/app/(create)/hooks/use-design-system.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { useQueryStates } from "nuqs"
+
+import {
+  createIframeSyncStore,
+  useIframeSyncAll,
+  useIframeSyncValue,
+} from "@/app/(create)/hooks/use-iframe-sync"
+import {
+  designSystemSearchParams,
+  type DesignSystemSearchParams,
+} from "@/app/(create)/lib/search-params"
+
+const MESSAGE_TYPE = "design-system-params"
+
+const getInitialValues = (): DesignSystemSearchParams => {
+  if (typeof window === "undefined") {
+    return {
+      base: "radix",
+      iconLibrary: "lucide",
+      theme: "neutral",
+      style: "vega",
+      font: "inter",
+      item: "cover-example",
+      baseColor: "neutral",
+      menuAccent: "subtle",
+      menuColor: "default",
+      radius: "default",
+      size: 100,
+      custom: false,
+      template: "next",
+    }
+  }
+
+  const searchParams = new URLSearchParams(window.location.search)
+  return {
+    base: (searchParams.get("base") ||
+      "radix") as DesignSystemSearchParams["base"],
+    iconLibrary: (searchParams.get("iconLibrary") ||
+      "lucide") as DesignSystemSearchParams["iconLibrary"],
+    theme: (searchParams.get("theme") ||
+      "neutral") as DesignSystemSearchParams["theme"],
+    style: (searchParams.get("style") ||
+      "vega") as DesignSystemSearchParams["style"],
+    font: (searchParams.get("font") ||
+      "inter") as DesignSystemSearchParams["font"],
+    item: searchParams.get("item") || "cover-example",
+    baseColor: (searchParams.get("baseColor") ||
+      "neutral") as DesignSystemSearchParams["baseColor"],
+    menuAccent: (searchParams.get("menuAccent") ||
+      "subtle") as DesignSystemSearchParams["menuAccent"],
+    menuColor: (searchParams.get("menuColor") ||
+      "default") as DesignSystemSearchParams["menuColor"],
+    radius: (searchParams.get("radius") ||
+      "default") as DesignSystemSearchParams["radius"],
+    size: parseInt(searchParams.get("size") || "100"),
+    custom: (searchParams.get("custom") || "false") === "true",
+    template: (searchParams.get("template") ||
+      "next") as DesignSystemSearchParams["template"],
+  }
+}
+
+const designSystemStore = createIframeSyncStore(
+  MESSAGE_TYPE,
+  getInitialValues()
+)
+
+export function useDesignSystemSync() {
+  const [urlParams] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+  })
+
+  const keys = Object.keys(
+    designSystemSearchParams
+  ) as (keyof DesignSystemSearchParams)[]
+
+  return useIframeSyncAll(designSystemStore, keys, urlParams)
+}
+
+export function useDesignSystemParam<K extends keyof DesignSystemSearchParams>(
+  key: K
+) {
+  const [urlParams] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+  })
+
+  return useIframeSyncValue(designSystemStore, key, urlParams[key])
+}
--- a/apps/v4/app/(create)/hooks/use-iframe-sync.tsx
+++ b/apps/v4/app/(create)/hooks/use-iframe-sync.tsx
@@ -0,0 +1,204 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client"
+
+import * as React from "react"
+
+export const isInIframe = () => {
+  if (typeof window === "undefined") {
+    return false
+  }
+  return window.self !== window.top
+}
+
+export function createIframeSyncStore<T extends Record<string, any>>(
+  messageType: string,
+  defaultValues: T
+) {
+  const store = new Map<keyof T, any>()
+  const listeners = new Map<keyof T, Set<() => void>>()
+
+  if (typeof window !== "undefined") {
+    Object.entries(defaultValues).forEach(([key, value]) => {
+      store.set(key as keyof T, value)
+    })
+  }
+
+  if (typeof window !== "undefined" && isInIframe()) {
+    window.addEventListener("message", (event: MessageEvent) => {
+      if (event.data.type === messageType && event.data.params) {
+        Object.keys(event.data.params).forEach((key) => {
+          const newValue = event.data.params[key]
+          const oldValue = store.get(key as keyof T)
+
+          if (newValue !== oldValue) {
+            store.set(key as keyof T, newValue)
+
+            const keyListeners = listeners.get(key as keyof T)
+            if (keyListeners) {
+              keyListeners.forEach((listener) => listener())
+            }
+          }
+        })
+      }
+    })
+  }
+
+  return {
+    store,
+    listeners,
+    subscribe(key: keyof T, callback: () => void) {
+      if (!isInIframe()) return () => {}
+
+      if (!listeners.has(key)) {
+        listeners.set(key, new Set())
+      }
+      const keyListeners = listeners.get(key)!
+      keyListeners.add(callback)
+
+      return () => {
+        keyListeners.delete(callback)
+        if (keyListeners.size === 0) {
+          listeners.delete(key)
+        }
+      }
+    },
+    subscribeAll(keys: (keyof T)[], callback: () => void) {
+      if (!isInIframe()) return () => {}
+
+      keys.forEach((key) => {
+        if (!listeners.has(key)) {
+          listeners.set(key, new Set())
+        }
+        listeners.get(key)!.add(callback)
+      })
+
+      return () => {
+        keys.forEach((key) => {
+          const keyListeners = listeners.get(key)
+          if (keyListeners) {
+            keyListeners.delete(callback)
+            if (keyListeners.size === 0) {
+              listeners.delete(key)
+            }
+          }
+        })
+      }
+    },
+    get(key: keyof T) {
+      return store.get(key) as T[keyof T]
+    },
+    getAll() {
+      const result = {} as T
+      store.forEach((value, key) => {
+        result[key as keyof T] = value
+      })
+      return result
+    },
+  }
+}
+
+export function useIframeSyncValue<T>(
+  store: ReturnType<typeof createIframeSyncStore<any>>,
+  key: string,
+  urlValue: T
+) {
+  const subscribe = React.useCallback(
+    (callback: () => void) => {
+      return store.subscribe(key, callback)
+    },
+    [store, key]
+  )
+
+  const getSnapshot = React.useCallback(() => {
+    if (!isInIframe()) {
+      return urlValue
+    }
+    return store.get(key) as T
+  }, [store, key, urlValue])
+
+  const getServerSnapshot = React.useCallback(() => {
+    return urlValue
+  }, [urlValue])
+
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}
+
+export function useIframeSyncAll<T extends Record<string, any>>(
+  store: ReturnType<typeof createIframeSyncStore<T>>,
+  keys: (keyof T)[],
+  urlValues: T
+) {
+  const subscribe = React.useCallback(
+    (callback: () => void) => {
+      return store.subscribeAll(keys, callback)
+    },
+    [store, keys]
+  )
+
+  const getSnapshot = React.useCallback(() => {
+    if (!isInIframe()) {
+      return urlValues
+    }
+    return store.getAll()
+  }, [store, urlValues])
+
+  const getServerSnapshot = React.useCallback(() => {
+    return urlValues
+  }, [urlValues])
+
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}
+
+export function useParentMessageListener<T>(
+  messageType: string,
+  onMessage: (data: T) => void
+) {
+  React.useEffect(() => {
+    if (isInIframe()) {
+      return
+    }
+
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data.type === messageType) {
+        onMessage(event.data)
+      }
+    }
+
+    window.addEventListener("message", handleMessage)
+    return () => {
+      window.removeEventListener("message", handleMessage)
+    }
+  }, [messageType, onMessage])
+}
+
+export function sendToIframe(
+  iframe: HTMLIFrameElement | null,
+  messageType: string,
+  data: any
+) {
+  if (!iframe || !iframe.contentWindow) {
+    return
+  }
+
+  iframe.contentWindow.postMessage(
+    {
+      type: messageType,
+      ...data,
+    },
+    "*"
+  )
+}
+
+export function sendToParent(messageType: string, data: any) {
+  if (!isInIframe()) {
+    return
+  }
+
+  window.parent.postMessage(
+    {
+      type: messageType,
+      ...data,
+    },
+    "*"
+  )
+}
--- a/apps/v4/app/(create)/hooks/use-locks.tsx
+++ b/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
+}
--- a/apps/v4/app/(create)/init/route.ts
+++ b/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 }
+    )
+  }
+}
--- a/apps/v4/app/(create)/lib/api.ts
+++ b/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 }
--- a/apps/v4/app/(create)/lib/constants.ts
+++ b/apps/v4/app/(create)/lib/constants.ts
@@ -0,0 +1 @@
+export const ALLOWED_ITEM_TYPES = ["registry:block", "registry:example"]
--- a/apps/v4/app/(create)/lib/fonts.ts
+++ b/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]
--- a/apps/v4/app/(create)/lib/merge-theme.ts
+++ b/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)
+}
--- a/apps/v4/app/(create)/lib/randomize-biases.ts
+++ b/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)
+}
--- a/apps/v4/app/(create)/lib/search-params.ts
+++ b/apps/v4/app/(create)/lib/search-params.ts
@@ -0,0 +1,75 @@
+import {
+  createSearchParamsCache,
+  parseAsBoolean,
+  parseAsInteger,
+  parseAsString,
+  parseAsStringLiteral,
+} 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"
+
+export const designSystemSearchParams = {
+  base: parseAsStringLiteral<BaseName>(BASES.map((b) => b.name)).withDefault(
+    DEFAULT_CONFIG.base
+  ),
+  item: parseAsString.withDefault("preview"),
+  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">([
+    "next",
+    "start",
+    "vite",
+  ]).withDefault("next"),
+  size: parseAsInteger.withDefault(100),
+  custom: parseAsBoolean.withDefault(false),
+}
+
+export const designSystemSearchParamsCache = createSearchParamsCache(
+  designSystemSearchParams
+)
+
+export type DesignSystemSearchParams = Awaited<
+  ReturnType<typeof designSystemSearchParamsCache.parse>
+>
--- a/apps/v4/app/(create)/lib/utils.ts
+++ b/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
+    })
+}
--- a/apps/v4/app/(create)/preview/[base]/[name]/page.tsx
+++ b/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 { RandomizeScript } from "@/app/(create)/components/customizer-controls"
+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 { 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>
+  )
+}
--- a/apps/v4/app/(examples)/dashboard-03/components/analytics-date-picker.tsx
+++ b/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"
--- a/apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx
+++ b/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 = [
--- a/apps/v4/app/(examples)/dashboard-03/components/chart-visitors.tsx
+++ b/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,
--- a/apps/v4/app/(examples)/dashboard-03/page.tsx
+++ b/apps/v4/app/(examples)/dashboard-03/page.tsx
@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import {
  DownloadIcon,
  FilterIcon,
--- a/apps/v4/app/(examples)/dashboard-03/settings/page.tsx
+++ b/apps/v4/app/(examples)/dashboard-03/settings/page.tsx
@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"

 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york-v4/ui/button"
--- a/apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx
+++ b/apps/v4/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,
--- a/apps/v4/app/(examples)/dashboard/components/data-table.tsx
+++ b/apps/v4/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 {
--- a/apps/v4/app/(internal)/sink/(pages)/next-form/actions.ts
+++ b/apps/v4/app/(internal)/sink/(pages)/next-form/actions.ts
@@ -1,6 +1,6 @@
 "use server"

-import { FormState } from "@/app/(internal)/sink/(pages)/next-form/example-form"
+import { type FormState } from "@/app/(internal)/sink/(pages)/next-form/example-form"
 import { exampleFormSchema } from "@/app/(internal)/sink/(pages)/schema"

 export async function subscriptionAction(
--- a/apps/v4/app/(internal)/sink/(pages)/next-form/example-form.tsx
+++ b/apps/v4/app/(internal)/sink/(pages)/next-form/example-form.tsx
@@ -2,7 +2,7 @@

 import * as React from "react"
 import Form from "next/form"
-import { z } from "zod"
+import { type z } from "zod"

 import { Button } from "@/registry/new-york-v4/ui/button"
 import {
@@ -48,7 +48,10 @@ import {
 import { Spinner } from "@/registry/new-york-v4/ui/spinner"
 import { Switch } from "@/registry/new-york-v4/ui/switch"
 import { Textarea } from "@/registry/new-york-v4/ui/textarea"
-import { addons, exampleFormSchema } from "@/app/(internal)/sink/(pages)/schema"
+import {
+  addons,
+  type exampleFormSchema,
+} from "@/app/(internal)/sink/(pages)/schema"

 import { subscriptionAction } from "./actions"

--- a/apps/v4/app/(internal)/sink/(pages)/react-hook-form/example-form.tsx
+++ b/apps/v4/app/(internal)/sink/(pages)/react-hook-form/example-form.tsx
@@ -4,7 +4,7 @@ import { useState } from "react"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { format } from "date-fns"
 import { Controller, useForm } from "react-hook-form"
-import z from "zod"
+import type z from "zod"

 import { Button } from "@/registry/new-york-v4/ui/button"
 import { Calendar } from "@/registry/new-york-v4/ui/calendar"
--- a/apps/v4/app/(internal)/sink/[name]/page.tsx
+++ b/apps/v4/app/(internal)/sink/[name]/page.tsx
@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import { notFound } from "next/navigation"

 import { componentRegistry } from "@/app/(internal)/sink/component-registry"
--- a/apps/v4/app/(internal)/sink/components/card-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/card-demo.tsx
@@ -188,6 +188,21 @@ export function CardDemo() {
          <CardContent className="text-sm">Content</CardContent>
          <CardFooter className="text-sm">Footer</CardFooter>
        </Card>
+        <Card>
+          <CardHeader className="border-b">
+            <CardTitle>Header with Border</CardTitle>
+            <CardDescription>
+              This is a card with a header that has a bottom border.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="text-sm">Content</CardContent>
+        </Card>
+        <Card>
+          <CardContent className="text-sm">Content</CardContent>
+          <CardFooter className="border-t text-sm">
+            Footer with Border
+          </CardFooter>
+        </Card>
      </div>
    </div>
  )
--- a/apps/v4/app/(internal)/sink/components/chart-area-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/chart-area-demo.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"

 export const description = "A simple area chart"
--- a/apps/v4/app/(internal)/sink/components/chart-bar-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/chart-bar-demo.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"

 export const description = "A multiple bar chart"
--- a/apps/v4/app/(internal)/sink/components/chart-bar-mixed.tsx
+++ b/apps/v4/app/(internal)/sink/components/chart-bar-mixed.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"

 export const description = "A mixed bar chart"
--- a/apps/v4/app/(internal)/sink/components/chart-line-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/chart-line-demo.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"

 export const description = "A multiple line chart"
--- a/apps/v4/app/(internal)/sink/components/date-picker-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/date-picker-demo.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 { useIsMobile } from "@/hooks/use-mobile"
--- a/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx
@@ -1,21 +1,6 @@
 "use client"

 import * as React from "react"
-import {
-  BadgeCheckIcon,
-  BellIcon,
-  ChevronsUpDownIcon,
-  CreditCardIcon,
-  LogOut,
-  LogOutIcon,
-  MoreHorizontalIcon,
-  PencilIcon,
-  Settings2Icon,
-  ShareIcon,
-  SparklesIcon,
-  TrashIcon,
-  UserIcon,
-} from "lucide-react"

 import {
  Avatar,
@@ -40,6 +25,7 @@ import {
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
 } from "@/registry/new-york-v4/ui/dropdown-menu"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

 export function DropdownMenuDemo() {
  return (
@@ -127,13 +113,28 @@ function DropdownMenuCheckboxes() {
        <DropdownMenuGroup>
          <DropdownMenuLabel>Account</DropdownMenuLabel>
          <DropdownMenuItem>
-            <UserIcon /> Profile
+            <IconPlaceholder
+              lucide="UserIcon"
+              tabler="IconUser"
+              hugeicons="UserIcon"
+            />
+            Profile
          </DropdownMenuItem>
          <DropdownMenuItem>
-            <CreditCardIcon /> Billing
+            <IconPlaceholder
+              lucide="CreditCardIcon"
+              tabler="IconCreditCard"
+              hugeicons="CreditCardIcon"
+            />
+            Billing
          </DropdownMenuItem>
          <DropdownMenuItem>
-            <Settings2Icon /> Settings
+            <IconPlaceholder
+              lucide="SettingsIcon"
+              tabler="IconSettings"
+              hugeicons="SettingsIcon"
+            />
+            Settings
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
@@ -162,7 +163,12 @@ function DropdownMenuCheckboxes() {
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
-            <LogOutIcon /> Sign Out
+            <IconPlaceholder
+              lucide="LogOutIcon"
+              tabler="IconLogout"
+              hugeicons="LogoutIcon"
+            />
+            Sign Out
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
@@ -212,7 +218,12 @@ function DropdownMenuWithAvatar() {
              shadcn@example.com
            </span>
          </div>
-          <ChevronsUpDownIcon className="text-muted-foreground ml-auto" />
+          <IconPlaceholder
+            lucide="ChevronsUpDownIcon"
+            tabler="IconChevronsUpDown"
+            hugeicons="ChevronUpDownIcon"
+            className="text-muted-foreground ml-auto"
+          />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent
@@ -236,28 +247,48 @@ function DropdownMenuWithAvatar() {
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
-            <SparklesIcon />
+            <IconPlaceholder
+              lucide="SparklesIcon"
+              tabler="IconSparkles"
+              hugeicons="SparklesIcon"
+            />
            Upgrade to Pro
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
-            <BadgeCheckIcon />
+            <IconPlaceholder
+              lucide="BadgeCheckIcon"
+              tabler="IconBadgeCheck"
+              hugeicons="BadgeCheckIcon"
+            />
            Account
          </DropdownMenuItem>
          <DropdownMenuItem>
-            <CreditCardIcon />
+            <IconPlaceholder
+              lucide="CreditCardIcon"
+              tabler="IconCreditCard"
+              hugeicons="CreditCardIcon"
+            />
            Billing
          </DropdownMenuItem>
          <DropdownMenuItem>
-            <BellIcon />
+            <IconPlaceholder
+              lucide="BellIcon"
+              tabler="IconBell"
+              hugeicons="BellIcon"
+            />
            Notifications
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
-          <LogOut />
+          <IconPlaceholder
+            lucide="LogOutIcon"
+            tabler="IconLogout"
+            hugeicons="LogoutIcon"
+          />
          Sign Out
        </DropdownMenuItem>
      </DropdownMenuContent>
@@ -306,28 +337,48 @@ function DropdownMenuAvatarOnly() {
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
-            <SparklesIcon />
+            <IconPlaceholder
+              lucide="SparklesIcon"
+              tabler="IconSparkles"
+              hugeicons="SparklesIcon"
+            />
            Upgrade to Pro
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
-            <BadgeCheckIcon />
+            <IconPlaceholder
+              lucide="BadgeCheckIcon"
+              tabler="IconBadgeCheck"
+              hugeicons="BadgeCheckIcon"
+            />
            Account
          </DropdownMenuItem>
          <DropdownMenuItem>
-            <CreditCardIcon />
+            <IconPlaceholder
+              lucide="CreditCardIcon"
+              tabler="IconCreditCard"
+              hugeicons="CreditCardIcon"
+            />
            Billing
          </DropdownMenuItem>
          <DropdownMenuItem>
-            <BellIcon />
+            <IconPlaceholder
+              lucide="BellIcon"
+              tabler="IconBell"
+              hugeicons="BellIcon"
+            />
            Notifications
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
-          <LogOut />
+          <IconPlaceholder
+            lucide="LogOutIcon"
+            tabler="IconLogout"
+            hugeicons="LogoutIcon"
+          />
          Sign Out
        </DropdownMenuItem>
      </DropdownMenuContent>
@@ -340,23 +391,39 @@ function DropdownMenuIconColor() {
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon">
-          <MoreHorizontalIcon />
+          <IconPlaceholder
+            lucide="MoreHorizontalIcon"
+            tabler="IconDots"
+            hugeicons="MoreHorizontalCircle01Icon"
+          />
          <span className="sr-only">Toggle menu</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
-        <DropdownMenuGroup className="*:data-[slot=dropdown-menu-item]:[&>svg]:text-muted-foreground">
+        <DropdownMenuGroup>
          <DropdownMenuItem>
-            <PencilIcon />
+            <IconPlaceholder
+              lucide="PencilIcon"
+              tabler="IconPencil"
+              hugeicons="EditIcon"
+            />
            Edit
          </DropdownMenuItem>
          <DropdownMenuItem>
-            <ShareIcon />
+            <IconPlaceholder
+              lucide="ShareIcon"
+              tabler="IconShare"
+              hugeicons="ShareIcon"
+            />
            Share
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem variant="destructive">
-            <TrashIcon />
+            <IconPlaceholder
+              lucide="TrashIcon"
+              tabler="IconTrash"
+              hugeicons="DeleteIcon"
+            />
            Delete
          </DropdownMenuItem>
        </DropdownMenuGroup>
--- a/apps/v4/app/(internal)/sink/components/field-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/field-demo.tsx
@@ -20,7 +20,7 @@ import {
  FolderIcon,
  MonitorIcon,
 } from "lucide-react"
-import { DateRange } from "react-day-picker"
+import { type DateRange } from "react-day-picker"

 import { cn } from "@/lib/utils"
 import {
--- a/apps/v4/app/(internal)/sink/page.tsx
+++ b/apps/v4/app/(internal)/sink/page.tsx
@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"

 import { componentRegistry } from "@/app/(internal)/sink/component-registry"
 import { ComponentWrapper } from "@/app/(internal)/sink/components/component-wrapper"
--- a/apps/v4/app/(sandbox)/sandbox/[style]/page.tsx
+++ b/apps/v4/app/(sandbox)/sandbox/[style]/page.tsx
@@ -1,105 +0,0 @@
-import { Metadata } from "next"
-import { notFound } from "next/navigation"
-
-import { siteConfig } from "@/lib/config"
-import { getRegistryComponent, getRegistryItems } from "@/lib/registry"
-import { absoluteUrl, cn } from "@/lib/utils"
-import { getStyle, STYLES } from "@/registry/styles"
-
-export const revalidate = false
-export const dynamic = "force-static"
-export const dynamicParams = false
-
-const allowedTypes = ["registry:example"]
-
-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{
-    style: string
-  }>
-}): Promise<Metadata> {
-  const { style: styleName } = await params
-  const style = getStyle(styleName)
-
-  if (!style) {
-    return {}
-  }
-
-  const title = style.title
-
-  return {
-    title,
-    openGraph: {
-      title,
-      type: "article",
-      url: absoluteUrl(`/sandbox/${style.name}`),
-      images: [
-        {
-          url: siteConfig.ogImage,
-          width: 1200,
-          height: 630,
-          alt: siteConfig.name,
-        },
-      ],
-    },
-    twitter: {
-      card: "summary_large_image",
-      title,
-      images: [siteConfig.ogImage],
-      creator: "@shadcn",
-    },
-  }
-}
-
-export async function generateStaticParams() {
-  return STYLES.map((style) => ({
-    style: style.name,
-  }))
-}
-
-export default async function BlockPage({
-  params,
-}: {
-  params: Promise<{
-    style: string
-  }>
-}) {
-  const { style: styleName } = await params
-  const style = getStyle(styleName)
-
-  if (!style) {
-    return notFound()
-  }
-
-  const items = await getRegistryItems(style.name, (item) =>
-    allowedTypes.includes(item.type)
-  )
-
-  if (items.length === 0) {
-    return notFound()
-  }
-
-  return (
-    <>
-      <div className={cn("grid gap-6")}>
-        {items
-          .filter((item) => item !== null)
-          .map((item) => {
-            const Component = getRegistryComponent(item.name, style.name)
-            if (!Component) {
-              return null
-            }
-            return (
-              <div
-                key={item.name}
-                className={cn("bg-background", item.meta?.container)}
-              >
-                <Component />
-              </div>
-            )
-          })}
-      </div>
-    </>
-  )
-}
--- a/apps/v4/app/(view)/view/[style]/[name]/component-preview.tsx
+++ b/apps/v4/app/(view)/view/[style]/[name]/component-preview.tsx
@@ -0,0 +1,5 @@
+import { cn } from "@/lib/utils"
+
+export function ComponentPreview({ children }: { children: React.ReactNode }) {
+  return <div className={cn("bg-background")}>{children}</div>
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export const ALLOWED_ITEM_TYPES = ["registry:block", "registry:example"]`