✨ Get all templates and new upcoming releases for just $69. Limited time offer ✨

React templates

Tailwind CSS

Unzip and open the folder of the React template with your favourite editor (I am using VSCode).‌

The first thing to do is to install NPM dependencies. To do that, open the terminal, type npm install and press the Enter key.

Feel confused? 🤔 Watch the video below! 👇

We are shipping our templates with a very basic React + Vite configuration for demonstration purposes only, and to let you quickly get into the development process. In case you want to use a framework built on the top of React (like Gatsby or Next.JS), you would probably need to import components into your project, and make a few adjustments (for example: import styles and images, configure routing, et cetera).

Unfortunately we do not provide support with product customisation, tutorials/guides for non-technical people, neither do we guarantee that our products will be compatible with third party software or services.

Start a development server

Run npm run dev in the terminal to run a development server and open http://localhost:3000/ to view it in the browser. The page will reload every time you make edits.

Any kind of change should be made inside the src folder. Inside that, you will find components, alongside with styles (src/css), images (src/images), and some JavaScript (src/js).

CSS customisations

There isn’t much to say about the CSS when it comes to templates that are built on the top of Tailwind CSS, so I would recommend to check out the Tailwind documentation.

Files structure

All React component files are stored in the src/ folder 👇

├── pages/
│   (contains site pages)
├── partials/
│   (e.g. header, footer, page sections, etc)
└── utils/
    (contains more units, like modal, dropddown, etc)

Add or remove pages

Every template comes with a set of ready-made pages, provided in form of components and stored into the src/pages/ directory.

Router settings are defined in src/App.jsx file so, in case you want to add or remove pages, you should need to add or remove routes in that file. Check out the React Router documentation to know more.

Build the app for production

When you have done with changes, run npm run build for compiling and minify for production. You can learn more on the Vite documentation.

Last updated on January 26, 2022