Skip to main content

Getting Started

Materialize is tailored for both TypeScript and JavaScript enthusiasts, this template is your golden ticket to accelerating project development without compromising on customization.

We provide detailed documentation exclusively for our layouts, menu, custom components and any modifications applied to Material-UI (MUI) components. To learn more about the standard MUI components, please refer to the official Material-UI documentation.

There are two main scenarios while starting with our template:

  1. Starting a New Project: If you're initiating a new project, our template provides a robust starting point.

  2. Integrating into an Existing Project: Since this is a template and a starter project, it's built as the starting point of your project. It cannot be simply installed and used with an existing project like a third party library.

    Although using our template with any existing project is still possible, it would require extra work to connect everything together. We strongly recommend you to either start your project with Materialize, or move your project on top of it to have the best experience.

Our documentation is a treasure trove of insights designed to get you up and running in no time:

1. The Guide​

Begin with our Guide to grasp the essentials of the template. Understanding its core mechanisms is crucial, so we strongly recommend this read before diving into project development.

User Interface: To get familiar with the foundation, components and form elements of the template, refer this guide.

Menu Examples: To learn how to create and customize the menu, and understand the different menu types available, refer this guide.

2. FAQs​

If you face any difficulties with installation, or has any question on usage of this template like changing colors, fonts, branding etc., then treat yourself by visiting FAQs section. You are most likely to find your answer there.

3. In-Depth Articles​

For those craving more, our articles offer deep dives into specific topics, enriching your knowledge and providing detailed guidance. Check out our articles for more.

4. Demo Configs​

Aiming to mirror one of the six demos you admired? Our demo config documentation is here to transform that vision into reality.

5. Installation Guide​

Ensure you're set up correctly by following our installation guide step-by-step. Pay attention to system requirements and notices along the way.

Lost in documentation? Use the search function in the Navigation bar to quickly locate the information you need with relevant keywords.

7. Customizing our Components​

Our component customization guide is a must-read for those looking to tweak/change our components to fit their project's unique requirements.

Getting Started Simplified​

Jumpstart your project with our Starter Kit—a lean, mean setup meant to speed up your project's kickoff. Inside the template zip, you'll find both TypeScript and JavaScript versions, each with a full-version and starter-kit folder to choose from. Here's how to proceed:

  • Choose Your Flavor: Pick between TypeScript and JavaScript versions based on your preference.
  • Starter Kit: Ideal for those who value simplicity and efficiency. It contains only the essentials, making it perfect for small projects or as a starting point.
tip

Begin with the Starter Kit: Start simple with the Starter Kit to enjoy a hassle-free initiation into your project. It's designed to give you a smooth start, with the option to scale up by integrating components from the full version as your project grows.

warning

File Path Awareness: For JavaScript users, remember to tweak the file paths as our documentation leans towards TypeScript references. Here's a quick example to guide you:

TypeScript Path: src/components/Providers.tsx

JavaScript Path: src/components/Providers.jsx

Heads Up

Do not make any changes in the src/@core, src/@layout and src/@menu folders unless suggested by our support team. It is the core functionality of the template which is responsible to run the template.

The src/@core, src/@layout and src/@menu folders will receive updates with each new release. Kindly handle these folders with utmost care, as they contain crucial elements that ensure the template runs properly. Unauthorized changes to them could result in conflicts with subsequent updates, potentially disrupting your project.

Start with the essentials and gradually build your way up. This approach not only keeps the initial phase manageable but also leaves room for adding complexity as your project evolves.