refactor(init): use clack for prettier box styling

knip.json

@@ -28,6 +28,7 @@
         "test/fixtures/*"
       ],
       "ignoreDependencies": [
+        "@clack/prompts",
         "c12",
         "confbox",
         "consola",

packages/nuxi/package.json

@@ -32,6 +32,7 @@
     "prepack": "tsdown"
   },
   "devDependencies": {
+    "@clack/prompts": "^1.0.0-alpha.6",
     "@nuxt/kit": "^4.2.0",
     "@nuxt/schema": "^4.2.0",
     "@nuxt/test-utils": "^3.20.1",

packages/nuxi/src/commands/init.ts

@@ -5,6 +5,7 @@ import type { PackageManagerName } from 'nypm'
 import { existsSync } from 'node:fs'
 import process from 'node:process'
 
+import * as clack from '@clack/prompts'
 import { defineCommand } from 'citty'
 import { colors } from 'consola/utils'
 import { downloadTemplate, startShell } from 'giget'
@@ -466,22 +467,28 @@ export default defineCommand({
       await runCommand(addModuleCommand, args)
     }
 
+    logger.log(`\n✨ Nuxt project has been created with the \`${template.name}\` template.\n`)
+
     // Display next steps
-    logger.log(
-      `\n✨ Nuxt project has been created with the \`${template.name}\` template. Next steps:`,
-    )
     const relativeTemplateDir = relative(process.cwd(), template.dir) || '.'
     const runCmd = selectedPackageManager === 'deno' ? 'task' : 'run'
     const nextSteps = [
       !ctx.args.shell
       && relativeTemplateDir.length > 1
-      && `\`cd ${relativeTemplateDir}\``,
-      `Start development server with \`${selectedPackageManager} ${runCmd} dev\``,
+      && colors.cyan(`cd ${relativeTemplateDir}`),
+      colors.cyan(`${selectedPackageManager} ${runCmd} dev`),
     ].filter(Boolean)
 
-    for (const step of nextSteps) {
-      logger.log(` › ${step}`)
-    }
+    clack.box(`\n${nextSteps.map(step => ` › ${step}`).join('\n')}\n`, ` 👉 Next steps `, {
+      contentAlign: 'left',
+      titleAlign: 'left',
+      width: 'auto',
+      titlePadding: 2,
+      contentPadding: 2,
+      rounded: true,
+      includePrefix: false,
+      formatBorder: (text: string) => `${themeColor + text}\x1B[0m`,
+    })
 
     if (ctx.args.shell) {
       startShell(template.dir)

packages/nuxt-cli/package.json

@@ -33,6 +33,7 @@
     "prepack": "tsdown"
   },
   "dependencies": {
+    "@clack/prompts": "^1.0.0-alpha.6",
     "c12": "^3.3.1",
     "citty": "^0.1.6",
     "confbox": "^0.2.2",