Shadcn Dashboard

https://shadcndashboard.dev/docs
Admin
Shadcn Dashboard is a customizable UI ecosystem built on shadcn/ui, providing production-ready...
Tokens:18,524
Snippets:237
Trust Score:5
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install multiple items

Source: https://shadcndashboard.dev/docs/getting-started/how-to-use-shadcn-cli

Install multiple components or blocks in a single command to speed up project setup.

```bash
npx shadcn@latest add @shadcn-dashboard/button-06 @shadcn-dashboard/animated-text-01
```

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

### Install components and blocks with CLI v2

Source: https://shadcndashboard.dev/docs/getting-started/how-to-use-shadcn-cli

Use these commands for legacy setups that require direct registry JSON URLs instead of namespaces.

```bash
npx shadcn@latest add https://shadcndashboard.dev/r/health-banner.json
```

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

### Install dependencies

Source: https://shadcndashboard.dev/docs/admin-template/quick-start

Navigate to the project directory and install required packages.

```bash
cd project-folder
npm install
```

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

### Install dependencies

Source: https://shadcndashboard.dev/docs/admin-template/react-quick-start

Navigate to the project directory and install required packages.

```bash
cd ReactJS/main
npm install
```

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

### Initialize Environment File

Source: https://shadcndashboard.dev/docs/admin-template/supabase-env

Copy the example environment file to the project root to begin configuration.

```bash
cp .env.example .env
```

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

### Start development server

Source: https://shadcndashboard.dev/docs/admin-template/quick-start

Run the project in development mode.

```bash
npm run dev
```

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

### Install components and blocks with CLI v3

Source: https://shadcndashboard.dev/docs/getting-started/how-to-use-shadcn-cli

Use these commands to install components or blocks when using the namespace-based registry in CLI v3.

```bash
npx shadcn@latest add @shadcn-dashboard/button-06
```

```bash
npx shadcn@latest add @shadcn-dashboard/update-banner
```

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

### Install Required Dependencies

Source: https://shadcndashboard.dev/docs/admin-template/supabase-packages

Install the necessary Supabase and Prisma packages for the project.

```bash
npm install @supabase/supabase-js @prisma/client @prisma/adapter-pg prisma dotenv tsx
```

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

### Install components via package manager

Source: https://shadcndashboard.dev/docs/getting-started/how-to-use-shadcn-cli

Standard command to install a component using the project's configured package manager.

```bash
npx shadcn@latest add @shadcn-dashboard/button-06
```

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

### Install Clerk SDK

Source: https://shadcndashboard.dev/docs/admin-template/react-auth

Install the required Clerk React SDK dependency.

```bash
npm install @clerk/clerk-react
```

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

### Install MCP Server for Other Clients

Source: https://shadcndashboard.dev/docs/getting-started/mcp-server

Use this command for other supported IDEs like Cursor or Windsurf by replacing the client placeholder.

```bash
npx shadcndashboard-cli install <client>
```

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

### Install a block using the CLI

Source: https://shadcndashboard.dev/docs/getting-started/blocks

Use the Shadcn CLI to automatically add a specific block and its dependencies to your project.

```bash
npx shadcn@latest add @shadcn-dashboard/update-banner
```

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

### Install MCP Server via Claude Code

Source: https://shadcndashboard.dev/docs/getting-started/mcp-server

Use this command to register the MCP server specifically for Claude Code.

```bash
claude mcp add shadcndashboard-mcp -- npx -y shadcndashboard-mcp@latest
```

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

### Define Theme Color Overrides

Source: https://shadcndashboard.dev/docs/admin-template/color

Simplified example showing how to override primary and secondary colors for light and dark themes.

```css
:root {
  --primary: oklch(0.205 0 0);
  --secondary: oklch(0.97 0 0);
}

.dark {
  --primary: oklch(0.922 0 0);
  --secondary: oklch(0.269 0 0);
}
```

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

### Build project

Source: https://shadcndashboard.dev/docs/admin-template/quick-start

Compile the project for production.

```bash
npm run build
```

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

### Build and preview production

Source: https://shadcndashboard.dev/docs/admin-template/react-quick-start

Commands for creating a production build and previewing the output locally.

```bash
npm run build
```

```bash
npm run preview
```

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

### Initialize a Next.js project with Shadcn UI

Source: https://shadcndashboard.dev/docs/getting-started/how-to-use-shadcn-cli

Run this command in your terminal to create a new project configured with the specified preset, base, and template.

```bash
npx shadcn@latest init --preset b0 --base base --template next
```

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

### Configure Global Fetchers

Source: https://shadcndashboard.dev/docs/admin-template/api-calls

Defines reusable fetcher functions for GET, POST, PUT, PATCH, and DELETE methods in app/api/global-fetcher.ts.

```typescript
// app/api/global-fetcher.ts

const getFetcher = (url: string) =>
  fetch(url, {
    method: 'GET',
    headers: { browserrefreshed: 'false' },
  }).then((res) => {
    if (!res.ok) {
      throw new Error('Failed to fetch the data')
    }
    return res.json()
  })

const postFetcher = (url: string, arg: unknown) =>
  fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(arg),
  }).then((res) => {
    if (!res.ok) {
      throw new Error('Failed to post data')
    }
    return res.json()
  })

const putFetcher = (url: string, arg: unknown) =>
  fetch(url, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(arg),
  }).then((res) => {
    if (!res.ok) {
      throw new Error('Failed to updated data')
    }
    return res.json()
  })

const patchFetcher = (url: string, arg: unknown) =>
  fetch(url, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(arg),
  }).then((res) => {
    if (!res.ok) {
      throw new Error('Failed to updated data')
    }
    return res.json()
  })

const deleteFetcher = (url: string, arg: unknown) =>
  fetch(url, {
    method: 'DELETE',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(arg),
  }).then((res) => {
    if (!res.ok) {
      throw new Error('Failed to delete data')
    }
    return res.json()
  })

export { getFetcher, postFetcher, putFetcher, deleteFetcher, patchFetcher }
```

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

### Initialize React App with Authentication

Source: https://shadcndashboard.dev/docs/admin-template/react-auth

Configures the application entry point by wrapping the app in theme, customizer, and authentication providers, while initializing MSW mock workers.

```typescript
// src/main.tsx
import { Suspense } from 'react';
import { createRoot } from 'react-dom/client';
import './css/globals.css';
import App from './App.tsx';
import Spinner from './views/spinner/Spinner.tsx';
import { CustomizerContextProvider } from './context/CustomizerContext.tsx';
import './utils/i18n';
import { ThemeProvider } from './context/shadcntheme/ThemeContext.tsx';
import { AuthProvider } from 'src/guards/auth/AuthContext.tsx';

async function deferRender() {
  const { worker } = await import('./api/mocks/browser.ts');
  return worker.start({ onUnhandledRequest: 'bypass' });
}

deferRender().then(() => {
  createRoot(document.getElementById('root')!).render(
    <ThemeProvider defaultTheme="system" storageKey="activeMode">
      <CustomizerContextProvider>
        <Suspense fallback={<Spinner />}>
          <AuthProvider>
            <App />
          </AuthProvider>
        </Suspense>
      </CustomizerContextProvider>
    </ThemeProvider>
  );
});
```

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

### Apply Style Theme via CLI

Source: https://shadcndashboard.dev/docs/getting-started/migrate-styles

Commands to update project color, radius, and shadow tokens using different package managers.

```bash
npx shadcn@latest apply --preset <preset-id> --only theme
```

```bash
pnpm dlx shadcn@latest apply --preset <preset-id> --only theme
```

```bash
yarn dlx shadcn@latest apply --preset <preset-id> --only theme
```

```bash
bunx --bun shadcn@latest apply --preset <preset-id> --only theme
```

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

### Configure Environment Variables

Source: https://shadcndashboard.dev/docs/admin-template/supabase-env

Define project-specific credentials for Supabase, OAuth providers, and database connections. Ensure the service role key remains server-side only.

```text
# Toggle demo mode -set to false to use real database data
NEXT_PUBLIC_DEMO_MODE=false

# Supabase -client-side (safe to expose)
NEXT_PUBLIC_SUPABASE_URL="https://your-project.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="your-anon-key"

# OAuth providers (optional)
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"
GITHUB_CLIENT_ID="your-github-client-id"
GITHUB_CLIENT_SECRET="your-github-client-secret"

# Database -used by Prisma (Transaction mode / pgbouncer)
DATABASE_URL="postgresql://USER:PASSWORD@HOST:6543/DB?pgbouncer=true"

# Database -direct connection used by Prisma migrations
DIRECT_URL="postgresql://USER:PASSWORD@HOST:5432/DB"

# Supabase -server-side secret (never expose to the browser)
SUPABASE_SERVICE_ROLE_KEY="your-service-role-key"
```

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

### Initialize Supabase Client

Source: https://shadcndashboard.dev/docs/admin-template/react-auth

Create a reusable Supabase client instance using environment variables.

```typescript
import { createClient } from '@supabase/supabase-js';

const supabaseUrl: string = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey: string = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);
```

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

### Package.json Scripts Configuration

Source: https://shadcndashboard.dev/docs/admin-template/supabase-packages

Standard scripts for managing development, production builds, and database seeding.

```json
"scripts": {
  "dev":   "next dev",
  "build": "prisma generate && next build",
  "start": "next start",
  "seed":  "tsx prisma/seed-all.ts"
}
```

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

### Configure Supabase Environment Variables

Source: https://shadcndashboard.dev/docs/admin-template/react-auth

Define the Supabase URL and anonymous key in your project's .env file.

```text
VITE_SUPABASE_URL="YOUR_VITE_SUPABASE_URL"
VITE_SUPABASE_ANON_KEY="YOUR_VITE_SUPABASE_ANON_KEY"
```

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

### Configure Default Theme Settings

Source: https://shadcndashboard.dev/docs/admin-template/theme-settings

Define the initial application state including layout, mode, and theme variables in the config file.

```typescript
// ----------------------------------------------------
// File: app/context/config.ts
// ----------------------------------------------------

const config = {
  activeDir: 'ltr',
  activeMode: 'light', // This can be light or dark
  activeTheme: 'CUSTOM_THEME',
  SidebarWidth: 280,
  MiniSidebarWidth: 70,
  activeLayout: vertical, // This can be vertical or horizontal
  isLayout: 'boxed', // This can be full or boxed
  isCollapse: false, // to make sidebar Mini by default
  isSidebarHover: false,
  isHorizontal: false,
  isLanguage: 'en',
  isCardShadow: false,
  isBorderRadius: 12,
};
```

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

### Configure Clerk Environment Variables

Source: https://shadcndashboard.dev/docs/admin-template/react-auth

Add the publishable key to your .env file.

```text
VITE_CLERK_PUBLISHABLE_KEY=your_publishable_key
```

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

### Configure components.json for free access

Source: https://shadcndashboard.dev/docs/getting-started/how-to-use-shadcn-cli

Add the @shadcn-dashboard registry to your components.json file to enable access to free components.

```json
{
  "registries": {
    "@shadcn-dashboard": {
      "url": "https://shadcndashboard.dev/r/{name}.json",
    }
  }
}
```

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

### Configure Demo Mode in .env

Source: https://shadcndashboard.dev/docs/admin-template/supabase-demo

Set the environment variable to enable or disable demo mode functionality.

```bash
# Set to false when connecting to your own Supabase project
NEXT_PUBLIC_DEMO_MODE=true
```

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

### Configure entry point src/main.tsx

Source: https://shadcndashboard.dev/docs/admin-template/react-quick-start

Initializes MSW mock workers before rendering the root App component within the necessary providers.

```typescript
// src/main.tsx
async function deferRender() {
  const { worker } = await import('./api/mocks/browser.ts');
  return worker.start({ onUnhandledRequest: 'bypass' });
}
deferRender().then(() => {
  createRoot(document.getElementById('root')!).render(
    <ThemeProvider defaultTheme="system" storageKey="activeMode">
      <CustomizerContextProvider>
        <Suspense fallback={<Spinner />}>
          <App />
        </Suspense>
      </CustomizerContextProvider>
    </ThemeProvider>
  );
});
```

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

### Run Database Seed Script

Source: https://shadcndashboard.dev/docs/admin-template/supabase-packages

Execute the database seeding process using the configured npm script.

```bash
npm run seed
```

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

### Customize Prompt Placement

Source: https://shadcndashboard.dev/docs/getting-started/copy-prompt

Use these comment-based instructions to direct AI tools on where to place or modify components within your existing codebase.

```markdown
<!-- Copied snippet from 'Copy Prompt' --> Insert this code below the FAQ section in the respective file.
```

```markdown
<!-- Copied snippet from 'Copy Prompt' --> Use the accordion above and update the content related to "Next.js usage".
```

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

### Configure Global Root Layout with Auth Providers

Source: https://shadcndashboard.dev/docs/admin-template/authentication

Wraps the application root with necessary authentication and context providers.

```tsx
// app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs';
import SessionProviderComp from './components/nextauth/SessionProvider';
import { AuthProvider } from '@/app/context/auth-context';

export default async function RootLayout({ children }) {
  const session = await getServerSession(authOptions);
  return (
    <html lang="en">
      <body>
        <ClerkProvider>
          <SessionProviderComp session={session}>
            <AuthProvider>
              <CustomizerContextProvider>
                <ThemeProvider>
                  {children}
                </ThemeProvider>
              </CustomizerContextProvider>
            </AuthProvider>
          </SessionProviderComp>
        </ClerkProvider>
      </body>
    </html>
  );
}
```

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

### Initialize Prisma Client

Source: https://shadcndashboard.dev/docs/admin-template/supabase-clients

Singleton Prisma client configured for connection pooling. Use for all database queries via the ORM.

```typescript
import { PrismaPg } from "@prisma/adapter-pg";
import { PrismaClient } from "./generated/prisma/client";

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

function createClient() {
  const connectionString = process.env.DATABASE_URL!;
  const adapter = new PrismaPg({ connectionString });
  return new PrismaClient({ adapter, log: ["error"] });
}

export const prisma = globalForPrisma.prisma ?? createClient();

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;
```

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

### Create Migration

Source: https://shadcndashboard.dev/docs/admin-template/supabase-migrations

Creates a new migration file based on schema changes and applies it to the development database.

```bash
npx prisma migrate dev --name init
```

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

### Configure components.json for premium access

Source: https://shadcndashboard.dev/docs/getting-started/how-to-use-shadcn-cli

Include authentication parameters in your components.json to unlock premium components.

```json
{
  "registries": {
    "@shadcn-dashboard": {
      "url": "https://shadcndashboard.dev/r/{name}.json",
      "params": {
        "email": "${EMAIL}",
        "license_key": "${LICENSE_KEY}"
      }
    }
  }
}
```

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

### Deploy Migrations

Source: https://shadcndashboard.dev/docs/admin-template/supabase-migrations

Applies pending migrations to the production database.

```bash
npx prisma migrate deploy
```

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

### Set environment variables for authentication

Source: https://shadcndashboard.dev/docs/getting-started/how-to-use-shadcn-cli

Store your credentials in a .env file to securely authenticate with the CLI.

```bash
# .env
EMAIL={YOUR_EMAIL}
LICENSE_KEY={YOUR_LICENSE_KEY}
```

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

### Wrap Application with ClerkProvider

Source: https://shadcndashboard.dev/docs/admin-template/react-auth

Initialize the Clerk provider in the main entry file to wrap the application components.

```typescript
import { ClerkProvider } from '@clerk/clerk-react';

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;

deferRender().then(() => {
  createRoot(document.getElementById('root')!).render(
    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
      <ThemeProvider defaultTheme="system" storageKey="activeMode">
        <CustomizerContextProvider>
          <Suspense fallback={<Spinner />}>
            <App />
          </Suspense>
        </CustomizerContextProvider>
      </ThemeProvider>
    </ClerkProvider>
  );
});
```

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

### Generate Prisma Client

Source: https://shadcndashboard.dev/docs/admin-template/supabase-migrations

Generates the Prisma client based on the current schema definition.

```bash
npx prisma generate
```

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

### New Prompt Template

Source: https://shadcndashboard.dev/docs/admin-template/ai-instructions

Use this structure when creating new automated tasks to ensure consistency and clarity for AI agents.

```markdown
# Template for a new Prompt
<!-- DESCRIPTION: [Short summary of the task] -->
<!-- AGENT: [Recommended AI Model] -->

You are a [Role]. Your task is to [Primary Goal].

## Step 1: [Action]
**Target Files:** [Path to files]
**Instructions:** [Detailed steps for the AI]

## Verification Checklist
- [ ] [Verification step 1]
- [ ] [Verification step 2]
```

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

### Using Lucide Icons

Source: https://shadcndashboard.dev/docs/admin-template/icons

Import specific icons from the lucide-react package and render them as React components.

```jsx
import { Moon, Sun } from 'lucide-react';

<Moon className="h-5 w-5" />
<Sun className="h-5 w-5" />
```

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

### Define Environment Variables

Source: https://shadcndashboard.dev/docs/admin-template/authentication

Required environment variables for NextAuth providers and security keys.

```bash
# .env.local
GOOGLE_CLIENT_ID="Your Google Client ID"
GOOGLE_CLIENT_SECRET="Your Google Client Secret"

NEXTAUTH_SECRET="Your NEXTAUTH_SECRET Key"
NEXTAUTH_URL="http://localhost:3000/"

GITHUB_ID="Your GITHUB_ID"
GITHUB_SECRET="Your GITHUB_SECRET"
```

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

### Define Language Translation Files

Source: https://shadcndashboard.dev/docs/admin-template/multi-language

Create JSON files for each supported language to map keys to localized strings.

```json
// ----------------------------------------------------
// File: /utils/languages/ar.json
// ----------------------------------------------------

{
  "Modern": "عصري",
  "Contacts": "جهات الاتصال",
  "Chats": "الدردشات"
}
```

```json
// ----------------------------------------------------
// File: /utils/languages/en.json
// ----------------------------------------------------

{
  "Modern": "Modern",
  "Contacts": "Contacts",
  "Chats": "Chats"
}
```

```json
// ----------------------------------------------------
// File: /utils/languages/ch.json
// ----------------------------------------------------

{
  "Modern": "現代的",
  "Contacts": "聯繫人",
  "Chats": "聊天記錄"
}
```

```json
// ----------------------------------------------------
// File: /utils/languages/fr.json
// ----------------------------------------------------

{
  "Modern": "Moderne",
  "Contacts": "Les contacts",
  "Chats": "Chattes"
}
```

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

### Configure RTL Settings

Source: https://shadcndashboard.dev/docs/admin-template/theme-settings

Adjust the activeDir property to toggle between left-to-right and right-to-left layouts.

```typescript
// ----------------------------------------------------
// File: app/context/config.ts
// ----------------------------------------------------

const config = {
  activeDir: 'ltr', // This can be ltr or rtl
  activeMode: 'light',
  activeTheme: 'CUSTOM_THEME',
  SidebarWidth: 280,
  MiniSidebarWidth: 70,
  activeLayout: vertical,
  isLayout: 'boxed',
  isCollapse: false,
  isSidebarHover: false,
  isHorizontal: false,
  isLanguage: 'en',
  isCardShadow: false,
  isBorderRadius: 12,
};
```

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

### Set Platform Context

Source: https://shadcndashboard.dev/docs/admin-template/authentication

Updates the initial state to specify the authentication platform.

```typescript
// app/context/auth-context/index.tsx
const initialState: InitialStateType = {
  platform: 'NextAuth', // Change platform to NextAuth
};
```

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

### Wrap Application with ClerkProvider

Source: https://shadcndashboard.dev/docs/admin-template/authentication

Basic implementation of the Clerk provider in the root layout.

```tsx
import { ClerkProvider } from '@clerk/nextjs';

export default function RootLayout({ children }) {
  return (
    <ClerkProvider>
      {children}
    </ClerkProvider>
  );
}
```

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

### Initialize Server-side Admin Client

Source: https://shadcndashboard.dev/docs/admin-template/supabase-clients

Used only in API routes and server components. Uses the service role key to bypass RLS.

```typescript
import { createClient } from "@supabase/supabase-js";

export const supabaseAdmin = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!
);
```

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

### Manual MCP Server Configuration

Source: https://shadcndashboard.dev/docs/getting-started/mcp-server

Add this JSON configuration to your editor's MCP settings file to manually register the server.

```json
{
  "mcpServers": {
    "shadcndashboard-mcp": {
      "command": "npx",
      "args": ["-y", "shadcndashboard-mcp@latest"]
    }
  }
}
```

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

### Set Platform to Supabase

Source: https://shadcndashboard.dev/docs/admin-template/react-auth

Update the AuthContext initial state to enable Supabase authentication.

```typescript
// File: src/guards/auth/AuthContext.tsx
const initialState: InitialStateType = {
  platform: 'Supabase', // Change platform to Supabase for Supabase Authentication
};
```

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

### Configure Clerk Environment Variables

Source: https://shadcndashboard.dev/docs/admin-template/authentication

Required environment variables for Clerk integration in .env.local.

```bash
# .env.local
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=your_secret_key

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/auth/login
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/auth/register
```

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

### Run the database seed script

Source: https://shadcndashboard.dev/docs/admin-template/supabase-seed

Executes the seed script located at prisma/seed-all.ts using npx and tsx.

```bash
npx tsx prisma/seed-all.ts
```

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

### Global Fetcher Utilities

Source: https://shadcndashboard.dev/docs/admin-template/react-api

Provides standardized fetch wrappers for common HTTP methods, designed for use with SWR.

```typescript
// src/api/global-fetcher.ts

const getFetcher = (url: string | Request | URL) =>
  fetch(url).then((res) => {
    if (!res.ok) {
      throw new Error('Failed to fetch the data');
    }
    return res.json();
  });

const postFetcher = (url: string, arg: any) =>
  fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(arg),
  }).then((res) => {
    if (!res.ok) {
      throw new Error('Failed to post data');
    }
    return res.json();
  });

const putFetcher = (url: string, arg: any) =>
  fetch(url, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(arg),
  }).then((res) => {
    if (!res.ok) {
      throw new Error('Failed to updated data');
    }
    return res.json();
  });

const patchFetcher = (url: string, arg: any) =>
  fetch(url, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(arg),
  }).then((res) => {
    if (!res.ok) {
      throw new Error('Failed to updated data');
    }
    return res.json();
  });

const deleteFetcher = (url: string, arg: any) =>
  fetch(url, {
    method: 'DELETE',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(arg),
  }).then((res) => {
    if (!res.ok) {
      throw new Error('Failed to delete data');
    }
    return res.json();
  });

export { getFetcher, postFetcher, putFetcher, deleteFetcher, patchFetcher };
```

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

### Configure RTL direction

Source: https://shadcndashboard.dev/docs/admin-template/quick-start

Enable RTL layout by updating the configuration.

```typescript
activeDir: "rtl",
```

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

### Push Schema to Database

Source: https://shadcndashboard.dev/docs/admin-template/supabase-migrations

Updates the database schema to match the Prisma schema file, suitable for rapid development.

```bash
npx prisma db push
```

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

### Configure Boxed Layout

Source: https://shadcndashboard.dev/docs/admin-template/theme-settings

Set the isLayout property to 'boxed' within the configuration object to enable the boxed layout style.

```typescript
// ----------------------------------------------------
// File: app/context/config.ts
// ----------------------------------------------------

const config = {
  activeDir: 'ltr',
  activeMode: 'light',
  activeTheme: 'CUSTOM_THEME',
  SidebarWidth: 280,
  MiniSidebarWidth: 70,
  activeLayout: vertical,
  isLayout: 'boxed',   // changes here to full
  isCollapse: false,
  isSidebarHover: false,
  isHorizontal: false,
  isLanguage: 'en',
  isCardShadow: false,
  isBorderRadius: 12,
};
```

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

### Configure React Router Routes

Source: https://shadcndashboard.dev/docs/admin-template/react-routing

Define application routes in src/routes/Router.tsx by grouping them under FullLayout or BlankLayout.

```typescript
import { lazy } from 'react';
import { Navigate, createBrowserRouter } from 'react-router';
import Loadable from '../layouts/full/shared/loadable/Loadable';

const FullLayout  = Loadable(lazy(() => import('../layouts/full/FullLayout')));
const BlankLayout = Loadable(lazy(() => import('../layouts/blank/BlankLayout')));

const MyPage = Loadable(lazy(() => import('../views/my-feature/MyPage')));

const Router = [
  {
    path: '/',
    element: <FullLayout />,          // dashboard layout with sidebar
    children: [
      { path: '/my-feature', element: <MyPage /> },
    ],
  },
  {
    path: '/',
    element: <BlankLayout />,         // blank layout for auth
    children: [
      { path: '/auth/login', element: <Login /> },
    ],
  },
];

const router = createBrowserRouter(Router);
export default router;
```

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

### Navigate Between Pages

Source: https://shadcndashboard.dev/docs/admin-template/react-routing

Use Link for declarative navigation or useNavigate for programmatic navigation to avoid full page reloads.

```typescript
import { Link, useNavigate } from 'react-router';

// Declarative
<Link to="/my-feature">Go to My Page</Link>

// Programmatic
const navigate = useNavigate();
navigate('/my-feature');
```

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

### Configure Fullwidth Layout

Source: https://shadcndashboard.dev/docs/admin-template/theme-settings

Adjust the isCollapse property to manage the layout width settings.

```typescript
// ----------------------------------------------------
// File: app/context/config.ts
// ----------------------------------------------------

const config = {
  activeDir: 'ltr',
  activeMode: 'light',
  activeTheme: 'CUSTOM_THEME',
  SidebarWidth: 280,
  MiniSidebarWidth: 70,
  activeLayout: vertical,
  isLayout: 'boxed',
  isCollapse: false, // changes here
  isSidebarHover: false,
  isHorizontal: false,
  isLanguage: 'en',
  isCardShadow: false,
  isBorderRadius: 12,
};
```

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

### Configure theme mode

Source: https://shadcndashboard.dev/docs/admin-template/quick-start

Set the active theme mode in config.ts.

```typescript
activeMode: "light",
```

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

### Force overwrite existing files

Source: https://shadcndashboard.dev/docs/getting-started/how-to-use-shadcn-cli

Use the --overwrite flag to skip prompts and automatically replace existing files.

```bash
npx shadcn@latest add @shadcn-dashboard/button-06 --overwrite
```

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

### Initialize Client-side Supabase

Source: https://shadcndashboard.dev/docs/admin-template/supabase-clients

Used in React components for authentication operations. Respects Row Level Security (RLS).

```typescript
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseKey)
```

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

### Add Sidebar Navigation Items

Source: https://shadcndashboard.dev/docs/admin-template/react-routing

Register new pages in src/layouts/full/vertical/sidebar/sidebaritems.ts, ensuring the URL matches the defined route path.

```typescript
// src/layouts/full/vertical/sidebar/sidebaritems.ts
import { uniqueId } from 'lodash';
import { MyIcon } from 'lucide-react';

const SidebarContent: MenuItem[] = [
  {
    heading: 'My Section',
    items: [
      {
        id: uniqueId(),
        name: 'My Page',
        icon: MyIcon,
        url: '/my-feature',   // must match Router.tsx path
      },
    ],
  },
];
```

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

### Define Light Theme Colors

Source: https://shadcndashboard.dev/docs/admin-template/color

CSS variables for the light theme defined within the :root selector.

```css
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}
```

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

### Configure Vertical Sidebar Items

Source: https://shadcndashboard.dev/docs/admin-template/routing

Update the sidebar configuration file to include new pages in the vertical navigation menu.

```typescript
// ------------------------------------------------------------------------
// File: app/(dashboard-layout)/layout/vertical/sidebar/sidebaritems.ts
// ------------------------------------------------------------------------

const SidebarContent = MenuItem[] = [
  {
    heading: "Dashboard",
    items: [
      {
        id: uniqueId(),
        name: 'Analytics',
        icon: "solar:chart-square-line-duotone",
        url: '/',
      },
      {
        id: uniqueId(),
        name: 'eCommerce',
        icon: "solar:cart-line-duotone",
        url: '/dashboards/ecommerce',
      }
    ],
  },
]
```

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

### Define and Register API Handlers

Source: https://shadcndashboard.dev/docs/admin-template/react-api

Create feature-specific handlers using MSW and aggregate them into the main mock handlers array.

```typescript
// src/api/ecommerce/productsdata.ts
import { http, HttpResponse } from 'msw';

export const Ecommercehandlers = [
  http.get('/api/data/eCommerce/ProductsData', () => {
    return HttpResponse.json({ status: 200, msg: 'success', data: ProductsData });
  }),
  http.post('/api/eCommerce/carts', async () => {
    return HttpResponse.json({ status: 200, msg: 'success', data: cartItems });
  }),
  http.post('/api/data/eCommerce/add', async ({ request }) => {
    const body = await request.json();
    // handle add to cart logic...
    return HttpResponse.json({ status: 200, msg: 'Success', data: cartItems });
  }),
  http.put('/api/eCommerce/carts/increment-decrementqty', async ({ request }) => {
    const body = await request.json();
    // handle qty change logic...
    return HttpResponse.json({ status: 200, msg: 'Success', data: cartItems });
  }),
  http.delete('/api/eCommerce/remove-item-carts', async ({ request }) => {
    // handle remove logic...
    return HttpResponse.json({ status: 200, msg: 'Success', data: cartItems });
  }),
];
```

```typescript
import { Contacthandlers } from 'src/api/contacts/contactsdata';
import { Chathandlers } from 'src/api/chat/chatdata';
import { Ecommercehandlers } from 'src/api/ecommerce/productsdata';
import { PostHandlers } from 'src/api/userprofile/post-data';
import { UserDataHandlers } from 'src/api/userprofile/users-data';
// ...import your new handler here

export const mockHandlers = [
  ...Contacthandlers,
  ...Chathandlers,
  ...Ecommercehandlers,
  ...UserDataHandlers,
  ...PostHandlers,
  // ...spread your new handler here
];
```

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

### Apply Lyra Style Preset

Source: https://shadcndashboard.dev/docs/getting-started/migrate-styles

Specific command to apply the Lyra style using its preset ID.

```bash
npx shadcn@latest apply --preset buFywKm --only theme
```

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

### Configure JWT Authentication State

Source: https://shadcndashboard.dev/docs/admin-template/react-auth

Update the platform property in the AuthContext initial state to enable JWT authentication.

```typescript
// src/guards/auth/AuthContext.tsx
const initialState = {
  isAuthenticated: false,
  isInitialized: false,
  user: null,
  platform: 'JWT',   // Change platform to JWT
};
```

```typescript
// File: src/guards/auth/AuthContext.tsx
const initialState: InitialStateType = {
  platform: 'JWT', // Change platform to JWT for JWT Authentication
};
```

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

### Update FullLogo Component

Source: https://shadcndashboard.dev/docs/admin-template/change-logo

The FullLogo component uses Next.js Image to toggle between light and dark mode logos based on the theme.

```tsx
'use client'
import Image from 'next/image'
import Link from 'next/link'

const FullLogo = () => {
  return (
    <Link href="/" className="max-w-[40px] block lg:max-w-[110px] overflow-hidden" prefetch={false}>
      <Image
        src={'/images/logos/darklogo.svg'}
        alt="logo"
        width={110}
        height={36}
        className='block dark:hidden max-w-[110px] rtl:scale-x-[-1]'
      />
      <Image
        src={'/images/logos/whitelogo.svg'}
        alt="logo"
        height={36}
        width={110}
        className='hidden dark:block max-w-[110px] rtl:scale-x-[-1]'
      />
    </Link>
  );
};

export default FullLogo;
```

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

### Configure Horizontal Sidebar Items

Source: https://shadcndashboard.dev/docs/admin-template/routing

Update the menu data file to include new pages in the horizontal navigation menu.

```typescript
// ------------------------------------------------------------------------
// File: app/(dashboard-layout)/layout/horizontal/menudata.ts
// ------------------------------------------------------------------------

const Menuitems = MenuItem[] = [
  {
    {
      id: uniqueId(),
      title: 'Dashboard',
      icon: "solar:chart-square-line-duotone",
      href: '',
      children: [
        {
          title: 'Modern',
          icon: 'solar:widget-2-linear',
          id: uniqueId(),
          href: '/',
        },
        {
          title: 'eCommerce',
          icon: "solar:cart-line-duotone",
          id: uniqueId(),
          href: '/dashboards/ecommerce',
        }
      ],
    }
  },
]
```

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

### Configure NextAuth Route Handler

Source: https://shadcndashboard.dev/docs/admin-template/authentication

Defines authentication providers, custom sign-in page, and session callbacks in the Next.js API route.

```javascript
// app/api/auth/[...nextauth]/route.js
import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import GoogleProvider from 'next-auth/providers/google';
import GitHubProvider from 'next-auth/providers/github';

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    CredentialsProvider({
      name: 'credentials',
      credentials: {
        email: { label: 'Email', type: 'text' },
        password: { label: 'Password', type: 'password' },
      },
      authorize: async (credentials) => {
        if (
          credentials?.email === 'shadcndashboard.info@gmail.com' &&
          credentials?.password === 'shadcndashboard'
        ) {
          return { id: '1', name: 'shadcndashboard', email: 'shadcndashboard.info@gmail.com' };
        }
        return null;
      },
    }),
  ],
  pages: {
    signIn: '/auth/login',
  },
  callbacks: {
    async session({ session, token }) {
      if (token && session.user) {
        session.user.id = token.sub;
      }
      return session;
    },
  },
  secret: process.env.NEXTAUTH_SECRET,
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
```

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

### Configure MSW Browser Worker

Source: https://shadcndashboard.dev/docs/admin-template/react-api

Initializes the MSW worker to intercept fetch requests before the React application renders.

```typescript
// src/api/mocks/browser.ts
import { setupWorker } from 'msw/browser';
import { mockHandlers } from './handlers/mock-handlers';

export const worker = setupWorker(...mockHandlers);
```

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

### Enable Mini Sidebar

Source: https://shadcndashboard.dev/docs/admin-template/theme-settings

Toggle the isCollapse property to true to enable the mini sidebar view.

```typescript
// ----------------------------------------------------
// File: app/context/config.ts
// ----------------------------------------------------

const config = {
  activeDir: 'ltr',
  activeMode: 'light',
  activeTheme: 'CUSTOM_THEME',
  SidebarWidth: 280,
  MiniSidebarWidth: 70,
  activeLayout: vertical,
  isLayout: 'boxed',
  isCollapse: false, // changes here to true
  isSidebarHover: false,
  isHorizontal: false,
  isLanguage: 'en',
  isCardShadow: false,
  isBorderRadius: 12,
};
```

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

### Define Route Handlers

Source: https://shadcndashboard.dev/docs/admin-template/api-calls

Implements API endpoints using Next.js NextResponse within app/api/ folders.

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

export async function GET() {
  try {
    return NextResponse.json({ status: 200, msg: 'success', data: ChatData })
  } catch (error: unknown) {
    return NextResponse.json({ status: 200, msg: 'failed', data: error })
  }
}

export async function POST(req: Request) {
  try {
    const { chatId, message } = (await req.json()) as {
      chatId: number | string
      message: string
    }
    // handle logic...
    return NextResponse.json({ status: 201, msg: 'Success', data: ChatData })
  } catch (error: unknown) {
    return NextResponse.json({ status: 400, msg: 'failed', error: 'Failed to add message' })
  }
}
```

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

### Set Authentication Platform in Context

Source: https://shadcndashboard.dev/docs/admin-template/authentication

Defines the active authentication platform within the initial state of the auth context.

```tsx
const initialState: InitialStateType = {
  isAuthenticated: false,
  isInitialized: false,
  user: null,
  platform: 'Clerk', // Change platform here
};
```

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

### Using Iconify Icons

Source: https://shadcndashboard.dev/docs/admin-template/icons

Use the Icon component from @iconify/react to render icons by specifying their identifier string.

```jsx
import { Icon } from '@iconify/react';

<Icon icon="mdi:home" width="24" height="24" />
```

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

### Implement useAuth Hook

Source: https://shadcndashboard.dev/docs/admin-template/react-auth

Access the authentication context within components using this custom hook.

```typescript
// File: src/guards/authGuard/UseAuth.tsx
import { useContext } from 'react';
import AuthContext from 'src/guards/auth/AuthContext';

const useAuth = () => useContext(AuthContext);

export default useAuth;
```

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

### Adjusting Padding with Tailwind CSS

Source: https://shadcndashboard.dev/docs/getting-started/blocks

Update padding utility classes to change internal spacing.

```html
<div className="p-4">
  <!-- Your content goes here -->
</div>
```

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

### Configure Clerk Authentication State

Source: https://shadcndashboard.dev/docs/admin-template/react-auth

Set the platform property to 'Clerk' in the AuthContext initial state.

```typescript
// File: src/guards/auth/AuthContext.tsx
const initialState: InitialStateType = {
  platform: 'Clerk', // Change platform to Clerk for Clerk Authentication
};
```
Tokens:
Raw