Guide
Customizing our Components

Customizing our Components

Overview

This guide provides a detailed overview of how you can customize the components provided in our template. You can modify the components to suit your requirements and preferences. Whether you're dealing with components in the @core, components, or layouts directories, this document outlines the steps to customize them effectively to meet your needs.

Components in the @core Directory

️💡

Do not make any changes in the @core, components, or layouts directories directly, unless suggested by our support team. It is the core functionality of the template which is responsible to run the application. The @core, components, and layouts directories will receive updates from time to time. If you make changes directly to these directories, you may lose your customizations when you update the template.

If you want to customize the components in the @core, components, or layouts directories, you should follow the steps below:

  1. Create a new component: Create a new component in the components directory. You can name the component as per your preference.
  2. Copy the code: Copy the code from the component in the @core, components, or layouts directory that you want to customize.
  3. Paste the code: Paste the code into the new component you created in the components directory.
  4. Modify the code: Modify the code as per your requirements. You can change the styles, add new functionality, or make any other changes you need.
  5. Use the new component: Use the new component in your application where you want to apply the customizations.

Example

Let's say you want to customize the Button component in the @core directory. Here's how you can do it:

  1. Copy the @core/Button component code.
  2. Create a new folder named customized in the @core, components, or layouts directory.
  3. Create a new file named Button.js in the customized folder.
  4. Paste the copied code into the Button.js file.
  5. Modify the code as per your requirements.
  6. Use the Button component from the customized folder in your application.

By following these steps, you can customize the components in the @core, components, or layouts directories without losing your customizations when you update the template.

Components in the components Directory

If you want to customize the components in the components directory, you can follow the same steps as mentioned above for the @core directory.

Components in the layouts Directory

If you want to customize the components in the layouts directory, you can follow the same steps as mentioned above for the @core directory.

Conclusion

Customizing the components in our template is a straightforward process. By following the steps outlined in this guide, you can easily modify the components to meet your specific requirements and preferences. Remember to create new components in the components directory and avoid making changes directly to the @core, components, or layouts directories to ensure that your customizations are preserved when you update the template.

ToggleDeployment