### Project Setup: Quick Start Commands (Bash)

Source: https://context7.com/shadcnstore/shadcn-dashboard-landing-template/llms.txt

This snippet provides essential bash commands for setting up the Shadcn Dashboard + Landing Page Template. It includes cloning the repository, navigating into the project, installing dependencies, and starting development servers for both Vite and Next.js versions. It also covers build, preview, start, and lint commands.

```bash
# Clone the repository
git clone https://github.com/silicondeck/shadcn-dashboard-landing-template
cd shadcn-dashboard-landing-template

# Vite version (recommended for development)
cd vite-version
pnpm install
pnpm dev          # http://localhost:5173

# Next.js version (production-ready)
cd nextjs-version
pnpm install
pnpm dev          # http://localhost:3000

# Build commands
pnpm build        # Production build
pnpm preview      # Preview production build (Vite)
pnpm start        # Start production server (Next.js)
pnpm lint         # Run linter
```

--------------------------------

### Clone and Install Next.js Version (SSR/SSG)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/guide/installation.md

Clones the repository, navigates to the Next.js version directory, installs dependencies using pnpm, and starts the development server for Server-Side Rendering or Static Site Generation.

```bash
git clone https://github.com/silicondeck/shadcn-dashboard-landing-template.git
cd shadcn-dashboard-landing-template/nextjs-version
pnpm install
pnpm dev
```

--------------------------------

### Install Project Dependencies with pnpm

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/vite/quick-start.md

Installs all necessary project dependencies using pnpm. Ensure pnpm is installed and added to your PATH. This step is crucial before starting the development server.

```bash
pnpm install
```

--------------------------------

### Install and Run Local Development Server (Bash)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/README.md

Installs project dependencies using pnpm and starts the local development server. It also provides an alternative convenience script for starting the server. The documentation will be accessible at http://localhost:5173.

```bash
# Install dependencies
pnpm install

# Start development server
pnpm dev
# or use the convenience script
./dev.sh

# Documentation will be available at http://localhost:5173
```

--------------------------------

### Install Dependencies with Degit and Start Server (Bash)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/quick-start.md

This option uses degit to clone only the Next.js version of the template without Git history. It then installs dependencies using pnpm and starts the development server.

```bash
# Clone only the Next.js version without git history
npx degit your-username/shadcn-dashboard/nextjs-version my-admin-app
cd my-admin-app

# Install dependencies
pnpm install

# Start development server
pnpm dev
```

--------------------------------

### Clone and Install Vite Version (SPA)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/guide/installation.md

Clones the repository, navigates to the Vite version directory, installs dependencies using pnpm, and starts the development server for a Single Page Application.

```bash
git clone https://github.com/silicondeck/shadcn-dashboard-landing-template.git
cd shadcn-dashboard-landing-template/vite-version
pnpm install
pnpm dev
```

--------------------------------

### Start Development Server (Bash)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/development.md

Commands to start the Next.js development server. Navigate to the project directory and run `pnpm dev` to start the standard server or `pnpm dev:turbo` to enable the experimental Turbopack.

```bash
cd nextjs-version
pnpm dev
```

```bash
pnpm dev:turbo
```

--------------------------------

### Clone Repository and Install Dependencies (Bash)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/quick-start.md

This snippet demonstrates how to clone the Shadcn Dashboard template repository using Git, navigate into the Next.js version directory, install project dependencies using pnpm, and start the development server.

```bash
# Clone the repository
git clone https://github.com/your-username/shadcn-dashboard.git
cd shadcn-dashboard

# Navigate to Next.js version
cd nextjs-version

# Install dependencies
pnpm install

# Start development server
pnpm dev
```

--------------------------------

### Install and Run Next.js Version

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/guide/choosing-framework.md

Commands to install dependencies and start the development server for the Next.js version of the template. Assumes you have pnpm installed.

```bash
cd nextjs-version
pnpm install
pnpm dev
```

--------------------------------

### PM2 Deployment Commands

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/build-deploy.md

Commands to install PM2, start the application using an ecosystem file, and manage processes.

```bash
# Install PM2
npm install -g pm2

# Create ecosystem file
# (See ecosystem.config.js above)

# Deploy with PM2
pm2 start ecosystem.config.js
pm2 startup
pm2 save
```

--------------------------------

### Install and Run Vite Version

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/guide/choosing-framework.md

Commands to install dependencies and start the development server for the Vite version of the template. Assumes you have pnpm installed.

```bash
cd vite-version
pnpm install
pnpm dev
```

--------------------------------

### Environment Configuration Example (.env.local)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/quick-start.md

Example of environment variables for local development. This file should not be committed to version control. It includes settings for application name, API configuration, feature flags, and authentication.

```dotenv
# Application
NEXT_PUBLIC_APP_NAME="ShadcnStore Admin"
NEXT_PUBLIC_APP_DESCRIPTION="Modern admin dashboard template"

# API Configuration
NEXT_PUBLIC_API_URL="http://localhost:3001"

# Feature Flags
NEXT_PUBLIC_THEME_CUSTOMIZER="true"
NEXT_PUBLIC_ANALYTICS="false"

# Database (if using)
DATABASE_URL="postgresql://..."

# Authentication (if using)
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key"
```

--------------------------------

### Set Up Vitest for Component Testing

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/vite/development.md

This snippet details the setup for component testing using Vitest and `@testing-library/react`. It includes installing the necessary dependencies and configuring Vitest in `vite.config.ts` to use the JSDOM environment and a setup file. The example test verifies button rendering and class application.

```typescript
// src/components/__tests__/button.test.tsx
import { render, screen } from '@testing-library/react'
import { Button } from '../ui/button'

describe('Button', () => {
  it('renders with correct text', () => {
    render(<Button>Click me</Button>)
    expect(screen.getByRole('button')).toHaveTextContent('Click me')
  })

  it('applies variant classes correctly', () => {
    render(<Button variant="destructive">Delete</Button>)
    expect(screen.getByRole('button')).toHaveClass('bg-destructive')
  })
})
```

```bash
# Install testing dependencies
pnpm add -D vitest @testing-library/react @testing-library/jest-dom

# Add to vite.config.ts
export default defineConfig({
  test: {
    environment: 'jsdom',
    setupFiles: ['./src/test/setup.ts'],
  },
})
```

--------------------------------

### Common Development and Build Commands

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/guide/installation.md

Provides essential commands for managing the development server, building for production, and previewing the production build across different frameworks.

```bash
pnpm dev          # Start development server
pnpm build        # Build for production
pnpm preview      # Preview build (Vite)
pnpm start        # Start production server (Next.js)
```

--------------------------------

### Next.js Bundle Analyzer Setup

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/build-deploy.md

Steps to add and configure the `@next/bundle-analyzer` package to analyze the size of your Next.js application's JavaScript bundles. This involves installing the package, modifying `next.config.ts`, and running the build with an environment variable.

```bash
# Install bundle analyzer
pnpm add -D @next/bundle-analyzer

# Add to next.config.ts
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer(nextConfig)

# Run analysis
ANALYZE=true pnpm build
```

--------------------------------

### Run Development Commands (Next.js)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/README.md

Commands to start the development server, build for production, start the production server, and run the Next.js linter for the Next.js version of the template.

```bash
pnpm dev          # Start development server
pnpm build        # Build for production
pnpm start        # Start production server
pnpm lint         # Run Next.js linter
```

--------------------------------

### Code Quality Commands

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/guide/installation.md

Includes commands for maintaining code quality, such as linting for issues and performing TypeScript validation.

```bash
pnpm lint         # Check for issues
pnpm type-check   # TypeScript validation
```

--------------------------------

### Run Development Commands (Vite)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/README.md

Commands to start the development server, build for production, preview the production build, and run ESLint for the Vite version of the template.

```bash
pnpm dev          # Start development server
pnpm build        # Build for production
pnpm preview      # Preview production build
pnpm lint         # Run ESLint
```

--------------------------------

### Troubleshooting Port Conflicts

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/guide/installation.md

Offers solutions for common issues like port conflicts by allowing you to specify an alternative port for the development server.

```bash
pnpm dev -- --port 5174  # Vite
pnpm dev -p 3001         # Next.js
```

--------------------------------

### Preview Production Build

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/vite/quick-start.md

Serves the production build locally for previewing. This helps verify the production output before deploying.

```bash
pnpm preview
```

--------------------------------

### Start Development Server (Bash)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/quick-start.md

Command to start the Next.js development server. This enables features like Hot Module Replacement and Fast Refresh for an efficient development workflow.

```bash
pnpm dev
```

--------------------------------

### Clone and Install Dependencies (Bash)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/guide/contributing.md

This snippet shows how to clone the repository, navigate into the project directory, and install dependencies for both the Vite and Next.js versions of the template using pnpm. It also includes instructions for installing dependencies for the documentation site.

```bash
# Fork the repository on GitHub
# Then clone your fork
git clone https://github.com/YOUR_USERNAME/shadcn-dashboard-landing-template.git
cd shadcn-dashboard-landing-template

# Add upstream remote
git remote add upstream https://github.com/silicondeck/shadcn-dashboard-landing-template.git

# Install dependencies for both versions
cd vite-version && pnpm install
cd ../nextjs-version && pnpm install
cd ../docs && pnpm install

# Start development servers
# Vite version
cd vite-version && pnpm dev

# Next.js version
cd nextjs-version && pnpm dev

# Documentation
cd docs && pnpm dev
```

--------------------------------

### Build Project for Production

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/vite/quick-start.md

Compiles and bundles the project for production deployment. This command optimizes assets and generates static files.

```bash
pnpm build
```

--------------------------------

### Deploy to Vercel with CLI

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/vite/build-deploy.md

These bash commands guide the manual deployment of a Vite application to Vercel using the Vercel CLI. It covers installing the CLI, initiating a production deployment, and deploying to the production environment.

```bash
# Install Vercel CLI
npm i -g vercel

# Deploy from command line
vercel

# Production deployment
vercel --prod
```

--------------------------------

### HTML Setup for Font Loading in index.html

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/vite/index.md

Configures font loading using `<link>` tags in the `index.html` file for Vite projects. It includes preconnect directives for Google Fonts and specifies the 'Inter' font with optimal character sets for performance. This setup is crucial for consistent typography across the application.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Google Fonts preconnect for performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    
    <!-- Inter font with optimal character sets -->
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    
    <title>Shadcn Dashboard + Landing Page Template</title>
  </head>
  <body class="font-sans antialiased">
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
```

--------------------------------

### Vite Client-Side Routing Example (JavaScript)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/guide/choosing-framework.md

Demonstrates basic client-side routing setup using React Router DOM in a Vite environment. This is suitable for Single Page Applications (SPAs) where routing is handled entirely on the client.

```javascript
import { BrowserRouter, Routes, Route } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/analytics" element={<Analytics />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </BrowserRouter>
  )
}
```

--------------------------------

### Analyze Bundle Size with Next.js Bundle Analyzer in Bash

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/index.md

This command-line snippet shows how to install and use the Next.js bundle analyzer to inspect the size of your application's bundles. It involves installing a dev dependency and running the build command with an environment variable. Dependencies include npm/yarn.

```bash
# Install bundle analyzer
npm install -D @next/bundle-analyzer

# Analyze bundles
ANALYZE=true npm run build
```

--------------------------------

### Theme Configuration Types and Example

Source: https://context7.com/shadcnstore/shadcn-dashboard-landing-template/llms.txt

Defines the TypeScript interfaces for theme presets, color themes, and imported themes. It includes an example of a custom theme structure, illustrating how to define styles for both light and dark modes using CSS variable key-value pairs.

```typescript
// Theme preset structure for custom themes
interface ThemePreset {
  label?: string
  styles: {
    light: Record<string, string>  // CSS variable values for light mode
    dark: Record<string, string>   // CSS variable values for dark mode
  }
}

// Color theme for dropdown selection
interface ColorTheme {
  name: string      // Display name
  value: string     // Unique identifier
  preset: ThemePreset
}

// Imported theme structure (e.g., from tweakcn)
interface ImportedTheme {
  light: Record<string, string>
  dark: Record<string, string>
}

// Example custom theme
const customTheme: ThemePreset = {
  label: "Ocean Blue",
  styles: {
    light: {
      "background": "0 0% 100%",
      "foreground": "222.2 84% 4.9%",
      "primary": "221.2 83.2% 53.3%",
      "primary-foreground": "210 40% 98%",
      "secondary": "210 40% 96.1%",
      "accent": "210 40% 96.1%",
      "muted": "210 40% 96.1%",
    },
    dark: {
      "background": "222.2 84% 4.9%",
      "foreground": "210 40% 98%",
      "primary": "217.2 91.2% 59.8%",
      "primary-foreground": "222.2 84% 4.9%",
    }
  }
}
```

--------------------------------

### Reinstall Dependencies

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/vite/quick-start.md

Removes the 'node_modules' directory and 'pnpm-lock.yaml' file, then reinstalls dependencies. This is useful for resolving issues caused by corrupted or outdated dependencies.

```bash
rm -rf node_modules pnpm-lock.yaml
pnpm install
```

--------------------------------

### Docker Build and Run Commands

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/build-deploy.md

Commands to build the Docker image and run a container for the shadcn-dashboard-landing-template.

```bash
# Build Docker image
docker build -t shadcn-admin .

# Run container
docker run -p 3000:3000 shadcn-admin
```

--------------------------------

### Change Development Server Port

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/vite/quick-start.md

Starts the development server on a specified port (e.g., 3001) if the default port (5173) is already in use. This resolves port conflict issues.

```bash
pnpm dev --port 3001
```

--------------------------------

### Start Vite Development Server (Bash)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/vite/development.md

Commands to start the Vite development server for the Shadcn Dashboard + Landing Page Template. Supports custom ports and network access for mobile testing. Relies on pnpm package manager.

```bash
# Start development server
pnpm dev

# Start with custom port
pnpm dev --port 3001

# Start with network access
pnpm dev --host
```

--------------------------------

### Build Docker Image with pnpm

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/vite/build-deploy.md

This Dockerfile defines the steps to build a production-ready Docker image for the application. It installs pnpm, copies project files, installs dependencies, builds the application, and then copies the built assets into an Nginx server for serving static content. It exposes port 80 and sets the command to run Nginx.

```dockerfile
FROM node:alpine AS build

WORKDIR /app

# Copy package files
COPY package*.json pnpm-lock.yaml ./

# Install pnpm and dependencies
RUN npm install -g pnpm && pnpm install

# Copy source code
COPY . .

# Build application
RUN pnpm build

# Production stage
FROM nginx:alpine

# Copy built assets
COPY --from=build /app/dist /usr/share/nginx/html

# Copy nginx configuration
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]
```

--------------------------------

### Navigate to Vite Version Directory

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/vite/quick-start.md

Changes the current directory to the 'vite-version' subdirectory within the cloned repository. This isolates the Vite-specific project files.

```bash
cd vite-version
```

--------------------------------

### Create Dynamic Routes with Parameters in Next.js

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/index.md

This example shows how to create dynamic routes in Next.js using the App Router. It defines a page that accepts a user ID parameter, fetches user data, and displays the user's profile. It also includes `generateMetadata` for dynamic SEO title and description generation.

```typescript
// src/app/(dashboard)/users/[id]/page.tsx
interface UserPageProps {
  params: Promise<{ id: string }>
}

export default async function UserPage({ params }: UserPageProps) {
  const { id } = await params
  
  // Fetch user data (this could be from an API)
  const user = await getUserById(id)
  
  return (
    <div>
      <h1>User Profile: {user.name}</h1>
      {/* User details */}
    </div>
  )
}

// Generate metadata for SEO
export async function generateMetadata({ params }: UserPageProps) {
  const { id } = await params
  const user = await getUserById(id)
  
  return {
    title: `${user.name} - User Profile`,
    description: `Profile page for ${user.name}`,
  }
}
```

--------------------------------

### AWS S3 Bucket Setup for Static Website Hosting

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/vite/build-deploy.md

These bash commands outline the process of setting up an AWS S3 bucket for static website hosting. It includes creating the bucket, configuring it to serve 'index.html' as the index document and error document, and synchronizing the local 'dist' directory content to the bucket.

```bash
# Create S3 bucket
aws s3 mb s3://your-bucket-name

# Configure bucket for static website hosting
aws s3 website s3://your-bucket-name --index-document index.html --error-document index.html

# Upload files
aws s3 sync dist/ s3://your-bucket-name --delete
```

--------------------------------

### Build and Preview Documentation (Bash)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/README.md

Builds the documentation for production deployment and then previews the production build locally. This allows for testing the final output before deploying.

```bash
# Build for production
pnpm build

# Preview production build
pnpm preview
```

--------------------------------

### Resolve Dependency Issues with pnpm

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/build-deploy.md

Clears the project's cache and reinstall dependencies using pnpm. This is useful when encountering dependency conflicts or corrupted installations. It removes Next.js build artifacts, node_modules, and the pnpm-lock file before a fresh install.

```bash
# Clear cache and reinstall
rm -rf .next node_modules pnpm-lock.yaml
pnpm install
pnpm build
```

--------------------------------

### Next.js Loading UI Example (TypeScript)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/development.md

Provides an example of a loading UI component (`loading.tsx`) in Next.js. This component is displayed while data is being fetched or components are loading, often using skeleton loaders to provide a perceived faster load time.

```typescript
// app/(dashboard)/loading.tsx
import { Skeleton } from '@/components/ui/skeleton'

export default function Loading() {
  return (
    <div className="space-y-4">
      <Skeleton className="h-8 w-64" />
      <Skeleton className="h-32 w-full" />
      <Skeleton className="h-32 w-full" />
    </div>
  )
}
```

--------------------------------

### API Routes for User Data (GET, POST)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/development.md

Defines API endpoints for fetching and creating user data. Implements GET and POST methods using Next.js `NextRequest` and `NextResponse`. Handles potential errors during database operations. Located in `app/api/users/route.ts`.

```typescript
// app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server'

export async function GET(request: NextRequest) {
  try {
    // Fetch users from database or external API
    const users = await fetchUsers()
    
    return NextResponse.json(users)
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to fetch users' },
      { status: 500 }
    )
  }
}

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const user = await createUser(body)
    
    return NextResponse.json(user, { status: 201 })
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to create user' },
      { status: 500 }
    )
  }
}
```

--------------------------------

### Deploy to Vercel (Bash)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/README.md

Provides the command-line instruction to deploy the documentation project to Vercel. It also mentions the option to link to a Git repository for automatic deployments.

```bash
# Deploy to Vercel
vercel

# or link to a Git repository for automatic deployments
```

--------------------------------

### Set up GitHub Actions CI/CD Pipeline

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/build-deploy.md

Defines a GitHub Actions workflow for continuous integration and deployment. It includes steps for testing (linting, type checking, unit tests) and deploying to Vercel.

```yaml
# .github/workflows/deploy.yml
name: Deploy to Production

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'pnpm'
      
      - name: Install pnpm
        run: npm install -g pnpm
      
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      
      - name: Run linting
        run: pnpm lint
      
      - name: Run type checking
        run: pnpm type-check
      
      - name: Run tests
        run: pnpm test
      
      - name: Build application
        run: pnpm build
        env:
          NEXT_PUBLIC_APP_URL: ${{ secrets.NEXT_PUBLIC_APP_URL }}

  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    
    steps:
      - uses: actions/checkout@v4
      
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'

```

--------------------------------

### Integrate Sentry for Error Monitoring

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/build-deploy.md

Installs the Sentry SDK for Next.js and provides client and server-side initialization configurations. Requires `NEXT_PUBLIC_SENTRY_DSN` environment variable.

```bash
pnpm add @sentry/nextjs
```

```typescript
// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs'

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 1.0,
  environment: process.env.NODE_ENV,
})
```

```typescript
// sentry.server.config.ts
import * as Sentry from '@sentry/nextjs'

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 1.0,
})
```

--------------------------------

### shadcn/ui Button Component Structure

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/components/shadcn-ui.md

Illustrates the internal structure of a shadcn/ui component, using the Button as an example. It showcases the use of `class-variance-authority` for defining variants and sizes, and `cn` for utility class merging.

```typescript
// Example: Button component structure
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }
```

--------------------------------

### Netlify Deployment Configuration (Bash)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/README.md

Specifies the build command and publish directory required for deploying the documentation to Netlify. This configuration ensures Netlify correctly builds and serves the VitePress site.

```bash
# Build command: pnpm build
# Publish directory: .vitepress/dist
```

--------------------------------

### Deploy Next.js App to Vercel CLI

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/build-deploy.md

Commands to install the Vercel CLI, log in, and deploy a Next.js application to Vercel. This covers both initial deployment and subsequent production deployments.

```bash
# Install Vercel CLI
pnpm add -g vercel

# Login and deploy
vercel login
vercel

# Build and deploy
pnpm build
vercel --prod
```

--------------------------------

### Configure Jest for Next.js Project Testing

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/development.md

Set up Jest configuration for a Next.js project using `jest.config.js`. This configuration integrates with Next.js and specifies setup files and the testing environment.

```javascript
// jest.config.js
const nextJest = require('next/jest')

const createJestConfig = nextJest({
  dir: './',
})

const config = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom',
}

module.exports = createJestConfig(config)
```

--------------------------------

### Next.js Runtime Environment Validation with Zod

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/build-deploy.md

TypeScript code snippet for validating environment variables at runtime using Zod. This ensures that required variables are present and correctly formatted before the application starts, improving robustness.

```typescript
// lib/env.ts
import { z } from 'zod'

const envSchema = z.object({
  NODE_ENV: z.enum(['development', 'production', 'test']),
  NEXT_PUBLIC_APP_URL: z.string().url(),
  DATABASE_URL: z.string().optional(),
  NEXTAUTH_SECRET: z.string().min(1),
})

export const env = envSchema.parse({
  NODE_ENV: process.env.NODE_ENV,
  NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
  DATABASE_URL: process.env.DATABASE_URL,
  NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
})
```

--------------------------------

### Clone Shadcn Dashboard Vite Template

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/vite/quick-start.md

Clones the Shadcn Dashboard + Landing Page Template repository and navigates into the project directory. This is the first step to set up the project locally.

```bash
git clone https://github.com/silicondeck/shadcn-dashboard-landing-template.git
cd shadcn-dashboard-landing-template
```

--------------------------------

### Available Scripts for Project Management (Bash)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/quick-start.md

A list of common npm/pnpm scripts for managing the Next.js project, including development, building, code quality checks, and dependency management.

```bash
# Development
pnpm dev              # Start development server
pnpm dev:turbo        # Start with Turbopack (experimental)

# Building
pnpm build            # Create production build
pnpm start            # Start production server

# Code Quality
pnpm lint             # Run ESLint
pnpm lint:fix         # Fix ESLint errors automatically
pnpm type-check       # Run TypeScript type checking

# Dependencies
pnpm add [package]    # Add new dependency
pnpm update           # Update all dependencies
```

--------------------------------

### Access Server-Side Environment Variables in Next.js

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/development.md

Access server-side environment variables within your Next.js application's backend logic. This example demonstrates accessing DATABASE_URL and JWT_SECRET for database and authentication configurations.

```typescript
// lib/database.ts
const dbUrl = process.env.DATABASE_URL
const jwtSecret = process.env.JWT_SECRET
```

--------------------------------

### Run ESLint for Code Linting

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/vite/quick-start.md

Executes ESLint to check the codebase for potential errors and enforce coding standards. This helps maintain code quality.

```bash
pnpm lint
```

--------------------------------

### Access Client-Side Environment Variables in Next.js

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/development.md

Access client-side environment variables, prefixed with NEXT_PUBLIC_, within your Next.js application components. This example shows how to use NEXT_PUBLIC_API_URL to construct API fetch requests.

```typescript
// components/api-client.tsx
const apiUrl = process.env.NEXT_PUBLIC_API_URL

export async function fetchData(endpoint: string) {
  const response = await fetch(`${apiUrl}${endpoint}`)
  return response.json()
}
```

--------------------------------

### Implement Health Check Endpoint

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/build-deploy.md

Creates a GET API endpoint at `/api/health` that returns the application's health status, including a timestamp and uptime. Includes placeholder comments for checking database connections and external services.

```typescript
// app/api/health/route.ts
import { NextResponse } from 'next/server'

export async function GET() {
  try {
    // Check database connection
    // Check external services
    
    return NextResponse.json({
      status: 'healthy',
      timestamp: new Date().toISOString(),
      uptime: process.uptime(),
    })
  } catch (error) {
    return NextResponse.json(
      { status: 'unhealthy', error: error.message },
      { status: 500 }
    )
  }
}

```

--------------------------------

### Build and Preview Testing (Bash)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/guide/contributing.md

Provides commands to test the build and preview processes for both Vite and Next.js versions of the project. This ensures that the application can be successfully built and served in both environments.

```bash
# Test Vite build
cd vite-version
pnpm build && pnpm preview

# Test Next.js build
cd nextjs-version
pnpm build && pnpm start

```

--------------------------------

### Vercel Project Configuration for Next.js

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/build-deploy.md

JSON configuration object for Vercel project settings, specifying the framework, build command, output directory, and install command for a Next.js application. Also includes region and function-specific configurations.

```json
{
  "buildCommand": "pnpm build",
  "devCommand": "pnpm dev",
  "installCommand": "pnpm install",
  "framework": "nextjs",
  "regions": ["iad1"],
  "functions": {
    "app/api/**/*.ts": {
      "maxDuration": 30
    }
  }
}
```

--------------------------------

### Next.js Production Environment Variables

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/build-deploy.md

Example `.env.production` file defining essential environment variables for a Next.js application in a production environment. Includes settings for application name, URL, API configuration, authentication secrets, and analytics.

```bash
# Application
NEXT_PUBLIC_APP_NAME="ShadcnStore Admin"
NEXT_PUBLIC_APP_URL="https://yourdomain.com"

# API Configuration
NEXT_PUBLIC_API_URL="https://api.yourdomain.com"
DATABASE_URL="postgresql://user:pass@host:5432/dbname"

# Security
NEXTAUTH_URL="https://yourdomain.com"
NEXTAUTH_SECRET="your-production-secret"
JWT_SECRET="your-jwt-secret"

# Analytics
NEXT_PUBLIC_GA_ID="G-XXXXXXXXXX"
NEXT_PUBLIC_ANALYTICS_ENABLED="true"

# Feature flags
NEXT_PUBLIC_THEME_CUSTOMIZER="true"
NEXT_PUBLIC_MAINTENANCE_MODE="false"
```

--------------------------------

### Component Variants with class-variance-authority

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/components/shadcn-ui.md

Demonstrates how to define component variants using the `class-variance-authority` (cva) library. This allows for creating reusable and type-safe variants for components based on different properties like 'variant' and 'size'. The example shows default variants and how to extend them.

```typescript
const cardVariants = cva(
  "rounded-lg border bg-card text-card-foreground shadow-sm",
  {
    variants: {
      variant: {
        default: "border-border",
        destructive: "border-destructive",
        outline: "border-2",
      },
      size: {
        default: "p-6",
        sm: "p-4",
        lg: "p-8",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

```

--------------------------------

### Write Component Tests with React Testing Library

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/development.md

Implement component tests for a React application using React Testing Library and Jest. This example demonstrates how to render a Button component and assert its presence in the document.

```typescript
// __tests__/components/Button.test.tsx
import { render, screen } from '@testing-library/react'
import { Button } from '@/components/ui/button'

describe('Button', () => {
  it('renders correctly', () => {
    render(<Button>Click me</Button>)
    
    const button = screen.getByRole('button', { name: /click me/i })
    expect(button).toBeInTheDocument()
  })
})
```

--------------------------------

### Custom Button Styling with Tailwind CSS

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/components/shadcn-ui.md

Illustrates how to apply custom styling to a shadcn/ui Button component using Tailwind CSS classes. This example shows how to override default styles and apply a background gradient and text color for a unique visual appearance.

```typescript
<Button 
  variant="outline" 
  className="bg-gradient-to-r from-blue-500 to-purple-600 text-white"
>
  Custom Button
</Button>

```

--------------------------------

### Import and Use Shadcn UI Components

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/components/index.md

Demonstrates how to import and use core UI components like Button and Card from the shadcn/ui library, along with a custom DataTable component. This example assumes a standard project setup with shadcn/ui configured.

```typescript
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { DataTable } from '@/components/data-table'

function MyComponent() {
  return (
    <Card>
      <Button>Click me</Button>
    </Card>
  )
}
```

--------------------------------

### Git Workflow for Contributing to Shadcn Dashboard Landing Template

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/README.md

This snippet outlines the standard Git workflow for contributing to the project. It includes steps for forking the repository, creating a feature branch, making changes, committing, pushing, and opening a pull request. This process ensures organized and trackable contributions.

```bash
git checkout -b my-feature
git commit -m "Add new feature"
git push origin my-feature
```

--------------------------------

### Next.js Error Boundary Example (TypeScript)

Source: https://github.com/shadcnstore/shadcn-dashboard-landing-template/blob/main/docs/nextjs/development.md

Demonstrates an error boundary component (`error.tsx`) in Next.js. This component catches errors that occur during rendering in a route segment and allows you to display a fallback UI. It includes a button to reset the error boundary.

```typescript
// app/(dashboard)/error.tsx
"use client"

import { Button } from '@/components/ui/button'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div className="flex flex-col items-center justify-center min-h-[400px] space-y-4">
      <h2 className="text-xl font-semibold">Something went wrong!</h2>
      <Button onClick={reset}>Try again</Button>
    </div>
  )
}
```