create() — ui Function Reference

Architecture documentation for the create() function in create.ts from the ui codebase.

Function typescript FrameworkTooling TemplateSync calls 5

Entity Profile

FrameworkTooling→ TemplateSync→ create() — ui Function Reference

Dependency Diagram

graph TD
  d6e73ad2_74c9_dd43_c275_b68a987b6b66["create()"]
  9461b7e1_0062_183b_052f_41abc70dee91["create.ts"]
  d6e73ad2_74c9_dd43_c275_b68a987b6b66 -->|defined in| 9461b7e1_0062_183b_052f_41abc70dee91
  d69893c4_0340_d5fe_65ed_220523fe9df0["getShadcnCreateUrl()"]
  d6e73ad2_74c9_dd43_c275_b68a987b6b66 -->|calls| d69893c4_0340_d5fe_65ed_220523fe9df0
  af1661e5_df1f_24d5_26b4_f2ff90ba860a["handlePresetOption()"]
  d6e73ad2_74c9_dd43_c275_b68a987b6b66 -->|calls| af1661e5_df1f_24d5_26b4_f2ff90ba860a
  f1f5dc89_813c_afbc_8cb6_4850da747abf["buildInitUrl()"]
  d6e73ad2_74c9_dd43_c275_b68a987b6b66 -->|calls| f1f5dc89_813c_afbc_8cb6_4850da747abf
  56c01a63_5907_6b2d_a507_d935d5ec6f68["runInit()"]
  d6e73ad2_74c9_dd43_c275_b68a987b6b66 -->|calls| 56c01a63_5907_6b2d_a507_d935d5ec6f68
  ba0f4496_7222_7a6f_3fda_c2848aadddc7["getTemplateFiles()"]
  d6e73ad2_74c9_dd43_c275_b68a987b6b66 -->|calls| ba0f4496_7222_7a6f_3fda_c2848aadddc7
  style d6e73ad2_74c9_dd43_c275_b68a987b6b66 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/commands/create.ts lines 57–247

  .action(async (name, opts) => {
    try {
      // If no preset provided, open create URL with template and rtl params.
      const hasNoPreset = !name && !opts.preset
      if (hasNoPreset) {
        const searchParams: Record<string, string> = {}
        if (opts.template) {
          searchParams.template = opts.template
        }
        if (opts.rtl) {
          searchParams.rtl = "true"

          // Recommend base-ui in RTL.
          searchParams.base = "base"
        }
        const createUrl = getShadcnCreateUrl(
          Object.keys(searchParams).length > 0 ? searchParams : undefined
        )
        logger.log("Build your own shadcn/ui.")
        logger.log(
          `You will be taken to ${highlighter.info(
            createUrl
          )} to build your custom design system.`
        )
        logger.break()

        const { proceed } = await prompts({
          type: "confirm",
          name: "proceed",
          message: "Open in browser?",
          initial: true,
        })

        if (proceed) {
          await open(createUrl)
        }

        process.exit(0)
      }

      // Prompt for project name if not provided.
      let projectName = name
      if (!projectName) {
        const { enteredName } = await prompts({
          type: "text",
          name: "enteredName",
          message: "What is your project named?",
          initial: opts.template ? `${opts.template}-app` : "my-app",
          format: (value: string) => value.trim(),
          validate: (name) => {
            const validation = validateProjectName(
              path.basename(path.resolve(name))
            )
            if (validation.validForNewPackages) {
              return true
            }
            return "Invalid project name. Name should be lowercase, URL-friendly, and not start with a period or underscore."
          },
        })

        if (!enteredName) {
          process.exit(0)
        }

        projectName = enteredName
      }

      // Prompt for template if not provided.
      let template = opts.template
      if (!template) {
        const { selectedTemplate } = await prompts({
          type: "select",
          name: "selectedTemplate",
          message: `Which ${highlighter.info(
            "template"
          )} would you like to use?`,
          choices: Object.entries(CREATE_TEMPLATES).map(([key, value]) => ({
            title: value,
            value: key,
          })),
        })