snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

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

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

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

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

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

@@ -0,0 +1,77 @@
+import { Suspense } from "react"
+import { type Metadata } from "next"
+import dynamic from "next/dynamic"
+
+import { siteConfig } from "@/lib/config"
+import { absoluteUrl } from "@/lib/utils"
+import { Skeleton } from "@/styles/base-nova/ui/skeleton"
+import { Customizer } from "@/app/(app)/(create)/components/customizer"
+import { PresetHandler } from "@/app/(app)/(create)/components/preset-handler"
+import { Preview } from "@/app/(app)/(create)/components/preview"
+import { PreviewOverrideProvider } from "@/app/(app)/(create)/components/preview-override"
+import { getAllItems } from "@/app/(app)/(create)/lib/api"
+
+// Only shown on first visit (checks localStorage).
+const WelcomeDialog = dynamic(() =>
+  import("@/app/(app)/(create)/components/welcome-dialog").then(
+    (m) => m.WelcomeDialog
+  )
+)
+
+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 function CreatePage() {
+  return (
+    <div className="relative z-10 flex min-h-0 flex-1 flex-col overflow-hidden section-soft [--customizer-width:--spacing(48)] [--gap:--spacing(4)] md:[--gap:--spacing(6)] 2xl:[--customizer-width:--spacing(56)]">
+      <div
+        data-slot="designer"
+        className="flex min-h-0 flex-1 flex-col gap-(--gap) p-(--gap) pt-[calc(var(--gap)*0.25)] md:flex-row-reverse"
+      >
+        <PreviewOverrideProvider>
+          <Preview />
+          <Suspense
+            fallback={
+              <Skeleton className="isolate min-h-[151px] w-full self-start rounded-2xl md:h-full md:max-h-full md:min-h-0 md:w-(--customizer-width)" />
+            }
+          >
+            <CustomizerLoader />
+          </Suspense>
+        </PreviewOverrideProvider>
+      </div>
+      <PresetHandler />
+      <WelcomeDialog />
+    </div>
+  )
+}
+
+async function CustomizerLoader() {
+  const itemsByBase = await getAllItems()
+  return <Customizer itemsByBase={itemsByBase} />
+}