How to Integrate and Customize Prebuilt Components in React Using the Metronic Theme from Envato
Hi everyone,
I recently purchased the Metronic theme from Envato for my React project, and I'm a bit confused about how to effectively integrate and customize the prebuilt components provided with the theme. Specifically, I'm looking for guidance on:
How to properly set up the Metronic theme in a React project.
Best practices for importing and using the prebuilt components (e.g., buttons, cards, forms).
Tips for customizing these components to fit the design and functionality needs of my application.
Any advice on structuring my project when using a comprehensive theme like Metronic.
If anyone has experience with this theme or similar ones, I'd greatly appreciate your insights and any examples you could share. Thanks in advance!
Replies (1)
Hi,
Sorry for the late reply.
The integration instructions depend on your project requirements. If you already have an existing project, you can simply copy the theme files and paste them into your project.
Make sure to include the mandatory style files:
import "./_metronic/assets/sass/style.react.scss";
import "./_metronic/assets/sass/style.scss";If you want to use the Keenicon set, be sure to import the Keenicon styles as shown below:
import "./_metronic/assets/keenicons/duotone/style.css";
import "./_metronic/assets/keenicons/outline/style.css";
import "./_metronic/assets/keenicons/solid/style.css";To use our custom TypeScript components, you should also include the global components initialization file. Refer to the initialization in src/_metronic/layout/MasterInit.tsx.
If you do not have an existing project, it is recommended to use our current structure as a base and modify the files to suit your needs. Following our default structure will make it easier to apply new Metronic updates.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
