How to use Metronic with React
How to useMetronic with react. The directory of metrnoic/react consists only demo projects? Am I need to modify the demo? If yes then I have troubles with npm run build. If no how to integrateit to react? Thank you for your future response
Replies (4)
Hi,
Thank you for reaching out to us.
You can download all React demos and other Metronic versions from Metronic Downloads page.
The implementation way depends on your project requirements, you can use our themes as a base for your project and then apply your own code, or if you already have a project you can copy theme separate parts to your existing project.
Does npm run build throw any error?
Could you please attach your error message so we can help in resolving it?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
How to integrate Metronic into empty react project? Please, can you answer as simple as possible. I need to understand how to do it
Hi,
Unfortunately, there is no simple answer, since implementation always depends on project complexity and requirements.
Here are the most important theme parts you have to include in your project:
Mandatory style file:
import "./_metronic/assets/sass/style.scss"The file requires bootstrap dependency and contains all core Metronic styles.
Ts component initialization wrappes: src/_metronic/layout/MasterInit.tsx. This wrapper initializes our custom ts components includ this wrapper to use drawers, menus, sticky elements, etc.
Keenicon styles.
import "./_metronic/assets/keenicons/duotone/style.css"
import "./_metronic/assets/keenicons/outline/style.css"
import "./_metronic/assets/keenicons/solid/style.css"Styling for our Keenicon, the main icon set used in the theme.
For usage examples, you can refer to our docs.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
While the Metronic React download provides demo projects, you don't necessarily need to modify them directly. These demos serve as showcases and starting points.
The core Metronic React code resides within the src directory. This includes essential components, styles, and layout configurations. Slope 3 can be intense. Don't get discouraged; take breaks to avoid frustration.
