Package Versions

npm-package
v16.1.6

NextJs

npm-package
v19.2.3

React

npm-package
v4.1.4

Tailwindcss

npm-package
v4.24.11

NextAuth

npm-package
v5.9.3

Typescript

Awake Tailwind NextJs Template is built with Tailwindcss and Nextjs.

These theme is ready to use and you can totally customize as per your requirement.

For Customize, You should have knowledge of NextJs, ReactJs, Tailwind and JSX to be able to modify these template.

Docs Menu

Package Structure

Awake Tailwind Nextjs Templates

  • |—

    package

        • |—

          public

        • |—

          src

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          • |—

            app

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            • |—

              (site) (Contains all the pages)

              |

              |

              |

              |

              |

              |

              |

              |

              |

              |

              • |—

                (auth)

                |

                |

                • |

                  |—

                  signin

                • |

                  |—

                  signup

              • |—

                contact

              • |—

                documentation

              • |—

                privacy-policy

              • |—

                terms-and-conditions

            • |—

              api

              |

              |

              • |

                |—

                auth

              • |

                |—

                page-data

            • |—

              globals.css

            • |—

              layout.tsx

            • |—

              not-found.tsx

            • |—

              components

            • |—

              page.tsx

          • |—

            components (All the Components of this template.)

          • |—

            lib

          • |—

            providers

          • |—

            styles

          • |—

            types

          • |—

            utils

        • |—

          next.config.mjs

        • |—

          postcss.config.mjs

        • |—

          package.json

        • |—

          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 recommended npm, yarn or pnpm.

1) Install with npm:

cd project-folder

npm install

2) Install with yarn:

cd project-folder

yarn install

3) Install with pnpm:

cd project-folder

pnpm install

3. Start

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

npm run dev, yarn dev or pnpm dev

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

> awake_project@1.0.0 dev

> next dev

-Next.js 16.1.6

-Local: http://localhost:3000

4. Build / Deployment

After adding url run below command for build a app.

npm run build, yarn build or pnpm build

Finally, Your webiste is ready to be deployed.🥳

Project Configuration

Colors

1. Override Colors (Tailwind v4)
For any change in colors, update the CSS variables in : src/app/globals.css

@theme {

--color-dark_black: #1b1d1e;

--color-purple_blue: #4928fd;

--color-purple: #ba81ee;

--color-blue: #70b5ff;

--color-orange: #ffaf68;

--color-green: #79d45e;

--color-pink: #f4889a;

/* ... gradients */

}

2. CSS Variables For Theming
Theme-specific colors (light/dark) are managed via standard CSS variables in : src/app/globals.css

:root {

--primary: oklch(0.205 0 0);

--background: oklch(1 0 0);

}

.dark {

--primary: oklch(0.87 0.00 0);

--background: oklch(0.145 0 0);

}

Typography (Tailwind v4)

1. Import & Setup Fonts : src/app/layout.tsx

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

const interTight = Inter_Tight({

subsets: ["latin"],

variable: "--font-inter-tight",

});

<html className={interTight.variable}>

<body className="font-inter-tight">...</body>

</html>

2. Register in Theme : src/app/globals.css

@theme {

--font-inter-tight: var(--font-inter-tight);

}

Logo

1. Change Logo over here : src/app/components/layout/header/logo/index.tsx

<Link href="/">

<Image

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

alt="logo"

width={160}

height={50}

className="dark:hidden"

/>

<Image

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

alt="logo"

width={160}

height={50}

className="dark:block hidden"

/>

</Link>