Docs: Introduce CLI customise command

.changeset/long-llamas-sell.md

@@ -0,0 +1,5 @@
+---
+'@fumadocs/cli': minor
+---
+
+Add customise command

apps/docs/content/docs/cli/index.mdx

@@ -5,8 +5,6 @@ description: The CLI tool that automates setups and installing components.
 
 ## Installation
 
-Note that it needs Fumadocs Core for minimal setup.
-
 ```package-install
 npm install @fumadocs/cli --save-dev
 ```
@@ -43,6 +41,14 @@ Make sure to use the latest version of CLI
 
 > This is highly Inspired by Shadcn UI.
 
+### Customise
+
+A simple way to customise Fumadocs layouts.
+
+```package-install
+npx fumadocs customise
+```
+
 ### Tree
 
 Generate files tree for Fumadocs UI `Files` component, using the `tree` command from your terminal.

apps/docs/content/docs/ui/customisation.mdx

@@ -53,8 +53,20 @@ Since the design system is built on Tailwind CSS, you can customise it [with CSS
 
 ### CLI
 
-If none of them suits you, Fumadocs CLI is a tool to install Fumadocs UI components and layouts to your codebase, similar to Shadcn UI. Allowing you to fully customise Fumadocs UI:
+Fumadocs CLI is a tool that installs components to your codebase, similar to Shadcn UI.
+
+```package-install
+npx fumadocs
+```
+
+Use it to install Fumadocs UI components:
 
 ```package-install
 npx fumadocs add
 ```
+
+Or customise layouts:
+
+```package-install
+npx fumadocs customise
+```

packages/cli/src/commands/customise.ts

@@ -1,4 +1,4 @@
-import { cancel, group, intro, select, confirm } from '@clack/prompts';
+import { cancel, group, intro, select, confirm, log } from '@clack/prompts';
 import picocolors from 'picocolors';
 import { add, type Resolver } from '@/commands/add';
 import type { Config } from '@/config';
@@ -31,12 +31,12 @@ export async function customise(resolver: Resolver, config: Config) {
               hint: 'for those who want to build their own variant from ground up.',
             },
             {
-              label: 'Start from the default one',
+              label: 'Start from default layout',
               value: 'full-default',
               hint: 'useful for adjusting small details.',
             },
             {
-              label: 'Start from the Notebook layout',
+              label: 'Start from Notebook layout',
               value: 'full-notebook',
               hint: 'useful for adjusting small details.',
             },
@@ -61,14 +61,33 @@ export async function customise(resolver: Resolver, config: Config) {
   );
 
   if (result.target === 'docs' && result.mode) {
+    if (result.page) await add('layouts/page', resolver, config);
+
     if (result.mode === 'minimal') {
       await add('layouts/docs-min', resolver, config);
-    } else if (result.mode === 'full-default') {
-      await add('layouts/docs', resolver, config);
-    } else if (result.mode === 'full-notebook') {
-      await add('layouts/notebook', resolver, config);
+    } else {
+      await add(
+        result.mode === 'full-default' ? 'layouts/docs' : 'layouts/notebook',
+        resolver,
+        config,
+      );
     }
 
-    if (result.page) await add('layouts/page', resolver, config);
+    log.info(
+      [
+        picocolors.bold('What is Next?'),
+        'You can check the installed components in `components/layouts`.',
+        picocolors.dim('---'),
+        'Open your `layout.tsx` files, replace the imports of components:',
+        picocolors.greenBright(
+          '`fumadocs-ui/layouts/docs` -> `@/components/layouts/docs`',
+        ),
+        result.page || result.mode === 'minimal'
+          ? picocolors.greenBright(
+              '`fumadocs-ui/page` -> `@/components/layouts/page`',
+            )
+          : '',
+      ].join('\n'),
+    );
   }
 }

packages/cli/test/out/extended/popover.json

@@ -12,13 +12,13 @@
     },
     {
       "imports": {},
-      "content": "export function useExample(): string {\n  return 'test';\n}\n",
-      "path": "hooks:use-example.ts"
+      "content": "export function Hello(): string {\n  return 'Hello';\n}\n",
+      "path": "components:nested/hello.tsx"
     },
     {
       "imports": {},
-      "content": "export function Hello(): string {\n  return 'Hello';\n}\n",
-      "path": "components:nested/hello.tsx"
+      "content": "export function useExample(): string {\n  return 'test';\n}\n",
+      "path": "hooks:use-example.ts"
     }
   ],
   "subComponents": [