Vemus WordPress Theme is Live Special $19 Offer for You! BUY NOW
Hire Us

Themesflat React & Next.js Template Documentation

Home Themesflat React & Next.js Template Documentation
  • 1. Welcome
  • 2. Install & Run
  • 3. Project Structure
  • 4. Pages & Routing
  • 5. Styling (SCSS)
  • 6. Customize Your Template
  • 7. Build & Deploy
  • 8. Credits & Dependencies

Themesflat · React & Next.js Templates

Welcome to Themesflat!

This guide shows you step by step how to install, run, customize and deploy any of our React (Vite) and Next.js templates: folder structure, pages & routing, SCSS, data files, logo, fonts, colors and more. One guide, every template.

Explore more React & Next.js templates
Choose your framework:

React & Next.js Template Documentation

  • Applies to: every React (Vite) and Next.js template by Themesflat sold on Vithemes
  • Technology: React 19, TypeScript, Bootstrap 5 grid, SCSS, Swiper, Zustand (React: Vite + React Router; Next.js: App Router)
  • Version & last update: see package.json and the changelog inside your downloaded package
  • Author: Themesflat

Thank you for choosing a Themesflat React or Next.js template. Every item works the same way, so this one guide covers them all: wherever you read Your_Item, use the name and folder of the template you purchased. The exact list of pages, components and plugins differs from item to item. Use the React (Vite) / Next.js switch to show only the steps for the package you bought.

i
Demo content

Product names, prices, blog posts and photos you see in the live preview are demo content stored in the data folder and public/assets/images. Replace them with your own.

Template Features & Quick Start:

  • React 19 + TypeScript, built with Vite (React package) or the Next.js App Router (Next.js package)
  • Bootstrap 5 grid with a custom SCSS theme, fully responsive
  • Ready-made pages: home variations, shop, product details, cart, checkout, account, blog, contact, FAQ and more (the list differs per item)
  • Content kept in simple TypeScript files in data/, easy to edit
  • Cart, wishlist, compare and quick view powered by Zustand
  • Swiper sliders, PhotoSwipe lightbox, product image zoom, smooth scroll and scroll animations
  • Clean, modular components you can reuse on any page

Quick start:

  1. Install Node.js (version 20.19 or newer) from nodejs.org.
  2. Unzip the package you downloaded from Envato and open the project folder (the one that contains package.json) in VS Code.
  3. Open the terminal and run npm install.
  4. Run npm run dev and open the address shown in the terminal.
  5. Edit the files in data/ and components/, then run npm run build when you are ready to publish.

Explore this documentation

Find detailed guides to customize every part of your template.

Install & RunNode.js, npm install and the dev server.
Project StructureFolders, components and the @ alias.
Pages & RoutingAdd pages, layouts and metadata.
Styling (SCSS)Colors, fonts and your own CSS.
Customize Your TemplateData files, logo, favicon, forms and map.
Build & DeployProduction build and hosting.

Install & Run

You only need Node.js and a code editor. The project uses npm; the included package-lock.json keeps the exact versions.

Requirements

  • Node.js 20.19 or newer (the latest LTS is recommended)
  • npm (installed together with Node.js)
  • A code editor, we recommend VS Code
  • Windows, macOS or Linux

Check your Node.js version

node -v
npm -v

If the version is lower than 20.19, install the latest LTS from nodejs.org, or use a version manager (nvm on macOS/Linux, nvm-windows on Windows): nvm install --lts then nvm use --lts.

Install and run the project

Unzip the package you downloaded from Envato and copy the project folder to a simple path such as D:/Your_Item. Open it in VS Code, open the terminal (Ctrl + `) and run:

!
Run the commands in the right folder

The package can contain other folders next to the project (for example documentation). Always run npm commands inside the folder that contains package.json.

npm install
npm run dev

Open http://localhost:5173 in your browser (Vite prints the exact address in the terminal). If the port is busy, Vite picks the next free one.

Open http://localhost:3000 in your browser. If the port is busy, start the server on another one: npm run dev -- -p 3001.

The page reloads automatically every time you save a file. That is all you need to see your template running.

Available scripts

npm run dev       start the development server
npm run build     type-check and create the production build in dist/
npm run preview   preview the production build locally
npm run lint      check the code with ESLint
npm run dev        start the development server
npm run build      create the production build (.next/)
npm run start      run the production build
npm run lint       check the code with ESLint
npm run lint:fix   fix lint problems automatically

Project Structure

The code is split into small, reusable parts: pages only assemble components, and components read their content from the data folder.

Folder structure

Your_Item/
  public/
    favicon.ico
    assets/             css/, fonts/, icon/, images/, scss/
  src/
    main.tsx            app entry
    App.tsx             all routes (React Router)
    pages/              one folder per page (page.tsx) + layout.tsx per group
    components/         headers, footers, homes, shop, modals, ui ...
    context/            Zustand store and React context
    data/               demo content (products, blogs, sliders ...)
    hooks/  lib/  types/  utils/
    styles/styles.scss  loads public/assets/scss/globals.scss
  index.html            page title and Google Fonts
  vite.config.ts        "@" alias -> src
  vercel.json           SPA rewrite for Vercel
  package.json  tsconfig*.json  eslint.config.js
Your_Item/
  app/
    layout.tsx          root layout: fonts, global SCSS, modals
    page.tsx            home page ("/")
    (homes)/            route groups: the name in ( ) is not part of the URL
    (shop)/  (shop-details)/  (cart-pages)/  (account)/  (blogs)/  (other-pages)/
      layout.tsx        shared layout of the group (header, footer)
      <route>/page.tsx  one folder per page
    favicon.ico
  components/           headers, footers, homes, shop, modals, ui ...
  context/  data/  hooks/  lib/  types/  utils/
  public/
    assets/             css/, fonts/, icon/, images/, scss/
  next.config.ts  tsconfig.json  eslint.config.mjs  package.json

The folder and page names above are an example, the exact list differs per item.

Path alias

Imports start with @/, so you never write long relative paths. In the React package @ points to src, in the Next.js package it points to the project root.

import Header1 from "@/components/headers/Header1";
import { products } from "@/data/products";

Components

  • components/headers and components/footers: top bar, header and footer variations
  • components/homes/<home>: the sections of each home page
  • components/shop, shop-details, productCards: product lists, product page and cards
  • components/modals: cart, quick view, search, login and mobile menu
  • components/common and ui: shared pieces such as page title, scroll to top and smooth scroll

Pages & Routing

How pages are loaded

All routes are declared in src/App.tsx. Pages are lazy-loaded and grouped by layout (header, footer), so every page in a group shares the same layout.

const FaqPage = lazy(() => import("@/pages/other-pages/faq/page"));

<Route element={<OtherPagesLayout />}>
  <Route path="/faq" element={<FaqPage />} />
</Route>

Add a new page

  1. Copy an existing page folder, for example src/pages/other-pages/faq, to src/pages/other-pages/my-page.
  2. In src/App.tsx, add the lazy import and a <Route path="/my-page" element={<MyPage />} /> inside the layout route.
  3. Link to it with <Link to="/my-page"> from react-router-dom.

Set the title and description of each page with the MetaComponent:

const metadata = { title: "My page | Your_Item", description: "Page description" };

export default function MyPage() {
  return (
    <>
      <MetaComponent meta={metadata} />
      ...
    </>
  );
}

How pages are loaded

Routing is file based (App Router). Every folder that contains a page.tsx becomes a URL, and a layout.tsx wraps all pages of its folder. Folder names in parentheses, like (shop), only group pages and are not part of the URL.

Add a new page

  1. Create app/(other-pages)/my-page/page.tsx (copy an existing page, for example faq). The page is available at /my-page.
  2. Link to it with <Link href="/my-page"> from next/link.
  3. Add "use client"; on the first line of any component that uses state or browser events (the template already does this where needed).

Set the title and description of each page by exporting metadata:

import { Metadata } from "next";

export const metadata: Metadata = {
  title: "My page | Your_Item",
  description: "Page description",
};

export default function MyPage() {
  return <>...</>;
}

Change the home page

In the React package edit the route path="/" in src/App.tsx and point it to another home page, for example HomePage2.

In the Next.js package open app/page.tsx and change the import to another home page, for example ./(homes)/home-02/page.

Styling (SCSS)

All styles live in public/assets/scss and are compiled automatically by the dev server and the build (the sass package is already installed). The entry file is globals.scss: it loads the plugin CSS, the icon font and the theme.

It is imported once, in src/styles/styles.scss (loaded by src/App.tsx).

It is imported once, in app/layout.tsx.

SCSS structure ( scss/ )

abstracts/   _variable.scss (colors, fonts, sizes), _mixin.scss
core/        reset, typography and helper classes
component/   header, footer, shop, blog, elements (buttons, forms, tabs ...)
app.scss     imports everything above
custom.scss  small overrides, a good place for your own CSS

Change colors

Colors are CSS variables defined in abstracts/_variable.scss. Change the value and the whole template follows (the values below are an example, each item has its own palette):

:root {
  --primary: #ea0f5b;
  --main: #1a1a1a;
  --text-primary: #1d358f;
  --text-secondary: #717171;
  --line: #e4e4e4;
  --surface: #F1F4F8;
}

Change fonts

The fonts are loaded from Google Fonts. Replace the <link> in index.html with the font you want, then update the font variables in abstracts/_variable.scss (example fonts: Barlow and Manrope):

$font-main: var(--font-barlow), "Barlow", sans-serif;

:root {
  --font-barlow: 'Barlow', sans-serif;
}

Fonts are loaded with next/font/google in app/layout.tsx. Replace the font there, keep the variable name, and update abstracts/_variable.scss if you rename it (example fonts: Barlow and Manrope):

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

const barlow = Inter({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  variable: "--font-barlow",
  display: "swap",
});

Plugin CSS files and icons

css/bootstrap.min.css        grid & components
css/swiper-bundle.min.css    sliders
css/animate.css              animations
css/drift-basic.min.css      product image zoom
css/bootstrap-select.min.css select dropdown
icon/icomoon/style.css       icon font, use <i className="icon icon-ArrowUpRight" />
(the list differs per item: only the files imported in globals.scss are used)

Customize Your Template

i
Tip

Common changes you will make on every template. Use your editor’s Search in files (Ctrl + Shift + F) to change a text everywhere at once.

1. Page title, description and keywords

The default title is in index.html (<title>) and in src/components/common/MetaComponent.tsx. Each page can override it with its own metadata object (see Pages & Routing).

The default title and description are exported as metadata in app/layout.tsx. Each page can override them with its own export const metadata (see Pages & Routing).

2. Logo

Logos are in public/assets/images/logo/ (logo.svg, logo-2.svg). Replace the file and keep the same name, or change the src in the header and footer components (components/headers, components/footers). Paths start with /assets/..., never with public.

3. Favicon

Replace public/favicon.ico (referenced in index.html).

Replace app/favicon.ico. Next.js uses it automatically.

4. Content (data files)

Most text and products come from files in the data folder (products.ts, blogs.ts, categories.ts, sliders.ts, testimonials.ts, topbar.ts, footer.ts …). Edit the values, add or remove items, and the page updates:

export const topbar1: TopbarItem[] = [
  { id: 1, text: "Enjoy 10% Off Your First Purchase! Use Code:", coupon: "FIRST10" },
  { id: 2, text: "Limited Time Offer: Free shipping on all orders over $50" },
];

5. Menu, header and footer

The menu and links are inside the components in components/headers, components/footers and components/modals/MobileMenu.tsx. Change the text and the link (to="..." in React, href="..." in Next.js).

6. Images

Put your images in public/assets/images and use the path that starts with /assets/images/....

Put your images in public/assets/images and use the path that starts with /assets/images/.... Many images use next/image, so keep the width and height props when you change them.

7. Forms (contact, newsletter)

!
Forms do not send emails by default

The contact, support and footer forms only prevent the page from reloading, they do not send anything. The newsletter form of the call-to-action section posts to a demo endpoint. Connect each form to your own service before going live.

Replace the demo URL in components/common/CtaNewsletterForm.tsx with your own endpoint or email service (Brevo, Mailchimp, your API …). The contact form is in components/otherPages/contact/ContactForm.tsx: add your request inside handleSubmit.

In the Next.js package you can also receive the form on the same project with a route handler, for example app/api/contact/route.ts.

8. Cart, wishlist and compare

The shop is a front-end demo. Cart, wishlist, compare and quick view are handled by the Zustand store in context/store.ts and are saved in the visitor’s browser. There is no payment: connect the checkout to your own backend or e-commerce service.

9. Google Map

Open components/otherPages/contact/Map.tsx (and our-store/OurStore.tsx). On Google Maps click Share > Embed a map, copy the src of the iframe and paste it into the component.

Build & Deploy

Create the production version with:

npm run build

The ready-to-upload site is created in the dist folder. Upload its content to any static hosting (Vercel, Netlify, Cloudflare Pages, your own server). Run npm run preview to test it locally first.

!
Single-page app: add a fallback to index.html

Pages like /shop-default only exist inside the app, so the host must serve index.html for every URL, otherwise a page refresh shows 404. The package includes vercel.json for Vercel. On Netlify add a _redirects file with /* /index.html 200; on Apache use a rewrite rule to index.html.

Then start it with npm run start. The Next.js package runs on a Node.js server, so choose a host that supports Next.js. The easiest way is Vercel: push the project to Git, import it on vercel.com and it is detected automatically. Any other Node.js 20.19+ host also works.

i
Environment

Use Node.js 20.19 or newer on your hosting, the same version you used locally.

Credits & Dependencies

The exact versions are listed in package.json. The list differs slightly per item.

Still need help?

Thank you for choosing Themesflat. If something in this guide is unclear, or you need the full template with demo images, our team is happy to help. Create a ticket or send us an email and we will reply as soon as possible.

Create a ticket[email protected]Explore more React & Next.js templates

© Themesflat · Sold on Vithemes. All demo images are for preview purposes only.