Next.js + Tailwind v4
v1.0.0
Mivora - Logistics, Supply Service Next.js Template
Thank you for your purchase! Mivora is a premium, developer-friendly Next.js template integrated with Tailwind CSS 4, built to help you launch fast and performant logistics, transport, supply chain services, freight forwarding, and warehouse management websites.
Introduction
Mivora Next.js Edition is built with clean component architecture and modern React design patterns. This template is extremely fast, highly optimized for search engines (SEO), and provides fully customizable components.
With Next.js App Router structure, page loads are near-instant, and page transitions are seamless. Under the hood, it utilizes Tailwind CSS 4 to manage styling configurations efficiently.
Prerequisites
Please ensure you have these tools installed before setting up the application:
Node.js (v18.x or v20.x+)
Recommended version is v18.0.0 or higher. You can check your version using node -v.
Package Manager
We highly recommend Bun since the template includes a lockfile (bun.lock), but you can also use npm or Yarn.
Git
For version controlling and continuous deployment integrations (e.g. Vercel, Netlify, Github).
Getting Started
Follow these simple commands to get the development environment running. Choose your package manager below:
Package Scripts Overview
| Command | Target Script | Description |
|---|---|---|
| dev | next dev --turbopack | Runs local development server with hot-reload and Turbopack support at http://localhost:3000. |
| build | next build --turbopack | Compiles the project and generates static-site and server-rendered optimization bundle in the .next directory. |
| start | next start | Launches production Next.js HTTP server. Runs optimized built files. |
| lint | eslint | Executes ESLint checking to find code errors and syntax violations. |
| format | prettier --write './src/**/*.{ts,tsx,js,jsx}' | Runs Prettier to automatically format source files. |
Project Structure
This directory tree explains the core project layout:
mivora-next/ ├── public/ # Static public assets (logos, icons, videos) ├── src/ │ ├── app/ # Next.js App Router folder │ │ ├── (pages)/ # Inner sub-pages layout groups │ │ │ ├── blog/ # Blog page views │ │ │ ├── blog-details/ # Blog details page views │ │ │ ├── case-studies/ # Case studies / projects page │ │ │ ├── contact/ # Contact Us page │ │ │ └── service-static/# Service Static page │ │ ├── about/ # About page view │ │ ├── home/ # Home / Landing page views │ │ ├── layout.tsx # Root layout for the application │ │ └── page.tsx # Entry page redirecting to /home │ ├── assets/ # Global assets │ │ ├── css/ # Core CSS and configurations │ │ │ ├── style.css # Styles imports and Tailwind direct entry │ │ │ ├── _config.css # Theme Colors and fonts CSS variable configuration │ │ │ ├── _general.css # General custom styles │ │ │ └── _swiper.css # Swiper custom styles │ │ └── images/ # Images, banners, and static graphic assets │ ├── components/ # Reusable UI React components │ │ ├── footer/ # Global Footer component │ │ ├── navbar/ # Global Navbar navigation component │ │ └── wrappers/ # Provider/Client wrapper components │ ├── config/ # App-wide configuration │ │ └── constants.ts # Global constant values │ ├── utils/ # Utility helper scripts │ │ └── preline.ts # Preline UI helper script │ ├── globals.d.ts # Global TypeScript typings │ └── smoothscroll.d.ts # Smooth scroll TypeScript definitions ├── eslint.config.mjs # ESLint rules configuration ├── next.config.ts # Next.js configuration options ├── package.json # Project dependencies and scripts configuration ├── tsconfig.json # TypeScript compiler configuration └── bun.lock # Bun lockfile for dependency resolution
Font Customization
Mivora uses Next.js integrated Google Fonts (next/font/google) to fetch fonts dynamically and optimize layout shifts.
Step 1: Import font and declare variable in Layout
Open src/app/layout.tsx and configure your font imports:
import { Inter, Instrument_Sans } from 'next/font/google'
const inter = Inter({
variable: '--font-body',
subsets: ['latin'],
display: 'swap',
})
const instrumentSans = Instrument_Sans({
variable: '--font-heading',
subsets: ['latin'],
display: 'swap',
})
Step 2: Add font class to html tag
Still inside src/app/layout.tsx, load it into the template wrapper classes:
<html lang="en" className={`${inter.variable} ${instrumentSans.variable} antialiased`}>
Step 3: Define Font in CSS Theme
Tailwind CSS 4 reads your CSS variables directly. In src/assets/css/_config.css, map it to the body:
@theme {
--font-heading: "Instrument Sans", sans-serif;
--font-body: "Inter", sans-serif;
}
Theme & Colors Customization
Tailwind CSS v4 introduces the new CSS-first configuration via `@theme` directives instead of standard JS files. You can change Mivora's primary accent colors by updating the variables in:
src/assets/css/_config.css
/* src/assets/css/_config.css */
@theme {
--font-body: "Inter", sans-serif;
--font-heading: "Instrument Sans", sans-serif;
--color-primary-1:#7eea57;
--color-primary-2:#f75ccb;
--color-primary-3:#ff7040;
--color-primary-4:#0a5;
--color-dark:#212121;
--color-body-bg: #f7f7f7;
--color-body-color: var(--color-default-600);
--color-default-50: var(--color-zinc-50);
--color-default-100: var(--color-zinc-100);
--color-default-200: var(--color-zinc-200);
--color-default-300: var(--color-zinc-300);
--color-default-400: var(--color-zinc-400);
--color-default-500: var(--color-zinc-500);
--color-default-600: var(--color-zinc-600);
--color-default-700: var(--color-zinc-700);
--color-default-800: var(--color-zinc-800);
--color-default-900: var(--color-zinc-900);
--color-default-950: var(--color-zinc-950);
--text-md:15px;
}
Tip: Once updated, Tailwind CSS 4 JIT compiler will automatically compile new utility classes like `bg-primary`, `text-primary`, and hover variants across all routes.
Sources & Credits
Here is the list of third-party libraries, frameworks, and tools used to build the Mivora Next.js template:
Support
Thank you once again for purchasing Mivora. If you encounter any bugs, layout issues, or require assistance adapting templates to your Next configurations, please feel free to reach out to us: