Documentation | Payflow

Package Versions Package Structure Quick Start Project Configuration

Package Versions

v16

Next.js

v19

React

v4

Tailwind CSS

v5 (beta)

NextAuth

v6

TypeScript

Payflow is built with Next.js 16, React 19, and Tailwind CSS v4.

The project is fully typed with TypeScript 6 and uses the App Router with Server Components by default.

To customize, familiarity with Next.js App Router, React 19, Tailwind v4 token syntax, and TypeScript is recommended.

Docs Menu

Package Structure

Payflow Nextjs Template

|—
packages
- - - |—
      markdown
    - |—
      public
    - |—
      src
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |—
      app
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |—
      (site)(Contains all the pages)
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |
      |—
      (auth)
      |
      |
      |
      |—
      signin
      |
      |—
      signup
      |—
      blog
      |—
      contact
      |—
      documentation
      |—
      pricing
      |—
      services
      |—
      api
      |
      |
      |
      |—
      auth
      |
      |—
      contex
      |—
      Context
      |
      |
      |—
      authDialogContext.tsx
      |—
      global.css
      |—
      layout.tsx
      |—
      not-found.tsx
      |—
      page.tsx
      |—
      components(All the Components of this template.)
      |—
      styles
      |—
      types
      |—
      utils
    - |—
      next.config.mjs
    - |—
      postcss.config.mjs
    - |—
      package.json
    - |—
      tailwind.config.ts
    - |—
      tsconfig.json

Quick Start

1. Requirements

Before proceeding, you need to have the latest stable node.js

Recommended environment:

node js 20+
npm js 10+

2. Install

Open package folder and install its dependencies. We recommanded yarn or npm.

1) Install with npm:

cd project-folder

npm install

1) Install with yarn:

cd project-folder

yarn install

3. Start

Once npm install is done now you an run the app.

npm run dev or yarn run dev

This command will start a local webserver http://localhost:3000:

> payflow_project@1.0.1 dev

> next dev

-Next.js 15.1.1

-Local: http://localhost:3000

4. Build / Deployment

After adding url run below command for build a app.

npm run build or yarn build

Finally, Your webiste is ready to be deployed.🥳

Project Configuration

Colors

1. Override Colors
For any change in colors : /src/utils/extendedConfig.ts

primary: "#2F73F2",danger: "#DC3545",danger_text: "#FF3C78",green: "#3CD278",grey: "#8E8E8E",muted: "#547593",midnight_text: "#102D47",border: "#DFEBFC",darkmode: "#08162B",heroBg: "#F3F9FD",darkHeroBg: "#121C2E",darkheader: "#141D2F",dark_border: "#253C50",foottext: "#668199",search: "#163858",dark_b: "#1B2C44",

2. Override Theme Colors
For change , go to : /src/utils/extendedConfig.ts

primary: "#2F73F2",darkmode: "#08162B",

Typography

1. Change Font family over here :src/app/layout.tsx

import { DM_Sans } from "next/font/google";

const dmsans = DM_Sans({ subsets: ["latin"] });

Logo

1. Change Logo over here :src/components/Layout/Header/Logo/index.tsx

<Image

src="/images/logo/logo.svg"

alt="logo"

width=160

height=50

quality=100

className='dark:hidden'