Structure

All of the most important files in the source code are contained in the /src directory.

​

Config files

There are a handful of files in the root that are helpful for configuring a project to work best with MUI, these may include:

• vite.config.js: The Vite configuration file, which is used to set up the project and configure the build process.
• .babelrc.js: The Babel configuration file, which is used to configure the Babel transpiler for MUI imports.
• tsconfig.json: The TypeScript configuration file, which is used to configure the TypeScript compiler for the project.
• .prettierrc.js: The Prettier configuration file, which is used to configure the Prettier code formatter for the project to match the standard MUI code style.

And various others common for other software related projects that are documented well online.

​

Component files

There are 2 types of components in the /src/components directory, kit and app components. You can read more about the distinction between them in the components intro page.

Components in this folder are reviewed by the MUI team to try and follow MUI best practices, if you encounter issues, feel free to reach out. If a problem is related to a MUI components API, it may be best to open an issue on the MUI repository.

​

Routes

Routes are defined in the /src/routes directory, and are used to define the pages that are available in the app. These are used by the framework to navigate between pages in the app.

Adding additional routes requires listing them in the ALL_ROUTES array where they are configured with React Router for Vite.