---
description: >-
  Simple intuitive folder structure helps you to navigate easily without any
  hassle.
---

# Folder Structure

Under th&#x65;**`mantis-material-react/`** directory, You will find the following folder structure.

{% tabs %}
{% tab title="Folder Structure (CRA)" %}
```javascript
mantis-material-react
..
├── public
├── src
│   ├── _api               -> Mock JSON data to be used for working apps
│   ├── assets
│   │   ├── images
│   │   ├── third-party    -> Third-party styles
│   ├── components         -> Common components used across a theme
│   │   ├── @extended      -> Extended components of MUI
│   │   ├── cards          -> Cards used at different locations
│   │   ├── logo
│   │   ├── third-party
│   │   ├── ...
│   ├── contexts           -> State context for Login management & config
│   ├── data               -> Static data
│   ├── hooks              -> Custom hooks
│   ├── layout
│   │   ├── Auth           -> Layout for login showcase
│   │   ├── Component      -> Layout for components showcase
│   │   ├── Dashboard      -> Layout for dashboard
│   │   ├── Pages          -> Blank pages
│   │   ├── Simple         -> Layout for landing and contact showcase
│   ├── menu-items         -> Menu items
│   ├── pages              -> View files for all pages
│   │   ├── apps
│   │   ├── auth
│   │   ├── ...
│   ├── routes             -> Different routes based on layouts
│   ├── sections           -> This contains different sections used only for pages
│   ├── themes             -> Contains application style and theme
│   │   ├── overrides      -> MUI overrides for each component
│   │   ├── theme          -> Different theme preset
│   │   ├── ...            -> Other theme-related setups
│   ├── utils
│   │   ├── locales        -> Different locale JSON files
│   │   ├── route-guard    -> Auth guard to prevent unexpected navigations
│   │   ├── ...            -> Other utils function
│   ├── App.js
│   ├── config.js          -> Different theme config
│   ├── index.js
├── .env                   -> Store configuration settings and environment variables
├── eslint.rc              -> To configure ESLint rules
├── .prettiertc            -> To Code formatting style rules
├── jsconfig.json
├── package-lock.json      -> File generated by npm
├── package.json           -> Contains metadata (name, version, dependencies, scripts, and other)
├── README.md
├── yarn.lock              -> File generated by yarn
```
{% endtab %}

{% tab title="nextJS" %}
```
mantis-material-react
..
├── public
│   ├── assets                  -> Images in different directories
│   │   ├── images
│   │   │   ├── auth
│   │   │   ├── cards
│   │   │   ├── docs
│   │   │   ├── ...
│   │   ├── third-party         -> Third-party styles
├── README.md
├── src
│   ├── api                     -> Mock JSON data to be used for working apps
│   ├── app                     -> Next js pages
│   │   ├── (auth)
│   │   │   ├── check-mail
│   │   │   ├── forget-pass
│   │   │   ├── ...
│   │   ├── (component)
│   │   │   ├── components-overview
│   │   │   │   ├── accordion
│   │   │   │   ├── autocomplete
│   │   │   │   ├── ...
│   │   ├── (dashboard)
│   │   │   ├── apps
│   │   │   ├── charts
│   │   │   ├── ...
│   │   ├── (simple)
│   │   │   ├── contact-us
│   │   │   ├── landing
│   │   ├── api                 -> NextAuth api
│   │   ├── pages
│   │   ├── ...
│   ├── components              -> Components used in different pages
│   │   ├── @extended           -> Extended components of MUI
│   │   ├── cards               -> Cards used at different locations
│   │   ├── logo
│   │   ├── third-party
│   │   ├── ...
│   ├── contexts                -> State context for Login and other
│   ├── data                    -> Static data
│   ├── hooks                   -> Custom hooks
│   ├── layout
│   │   ├── componentLayout     -> Layouts for Component
│   │   ├── DashboardLayout     -> Layout for main Dashboard
│   │   ├── SimpleLayout        -> Layout for simple page
│   ├── menu-items              -> Menu items
│   │   ├── application.js
│   │   ├── dashboard.js
│   │   ├── ...
│   ├── sections                -> This contains different sections used only for pages
│   │   ├── apps
│   │   ├── auth
│   │   ├── ...
│   ├── themes                  -> Contains application style and theme
│   ├── types                   -> Common types for Typescript. Exist only in Typescript
│   ├── utils
│   │   ├── locales             -> Different locale json files
│   │   ├── route-guard         -> Auth guard to prevent unexpected navigations
│   │   ├── ...                 -> Other utils function
│   ├── views                   -> View files for all pages
│   │   ├── apps
│   │   ├── auth
│   │   ├── ...
├── ├── config.js               -> Template constant value and Different theme config
├── .env                        -> Store configuration settings and environment variables
├── eslint.json                 -> To configure ESLint rules
├── .prettiertc                 -> To Code formatting style rules
├── jsconfig.json
├── next.config.js              -> To customize routes, webpack configurations, and more.
├── package-lock.json           -> File generated by npm
├── package.json                -> Contains metadata (name, version, dependencies, scripts, and other)
├── README.md
├── yarn.lock                   -> File generated by yarn
```
{% endtab %}
{% endtabs %}
