diff --git a/apps/v4/app/(create)/components/project-form.tsx b/apps/v4/app/(create)/components/project-form.tsx
index 4140527e74..cd3755c688 100644
--- a/apps/v4/app/(create)/components/project-form.tsx
+++ b/apps/v4/app/(create)/components/project-form.tsx
@@ -32,7 +32,6 @@ import {
RadioGroup,
RadioGroupItem,
} from "@/registry/new-york-v4/ui/radio-group"
-import { Switch } from "@/registry/new-york-v4/ui/switch"
import {
Tabs,
TabsContent,
@@ -40,6 +39,7 @@ import {
TabsTrigger,
} from "@/registry/new-york-v4/ui/tabs"
import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { FieldSeparator } from "@/examples/radix/ui/field"
const TEMPLATES = [
{
@@ -47,11 +47,6 @@ const TEMPLATES = [
title: "Next.js",
logo: '',
},
- {
- value: "next-monorepo",
- title: "Next.js (Monorepo)",
- logo: '',
- },
{
value: "start",
title: "TanStack Start",
@@ -62,6 +57,11 @@ const TEMPLATES = [
title: "Vite",
logo: '',
},
+ {
+ value: "next-monorepo",
+ title: "Next.js (Monorepo)",
+ logo: '',
+ },
] as const
export function ProjectForm() {
@@ -74,7 +74,7 @@ export function ProjectForm() {
const commands = React.useMemo(() => {
const origin = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:4000"
- 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}&rtl=${params.rtl}`
+ 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}&rtl=${params.rtl}&new=${params.new}`
const rtlFlag = params.rtl ? " --rtl" : ""
const templateFlag = params.template ? ` --template ${params.template}` : ""
const isLocalDev = origin.includes("localhost")
@@ -131,6 +131,12 @@ export function ProjectForm() {
}
}, [hasCopied])
+ React.useEffect(() => {
+ if (!params.new && params.template === "next-monorepo") {
+ setParams({ template: "next" })
+ }
+ }, [params.new, params.template, setParams])
+
const handleCopy = React.useCallback(() => {
const properties: Record = {
command,
@@ -160,25 +166,58 @@ export function ProjectForm() {
Create Project
-
+
- {params.new
- ? "Create Project"
- : "Initialize Project"}
+ Create Project
- Run this command to initialize shadcn/ui in your project.
+ Configure your project to use shadcn/ui.
-
+
+
-
- Select a template
-
+ Are you creating a new project?
+ setParams({ new: value === "new" })}
+ className="grid grid-cols-2 gap-2"
+ >
+
+
+
+ Yes
+ I'm creating a new project.
+
+
+
+
+
+
+
+ No
+
+ I have an existing project.
+
+
+
+
+
+
- Which template would you like to use?
+ {params.new
+ ? `The cli will create a new project, install dependencies, add CSS variables and utils, configure dark mode and add an example component.`
+ : `The cli will install dependencies, add CSS variables and utils in your existing project.`}
+
+
+
+
+ {params.new
+ ? "Choose a starter template"
+ : "What framework is your existing project using?"}
+
- {TEMPLATES.map((template) => (
-
-
-
- {template.logo && (
-
- )}
- {template.title}
-
-
- ))}
-
-
-
-
-
- Existing Project
-
- Initialize shadcn/ui in an existing project.
-
-
-
- setParams({ new: !checked })
- }
- className="shadow-none"
- />
-
-
+ {TEMPLATES.map((template) => {
+ const isDisabled = !params.new && template.value === "next-monorepo"
-
-
-
- Enable RTL
-
-
- View the RTL setup guide for {selectedTemplate?.title}.
-
-
-
- setParams({ rtl })}
- className="shadow-none"
- />
-
-
+
+
+ {template.logo ? (
+
+ ) : null}
+ {template.title}
+
+
+ )
+ })}
+
+
+ See the installation guides for more templates and frameworks.
+
+
+
+
+ Do you want to enable RTL?
+ setParams({ rtl: value === "yes" })}
+ className="grid grid-cols-2 gap-2"
+ >
+
+
+
+ No
+
+ Use default left-to-right layout.
+
+
+
+
+
+
+
+
+ Yes
+
+ Enable right-to-left support.
+
+
+
+
+
+
+
+ To learn more about RTL, see the
+ RTL setup guide
+ for {selectedTemplate?.title}.
+
+
diff --git a/apps/v4/app/(create)/init/route.ts b/apps/v4/app/(create)/init/route.ts
index 606edba2a7..6b13e04652 100644
--- a/apps/v4/app/(create)/init/route.ts
+++ b/apps/v4/app/(create)/init/route.ts
@@ -20,6 +20,7 @@ export async function GET(request: NextRequest) {
radius: searchParams.get("radius"),
template: searchParams.get("template") ?? undefined,
rtl: searchParams.get("rtl") === "true",
+ new: searchParams.get("new") !== "false",
})
if (!result.success) {
diff --git a/apps/v4/registry/config.ts b/apps/v4/registry/config.ts
index bfe1e20b6e..edfdda7418 100644
--- a/apps/v4/registry/config.ts
+++ b/apps/v4/registry/config.ts
@@ -98,6 +98,7 @@ export const designSystemConfigSchema = z
.enum(["next", "next-monorepo", "start", "vite"])
.default("next")
.optional(),
+ new: z.boolean().default(true),
})
.refine(
(data) => {
diff --git a/packages/shadcn/src/commands/init.ts b/packages/shadcn/src/commands/init.ts
index a3e91bc6e7..66a8450ca2 100644
--- a/packages/shadcn/src/commands/init.ts
+++ b/packages/shadcn/src/commands/init.ts
@@ -281,7 +281,7 @@ export const init = new Command()
// Build create URL with template param.
const createUrl = getShadcnCreateUrl({
- command: "init",
+ new: hasPackageJson ? "false" : "true",
...(opts.rtl && { rtl: "true" }),
...(opts.template && { template: opts.template }),
})