[Page Title]

[Brief 1-2 sentence introduction explaining what this page covers and who it's for]

Image Examples

See the Step-By-Step Examples page for examples of using images in a step-by-step fashion.

Diagram Examples

See the Mermaid Examples page for examples of diagrams using Mermaid.

---

Getting started

[Brief overview section - what the reader needs before starting]

Prerequisites

• [Required knowledge, tools, or setup]
• [Link to relevant documentation if needed]

1. Step one description:

   # Command with explanation
   pnpm install package-name

2. Step two description:

   path/to/file.ts

   import { ExampleType } from '@/types';
   
   export const exampleFunction = (): ExampleType => {
     return result;
   };

---

Implementation

Basic setup

[Step-by-step implementation guide]

1. Create the base structure:

   types/example.ts

   import { z } from 'zod';
   
   // Define schema with Zod for validation
   export const ExampleSchema = z.object({
     id: z.string(),
     name: z.string().min(1),
     email: z.string().email(),
   });
   
   export type Example = z.infer<typeof ExampleSchema>;

2. Implement the main functionality:

   lib/example-service.ts

   import { Example, ExampleSchema } from '@/types/example';
   
   /**
    * Creates a new example resource
    * @param data - Example data to create
    * @returns Promise resolving to created example
    * @throws {ValidationError} When data is invalid
    */
   export async function createExample(data: unknown): Promise<Example> {
     try {
       const validatedData = ExampleSchema.parse(data);
       return validatedData;
     } catch (error) {
       throw new Error(`Validation failed: ${error.message}`);
     }
   }

Advanced configuration

[More complex setup or configuration options]

Configuration options

Option	Type	Default	Description
apiUrl	string	/api/v1	Base API URL
timeout	number	5000	Request timeout in ms
retries	number	3	Number of retry attempts

Environment variables

Create a .env.local file with these variables:

.env.local

# Example service configuration
EXAMPLE_API_KEY=your_api_key_here
EXAMPLE_API_URL=https://api.example.com/v1

---

Step-by-step processes

Using steps with images

For tutorials or guides with multiple steps that require screenshots or images:

Flow

Step 1
Login screen

Step 2
Dashboard view

Step 3
Settings panel

Step 4
Confirmation

Step 1: Initial setup

Start by opening the application and navigating to the main dashboard.

Figure 1: Main dashboard with navigation highlighted

Step 2: Configure settings

Click on the Settings gear icon in the top-right corner to open the configuration panel.

Figure 2: Settings panel (resized for better readability)

Step 3: Apply changes

Review your settings and click "Save Changes" to apply the configuration.

Figure 3: Save confirmation dialog

Alternative: Using admonitions for steps

Step 1: Create the project

Initialize your new project with the following command:

pnpm create next-app@latest my-project

Step 2: Install dependencies

Navigate to your project and install the required packages:

cd my-project && pnpm install

Step 3: Start development

Launch the development server:

pnpm dev

Using tabs for different approaches

Using GUI

Step 1: Open the interface

Navigate to the visual interface and click "New Project".

Step 2: Configure options

Fill in the project details in the form.

Using CLI

Step 1: Run the command

Execute the project creation command:

npx create-project my-app

Step 2: Answer prompts

Respond to the interactive prompts:

? Project name: my-app
? Use TypeScript: Yes
? Install dependencies: Yes

Image on the left, text on the right

Step 1: Initial Login

Start by opening the application and entering your credentials on the login screen. Make sure to use your company email address and the password provided during onboarding. If this is your first time logging in, you may need to change your password.

Step 2: Navigate Dashboard

Once logged in, you'll see the main dashboard with various widgets and navigation options. Take a moment to familiarize yourself with the layout. The left sidebar contains the main navigation menu, while the center panel shows your recent activities and notifications.

Use Mermaid for diagrams