1. Item Name : MultiModal - Responsive TailwindCSS Modals and Popups React NextJs Template.
  2. Item Version : v 1.0.0
  3. Author : MKTemplateWizard
  4. Support Email: khanmonir1335@gmail.com

Introduction

MultiModal - Responsive TailwindCSS Modals and Popups React NextJs Template Documentation.

For any support please don't hesitate to contact us via our profile (https://codecanyon.net/user/mktemplatewizard) page or sent email on khanmonir1335@gmail.com. We will be more than happy to assist you.

We would like to thank you for choosing MultiModal.

Getting started

MultiModal - Responsive TailwindCSS Modals and Popups React NextJs Template

Requirements

There are system requirements in order to install and setup MultiModal template and its components properly. Make sure that you are installed node.js and Yarn.

For nodejs go here Nodjs

For yarn go here Yarn

Install Yarn

Template Features

  • React JS
  • Next JS 14+ (App Router)
  • Based on TailwindCSS 3+
  • 50+ Amazing Modal Collection
  • 20+ Prebuilt Modal Components
  • Position, Backdrop Color, Backdrop Transparency, Box Position, Blur, Bar etc Modal Examples Included
  • Nice and Clean Design
  • Clean and commented code
  • Customizeable all components of each page
  • Integrated with React Icons
  • Easy to customize
  • Flexible and multi-purpose
  • 24/7 Awesome support
  • Detailed documentation

What's Included

After purchasing MultiModal template on CodeCanyon.net with your Envato account, go to your Download page. You can choose to download MultiModal template package which contains the following files:

The contents of the template package downloaded from CodeCanyon

  • MultiModal - An React Next js TailwindCSS Modals Template file. this file you can edit and simplify your web development process and elevate your user interfaces with MultiModal.
  • Documentation - This folder contains what you are reading now :)

React Installation

Please follow the instructions in the video to see how you can install react on your hosting:

  1. For local host -
    1. Open you command prompt
    2. npm install or npm install --legacy-peer-deps
    3. npm run dev (will start the dev server at http://loaclhost:3000)


  1. For locally build and start the locally build server -
    1. Open you command prompt
    2. npm run build or yarn build (will build locally and generate folders and files in .next folder)
    3. npm run start or yarn start (will start the locally build server at http://loaclhost:3000)
  2. Deploying to Vercel - https://www.youtube.com/watch?v=_8wkKL0LKks


Other Scripts
  1. Open you command prompt
  2. npm run lint:fix or yarn lint:fix (This will format your code and fix auto fixable eslint error)

Customize Pre Built Modals

To customize Pre Built Modals do the following:

  1. From the project folder go to srcapp components Modal-Components PreBuiltModals All components
  2. Then customize the Pre Built Modals
Pre Built Modals
Customize the Pre Built Modals

Customize Box Position Modals

To customize Box Position Modals do the following:

  1. From the project folder go to srcapp components Modal-Components PositionModals All components
  2. Then customize the Box Position Modals
1.0.0
Customize the Box Position Modals

Customize Bar Modals

To customize Bar Modals do the following:

  1. From the project folder go to srcapp components Modal-Components BarModals All components
  2. Then customize the Bar Modals
career-data
Customize the Bar Modals

Customize Backdrop Color Modals

To customize Backdrop Color Modals do the following:

  1. From the project folder go to srcapp components Modal-Components BackdropColorModals All components
  2. Then customize the Backdrop Color Modals
about-data
Customize Backdrop Color Modals

Customize Backdrop Transparency Modals

To customize Backdrop Transparency Modals do the following:

  1. From the project folder go to srcapp components Modal-Components BackdropColorTransparencyModals All components
  2. Then customize the Backdrop Transparency Modals
slider-data
Customize the Backdrop Transparency Modals

Customize Backdrop Blur Modals

To customize Backdrop Blur Modals do the following:

  1. From the project folder go to srcapp components Modal-Components BackdropBlurModals All components
  2. Then customize the Backdrop Blur Modals
portfolio-data
Customize the Backdrop Blur Modals

Customize Box Color Modals

To customize Box Color Modals do the following:

  1. From the project folder go to srcapp components Modal-Components BoxBackgroundColorModals All components
  2. Then customize the Box Color Modals
brand-data
Customize the Box Color Modals

Customize Color Family

To change Color Family you can change by following this screenshot here.

  1. From the project folder go to tailwind.config.js Open the menu you want to use
  2. Then customize the Color Family
color change
Customize the color

Customize Google Font

To change Google Font you can change by following this screenshot here.

  1. From the project folder go to srcapp layout.tsx You can change google font here
  2. Then customize the Typography data
1.0.0
Customize the Typography

Source and Credits