Managing Guides | Client Guides

This guide explains how to manage the documentation system in your SaaS starter kit. You can add new guides, remove unnecessary ones, or completely remove the documentation system if you prefer.

ℹ️

About the Documentation System

The guides you're reading are built into the starter kit to help you customize and understand the codebase. You can keep them, modify them, or remove them entirely based on your needs.

Option 1: Adding a New Guide

If you want to document your own features or customizations, follow these steps to create a new guide.

Create Guide Directory

Create a new directory for your guide in the guides folder:

Terminal

1# Create directory for your new guide
2mkdir "src/app/(client-guides)/guides/your-guide-name"

Use lowercase with hyphens for the directory name (e.g., my-custom-feature).

Create Guide Page

Create a page.tsx file in your new directory:

src/app/(client-guides)/guides/your-guide-name/page.tsx

1import { GuideLayout } from "@/components/guides/layout/GuideLayout";
2import { StepCard } from "@/components/guides/content/StepCard";
3import { CodeBlock } from "@/components/guides/content/CodeBlock";
4import { CalloutBox } from "@/components/guides/content/CalloutBox";
5import { Sparkles } from "lucide-react";
6 
7export const metadata: Metadata = {
8  title: "Your Guide Title | Client Guides",
9  description: "Brief description of what this guide covers"
10};
11 
12export default function YourGuidePage() {
13  return (
14    <GuideLayout
15      title="Your Guide Title"
16      category="features" // or "getting-started", "customization", "development", "deployment"
17      description="Brief description of what this guide covers"
18      lastUpdated="2025-12-29"
19    >
20      <div className="flex items-center gap-3 mb-6">
21        <Sparkles className="w-8 h-8 text-primary-600" />
22        <p className="text-lg text-gray-700 dark:text-gray-300">
23          Introduction to your guide goes here.
24        </p>
25      </div>
26 
27      <CalloutBox type="info" title="Prerequisites">
28        <ul className="list-disc list-inside mt-2 space-y-1">
29          <li>Prerequisite 1</li>
30          <li>Prerequisite 2</li>
31        </ul>
32      </CalloutBox>
33 
34      <div className="mt-12">
35        <h2 className="text-2xl font-bold mb-6">Section Title</h2>
36 
37        <StepCard number={1} title="First Step">
38          <p className="mb-4">
39            Explanation of the first step.
40          </p>
41          <CodeBlock language="typescript" filename="example.ts">
42{`// Your code example here
43console.log("Hello, world!");`}
44          </CodeBlock>
45        </StepCard>
46 
47        <StepCard number={2} title="Second Step">
48          <p className="mb-4">
49            Explanation of the second step.
50          </p>
51        </StepCard>
52      </div>
53 
54      <div className="mt-12">
55        <CalloutBox type="tip" title="Helpful Tip">
56          Add helpful tips or warnings using CalloutBox components.
57        </CalloutBox>
58      </div>
59    </GuideLayout>
60  );
61}

Register Guide in Metadata

Add your guide to the metadata registry so it appears in the guides index:

src/app/(client-guides)/guides/lib/guides-data.tsx

1export const guides: GuideMetadata[] = [
2  // ... existing guides ...
3 
4  // Add your new guide here
5  {
6    id: "your-guide-name",
7    title: "Your Guide Title",
8    description: "Brief description of what this guide covers",
9    category: "features",
10    icon: "✨", // Choose an emoji icon
11  },
12];

Test Your Guide

Navigate to /guides to see your new guide in the index, then click it to verify it displays correctly.

💡

Live Reload

Your development server should automatically reload when you save the files. If not, restart it with npm run dev.

Option 2: Removing Specific Guides

If you don't need certain guides, you can remove them individually.

Delete Guide Directory

Remove the guide's directory from the filesystem:

Terminal

1# Delete a specific guide
2rm -rf "src/app/(client-guides)/guides/guide-name-to-remove"
3 
4# Or on Windows (PowerShell)
5Remove-Item -Recurse -Force "src/app/(client-guides)/guides/guide-name-to-remove"

Remove from Metadata Registry

Open src/app/(client-guides)/guides/lib/guides-data.tsx and remove the guide's entry from the guides array.

⚠️

Remove the Entire Object

Make sure to remove the entire guide object, not just one property.

Verify Build

Run a build to ensure no broken references remain:

Terminal

1npm run build

If you see errors about missing modules or broken links, search your codebase for references to the removed guide.

Option 3: Removing All Documentation

If you prefer not to have any documentation in your production app, you can remove the entire guides system.

⚠️

Permanent Deletion

This will permanently delete all guides. Make sure you've learned what you need from them before proceeding. Consider keeping a backup of the documentation in a separate branch or folder.

Delete Documentation Directories

Remove the following directories and files:

Directories to delete:

src/app/(client-guides)/
src/components/guides/
src/types/guides.ts

Terminal

1# On Windows (PowerShell)
2Remove-Item -Recurse -Force "src/app/(client-guides)"
3Remove-Item -Recurse -Force src/components/guides
4Remove-Item -Force src/types/guides.ts
5 
6# On macOS/Linux
7rm -rf "src/app/(client-guides)"
8rm -rf src/components/guides
9rm src/types/guides.ts

Remove Navigation Link

Remove or comment out the "Docs" link in src/config/site.config.ts:

src/config/site.config.ts

1export const siteConfig = {
2  // ... other config ...
3  navLinks: [
4    { label: "Pricing", href: "/pricing" },
5    // { label: "Docs", href: "/guides" }, // Remove this line
6  ],
7};

Verify Build

Test that your application builds successfully without the documentation:

Terminal

1npm run build

🚨

Build Errors?

If you see import errors, search your codebase for any remaining references:

bash

1# Search for references to guides
2grep -r "client-guides" src/
3grep -r "@/components/guides" src/
4grep -r "@/types/guides" src/

Test Locally

Start your production build and verify everything works:

Terminal

1npm start

Visit http://localhost:3000/guides and verify it returns a 404 error.

Available Components

When creating guides, you have access to these pre-built components:

GuideLayout

The main layout wrapper for all guides. Provides consistent styling, sidebar navigation, and breadcrumbs.

typescript

1<GuideLayout
2  title="Guide Title"
3  category="features"
4  description="Brief description"
5  lastUpdated="2025-12-29"
6>
7  {/* Your content */}
8</GuideLayout>

StepCard

Numbered step cards for sequential instructions.

typescript

1<StepCard number={1} title="Step Title">
2  <p>Step instructions go here.</p>
3</StepCard>

CodeBlock

Syntax-highlighted code blocks with copy button.

typescript

1<CodeBlock language="typescript" filename="example.ts">
2{`const greeting = "Hello, world!";`}
3</CodeBlock>

CalloutBox

Highlighted boxes for tips, warnings, info, and danger alerts.

typescript

1<CalloutBox type="info" title="Important Note">
2  <p>Your important message here.</p>
3</CalloutBox>
4 
5// Types: "info", "warning", "danger", "tip"

FileTree

Visual representation of directory structures.

typescript

1<FileTree
2  structure={{
3    "src/": {
4      "app/": {},
5      "components/": {},
6    }
7  }}
8/>

Screenshot

Display screenshots with captions.

typescript

1<Screenshot
2  src="/guides/screenshots/example.png"
3  alt="Description of screenshot"
4  caption="Optional caption"
5/>

Guide Categories

Guides are organized into categories. Use these category values when creating guides:

getting-started

Initial setup, prerequisites, installation, and environment configuration

customization

Theme colors, branding, logo, UI component customization

features

Feature documentation, admin dashboard, billing, database schema, OAuth

development

Adding API routes, database models, creating new features

deployment

Production deployment, environment setup, continuous deployment

Related Guides

Creating New Features

Complete workflow for building full-stack features

Production Deployment

Deploy your SaaS application to production

💡

Keep Documentation Updated

If you keep the documentation system, make sure to update guides as you customize the starter kit. This will help you and your team remember how features work.

This guide explains how to manage the documentation system in your SaaS starter kit. You can add new guides, remove unnecessary ones, or completely remove the documentation system if you prefer.

ℹ️

About the Documentation System

The guides you're reading are built into the starter kit to help you customize and understand the codebase. You can keep them, modify them, or remove them entirely based on your needs.

Option 1: Adding a New Guide

If you want to document your own features or customizations, follow these steps to create a new guide.

Create Guide Directory

Create a new directory for your guide in the guides folder:

Terminal

1# Create directory for your new guide
2mkdir "src/app/(client-guides)/guides/your-guide-name"

Use lowercase with hyphens for the directory name (e.g., my-custom-feature).

Create Guide Page

Create a page.tsx file in your new directory:

src/app/(client-guides)/guides/your-guide-name/page.tsx

1import { GuideLayout } from "@/components/guides/layout/GuideLayout";
2import { StepCard } from "@/components/guides/content/StepCard";
3import { CodeBlock } from "@/components/guides/content/CodeBlock";
4import { CalloutBox } from "@/components/guides/content/CalloutBox";
5import { Sparkles } from "lucide-react";
6 
7export const metadata: Metadata = {
8  title: "Your Guide Title | Client Guides",
9  description: "Brief description of what this guide covers"
10};
11 
12export default function YourGuidePage() {
13  return (
14    <GuideLayout
15      title="Your Guide Title"
16      category="features" // or "getting-started", "customization", "development", "deployment"
17      description="Brief description of what this guide covers"
18      lastUpdated="2025-12-29"
19    >
20      <div className="flex items-center gap-3 mb-6">
21        <Sparkles className="w-8 h-8 text-primary-600" />
22        <p className="text-lg text-gray-700 dark:text-gray-300">
23          Introduction to your guide goes here.
24        </p>
25      </div>
26 
27      <CalloutBox type="info" title="Prerequisites">
28        <ul className="list-disc list-inside mt-2 space-y-1">
29          <li>Prerequisite 1</li>
30          <li>Prerequisite 2</li>
31        </ul>
32      </CalloutBox>
33 
34      <div className="mt-12">
35        <h2 className="text-2xl font-bold mb-6">Section Title</h2>
36 
37        <StepCard number={1} title="First Step">
38          <p className="mb-4">
39            Explanation of the first step.
40          </p>
41          <CodeBlock language="typescript" filename="example.ts">
42{`// Your code example here
43console.log("Hello, world!");`}
44          </CodeBlock>
45        </StepCard>
46 
47        <StepCard number={2} title="Second Step">
48          <p className="mb-4">
49            Explanation of the second step.
50          </p>
51        </StepCard>
52      </div>
53 
54      <div className="mt-12">
55        <CalloutBox type="tip" title="Helpful Tip">
56          Add helpful tips or warnings using CalloutBox components.
57        </CalloutBox>
58      </div>
59    </GuideLayout>
60  );
61}

Register Guide in Metadata

Add your guide to the metadata registry so it appears in the guides index:

src/app/(client-guides)/guides/lib/guides-data.tsx

1export const guides: GuideMetadata[] = [
2  // ... existing guides ...
3 
4  // Add your new guide here
5  {
6    id: "your-guide-name",
7    title: "Your Guide Title",
8    description: "Brief description of what this guide covers",
9    category: "features",
10    icon: "✨", // Choose an emoji icon
11  },
12];

Test Your Guide

Navigate to /guides to see your new guide in the index, then click it to verify it displays correctly.

💡

Live Reload

Your development server should automatically reload when you save the files. If not, restart it with npm run dev.

Option 2: Removing Specific Guides

If you don't need certain guides, you can remove them individually.

Delete Guide Directory

Remove the guide's directory from the filesystem:

Terminal

1# Delete a specific guide
2rm -rf "src/app/(client-guides)/guides/guide-name-to-remove"
3 
4# Or on Windows (PowerShell)
5Remove-Item -Recurse -Force "src/app/(client-guides)/guides/guide-name-to-remove"

Remove from Metadata Registry

Open src/app/(client-guides)/guides/lib/guides-data.tsx and remove the guide's entry from the guides array.

⚠️

Remove the Entire Object

Make sure to remove the entire guide object, not just one property.

Verify Build

Run a build to ensure no broken references remain:

Terminal

1npm run build

If you see errors about missing modules or broken links, search your codebase for references to the removed guide.

Option 3: Removing All Documentation

If you prefer not to have any documentation in your production app, you can remove the entire guides system.

⚠️

Permanent Deletion

This will permanently delete all guides. Make sure you've learned what you need from them before proceeding. Consider keeping a backup of the documentation in a separate branch or folder.

Delete Documentation Directories

Remove the following directories and files:

Directories to delete:

src/app/(client-guides)/
src/components/guides/
src/types/guides.ts

Terminal

1# On Windows (PowerShell)
2Remove-Item -Recurse -Force "src/app/(client-guides)"
3Remove-Item -Recurse -Force src/components/guides
4Remove-Item -Force src/types/guides.ts
5 
6# On macOS/Linux
7rm -rf "src/app/(client-guides)"
8rm -rf src/components/guides
9rm src/types/guides.ts

Remove Navigation Link

Remove or comment out the "Docs" link in src/config/site.config.ts:

src/config/site.config.ts

1export const siteConfig = {
2  // ... other config ...
3  navLinks: [
4    { label: "Pricing", href: "/pricing" },
5    // { label: "Docs", href: "/guides" }, // Remove this line
6  ],
7};

Verify Build

Test that your application builds successfully without the documentation:

Terminal

1npm run build

🚨

Build Errors?

If you see import errors, search your codebase for any remaining references:

bash

1# Search for references to guides
2grep -r "client-guides" src/
3grep -r "@/components/guides" src/
4grep -r "@/types/guides" src/

Test Locally

Start your production build and verify everything works:

Terminal

1npm start

Visit http://localhost:3000/guides and verify it returns a 404 error.

Available Components

When creating guides, you have access to these pre-built components:

GuideLayout

The main layout wrapper for all guides. Provides consistent styling, sidebar navigation, and breadcrumbs.

typescript

1<GuideLayout
2  title="Guide Title"
3  category="features"
4  description="Brief description"
5  lastUpdated="2025-12-29"
6>
7  {/* Your content */}
8</GuideLayout>

StepCard

Numbered step cards for sequential instructions.

typescript

1<StepCard number={1} title="Step Title">
2  <p>Step instructions go here.</p>
3</StepCard>

CodeBlock

Syntax-highlighted code blocks with copy button.

typescript

1<CodeBlock language="typescript" filename="example.ts">
2{`const greeting = "Hello, world!";`}
3</CodeBlock>

CalloutBox

Highlighted boxes for tips, warnings, info, and danger alerts.

typescript

1<CalloutBox type="info" title="Important Note">
2  <p>Your important message here.</p>
3</CalloutBox>
4 
5// Types: "info", "warning", "danger", "tip"

FileTree

Visual representation of directory structures.

typescript

1<FileTree
2  structure={{
3    "src/": {
4      "app/": {},
5      "components/": {},
6    }
7  }}
8/>

Screenshot

Display screenshots with captions.

typescript

1<Screenshot
2  src="/guides/screenshots/example.png"
3  alt="Description of screenshot"
4  caption="Optional caption"
5/>

Guide Categories

Guides are organized into categories. Use these category values when creating guides:

getting-started

Initial setup, prerequisites, installation, and environment configuration

customization

Theme colors, branding, logo, UI component customization

features

Feature documentation, admin dashboard, billing, database schema, OAuth

development

Adding API routes, database models, creating new features

deployment

Production deployment, environment setup, continuous deployment

Related Guides

Creating New Features

Complete workflow for building full-stack features

Production Deployment

Deploy your SaaS application to production

💡

Keep Documentation Updated

If you keep the documentation system, make sure to update guides as you customize the starter kit. This will help you and your team remember how features work.