> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/datta/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codedthemes.gitbook.io/datta/folder-structure.md).

# Folder Structure

Under the**`datta-able-react-hook-reactstrap/`** In the directory, you will find the following folder structure.

{% tabs %}
{% tab title="VITE ( TS )" %}
{% code title="datta-able-react-hook-reactstrap-ts" %}

```
..
├── src
│   ├── api                     -> Mock JSON data to be used for working apps
│   ├── assets
│   │   ├── fonts
│   │   ├── images
│   │   ├── scss                -> Theme style 
│   ├── components              -> Common components used across a theme
│   │   ├── @extended           -> Extended components of MUI
│   │   ├── cards               -> Cards used at different locations
│   │   ├── third-party
│   │   ├── ...
│   ├── contexts                -> State context for Login management and config
│   ├── data                    -> Static data
│   ├── hooks                   -> Custom hooks
│   ├── layout
│   │   ├── Auth                -> Layout for login showcase
│   │   ├── Dashboard           -> Layout for dashboard
│   │   ├── Simple              -> Layout for landing and contact showcase
│   ├── menu-items              -> Menu items
│   ├── routes                  -> Different routes based on layouts 
│   ├── sections                -> This contains different sections used only for pages
│   ├── type                    -> common types for TypeScript
│   ├── utils
│   │   ├── locales             -> Different locale JSON files
│   │   ├── ...                 -> Other utils function
│   ├── views                   -> View files for all pages
│   ├── App.tsx
│   ├── config.ts               -> Different theme config
│   ├── global.scss
│   ├── index.scss
│   ├── index.tsx
├── .env                        -> Store configuration settings and environment variables
├── eslint.config.mjs           -> To configure ESLint rules
├── .prettierrc                 -> To Code formatting style rules
├── tsconfig.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
├── vite.config.mts
```

{% endcode %}
{% endtab %}

{% tab title="VITE ( JS )" %}
{% code title="datta-able-react-hook-reactstrap-js" %}

```
..
├── src
│   ├── api                     -> Mock JSON data to be used for working apps
│   ├── assets
│   │   ├── fonts
│   │   ├── images
│   │   ├── scss                -> Theme style
│   ├── components              -> Common components used across a theme
│   │   ├── @extended           -> Extended components of MUI
│   │   ├── cards               -> Cards used at different locations
│   │   ├── third-party
│   │   ├── ...
│   ├── contexts                -> State context for Login management and config
│   ├── data                    -> Static data
│   ├── hooks                   -> Custom hooks
│   ├── layout
│   │   ├── Auth                -> Layout for login showcase
│   │   ├── Dashboard           -> Layout for dashboard
│   │   ├── Simple              -> Layout for landing and contact showcase
│   ├── menu-items              -> Menu items
│   ├── routes                  -> Different routes based on layouts 
│   ├── sections                -> This contains different sections used only for pages
│   ├── utils
│   │   ├── locales             -> Different locale JSON files
│   │   ├── ...                 -> Other utils function
│   ├── views                   -> View files for all pages
│   ├── App.jsx
│   ├── config.js               -> Different theme config
│   ├── global.scss
│   ├── index.scss
│   ├── index.jsx
├── .env                        -> Store configuration settings and environment variables
├── eslint.config.mjs           -> To configure ESLint rules
├── .prettierrc                 -> To Code formatting style rules
├── tsconfig.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
├── vite.config.mjs
```

{% endcode %}
{% endtab %}
{% endtabs %}