setOpen(false)}
+ />
+
+ )
+}
+
+export function ItemPickerScript() {
+ return (
+
+ )
+}
diff --git a/apps/v4/app/(create)/components/lock-button.tsx b/apps/v4/app/(create)/components/lock-button.tsx
new file mode 100644
index 0000000000..773144a1cf
--- /dev/null
+++ 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 (
+
+
+
+
+ {locked ? "Unlock" : "Lock"}
+
+ )
+}
diff --git a/apps/v4/app/(create)/components/menu-picker.tsx b/apps/v4/app/(create)/components/menu-picker.tsx
new file mode 100644
index 0000000000..5539cf9ed2
--- /dev/null
+++ 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: (
+
+ ),
+ },
+ {
+ value: "inverted" as const,
+ label: "Inverted",
+ icon: (
+
+ ),
+ },
+] as const
+
+export function MenuColorPicker({
+ isMobile,
+ anchorRef,
+}: {
+ isMobile: boolean
+ anchorRef: React.RefObject
+}) {
+ 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 (
+
+
+
+
+
Menu Color
+
+ {currentMenu?.label}
+
+
+ {currentMenu?.icon}
+
+
+
+
+
Preset
+
+ {currentPreset?.description ?? "Custom"}
+
+
+ {style?.icon && (
+
+ {React.cloneElement(style.icon, {
+ className: "size-4",
+ })}
+
+ )}
+ {preset.description}
+
+
{
+ if (newValue) {
+ setUrlParams({ size: parseInt(newValue) })
+ }
+ }}
+ className="gap-1 *:data-[slot=toggle-group-item]:!size-6 *:data-[slot=toggle-group-item]:!rounded-sm"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Radius
+
+ {currentRadius?.label}
+
+
+
+
+
{defaultRadius.label}
+
+ Use radius from style
+
+
+
+
+
Style
+
+ {currentStyle?.title}
+
+
+ {React.cloneElement(currentStyle.icon, {
+ className: "size-4",
+ })}
+
+ )}
+
+
+
+ {style.icon && (
+
+ {React.cloneElement(style.icon, {
+ className: "size-4",
+ })}
+
+ )}
+
+
{style.title}
+
+ {style.description}
+
+
+
+
Template
+
+ {currentTemplate?.title}
+
+
+
+
+
Theme
+
+ {currentTheme?.title}
+
+
+
+
+ {mounted && resolvedTheme && (
+
+ )}
+
+
{theme.title}
+
+ Match base color
+
+
+
+ {mounted && resolvedTheme && (
+
+ )}
+ {theme.title}
+
Open current design in v0
+
+
+
+ )
+}
diff --git a/apps/v4/app/(create)/components/welcome-dialog.tsx b/apps/v4/app/(create)/components/welcome-dialog.tsx
new file mode 100644
index 0000000000..589dec5c3b
--- /dev/null
+++ 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 (
+
+ )
+}
diff --git a/apps/v4/app/(create)/create/layout.tsx b/apps/v4/app/(create)/create/layout.tsx
new file mode 100644
index 0000000000..201653ada0
--- /dev/null
+++ 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 {children}
+}
diff --git a/apps/v4/app/(create)/create/page.tsx b/apps/v4/app/(create)/create/page.tsx
new file mode 100644
index 0000000000..dbe7d7a5aa
--- /dev/null
+++ 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
+}) {
+ 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 (
+
+
+
+
+
+
+
+
+ New Project
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+