Pacakge Versions

npm-package
v15.2.2

NextJs

npm-package
v19.0.0

React

npm-package
v4

Tailwindcss

npm-package
v5.6.3

Typescript

npm-package
v4.24.11

Next Auth

StudioPix 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

Pacakge Structure

StudioPix Tailwind Nextjs Templates

  • |—

    packages

        • |—

          markdown

        • |—

          public

        • |—

          src

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          |

          • |—

            app

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            |

            • |—

              (site) (Contains all the pages)

              |

              |

              |

              |

              |

              • |—

                (auth) (Contains all auth pages)

              • |—

                about

              • |—

                blog

              • |—

                contact

              • |—

                documentation

              • |—

                privacy-policy

              • |—

                projects

              • |—

                terms-and-conditions

            • |—

              api

            • |—

              components

            • |—

              global.css

            • |—

              layout.tsx

            • |—

              not-found.tsx

            • |—

              page.tsx

          |

          |

          |

          |

          |

          |

          • |—

            lib

            |

            |

            |

            |

            • |—

              auth.ts

            • |—

              blogmarkdown.ts

            • |—

              markdown.ts

            • |—

              markdownToHtml.ts

        • |—

          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:

> StudioPix-nextjs@1.0.0 dev

> next dev

-Next.js 15.2.2

-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\app\globals.css

--color-primary: #C1FF72;--color-secondary: #1F2A2E;--color-lightgray: #F4F8FA;--color-overlay: #000A0B99;--color-darkblack: #273338;--color-twilliteblack: #181f22;--color-gray: #365564;

2. Override Theme Colors
For change , go to : \src\app\globals.css

--color-primary: #C1FF72;--color-secondary: #1F2A2E;

Typography

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

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

const manrope = Manrope({ subsets: ["latin"], });

Logo

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

<Image

src="/images/header/dark-logo.svg"

alt="logo"

width=150

height=68

className="{$isHomepage ? sticky ? "block dark:hidden" : "hidden" : sticky ? "block dark:hidden" : "block dark:hidden"}"

/>

<Image

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

alt="logo"

width=150

height=68

className="{$isHomepage ? sticky ? "hidden dark:block" : "block" : sticky ? "dark:block hidden" : "dark:block hidden"}"

/>

</Link>