✨ Get all templates and new upcoming releases for just $89. Limited time offer ✨
Tailwind CSS

React Templates

This section of the documentation refers solely to Mosaic, our Tailwind CSS admin dashboard template. It consist of a basic app created with Vite, one of the most modern frontend tools that is popular among developers due to its impressive features, including instant server start, super-fast Hot Module Replacement, and more.

We ship this React template with a basic configuration to help you quickly get started with the development process.

Quickstart

To get started with Mosaic React, navigate to the main folder of the template, and find the file that includes -react in its name. Unzip the file and you’re ready to begin customizing your React app.

Download and unzip the files

Open the project folder with the code editor of your choice and launch the terminal. Run npm i to install all the required dependencies, and then run npm run dev. Vite will run a local server and provide you with the URL to view the app. The page will reload every time you make changes.

Install the dependencies and run a development server

From this point on, you can start customizing the template. Every change you make to class names will trigger CSS regeneration.

Changing the Welcome Banner colors

Folder structure

The folder structure of the template is designed to be easy to understand for the end user. The root of the template contains essential files for the React template to function, such as Vite configuration files and PostCSS.

The src/ folder contains all the necessary files to customize the template. React components are organized into three folders:

  • pages/ contains the pages that make up the template.
  • partials/ includes partial components such as the header, footer, page sections, and more.
  • utils/ contains utility functions.
  • components/ contains reusable components like modals, dropdowns, and more.
  • charts/ contains the dashboard components showing charts made with Chart.js.
How the React template is structured

In addition, the src/ directory contains other folders such as css/ and images/, whose contents are explicitly described by their respective names.

Routing

Routing is the process of redirecting to a different page based on user navigation. In the React template, we use an external library called React Router, which is imported into the main.jsx file and enables client-side routing.

In the App.jsx file, we imported all the template pages and defined routes for each of them using their respective paths.

The routing files

Adding or removing pages

Every template comes with a set of pre-built pages. At some point, you may need to add or remove pages from your site.

To remove a page, find the page component to remove and delete it. After that, you’ll also need to remove the import statement from the App.jsx file and the corresponding route path.

How to remove a page component

To add a new page to your website or app, you’ll need to follow a few steps. First, you’ll need to create a new page component. This component will contain the code that defines the content and layout of the new page.

How to create a new page component

Once you’ve created the component, you’ll need to import it into the App.jsx file. This file is the main entry point for your app, and it contains the code that sets up the routing system for your pages. By importing your new component into this file, you’ll be able to include it in your app’s navigation flow.

Finally, you’ll need to define a route path for the new page. This is the URL that users will use to access the new page. By defining a route path, you’ll be telling your app which component to render when a user navigates to the specified URL.

Setting a route for the new page

Building and deploying your React app

After making your changes, run npm run build to compile and minify your code for production. By default, the build output will be placed in the dist folder. Once you have built the app, you can test it locally by running the npm run preview command.

Build and preview the React app

If everything is working correctly, you’re ready to deploy your app. You can use GitHub Pages, GitLab Pages, Netlify, Vercel, or any other hosting service you prefer. For more information, refer to the Vite documentation.

Last updated on July 10, 2024