Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

metronic react app customization


hi i brought metronic 8 , i have to use react version of it i unzip the demo1 and npm install
now i want to customize it how to do , also i want redux to use for state management can i do that


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi,

Customization depends on your project requirements. if you already have an existing project then you can just copy theme files and paste them into your project.

Please 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 Keenicon set, you should import keenicons styles below.

import "./_metronic/assets/keenicons/duotone/style.css"
import "./_metronic/assets/keenicons/outline/style.css"
import "./_metronic/assets/keenicons/solid/style.css"


Also, to use our custom typescript components you should include our global components initialization file. Refer to initialization in src/_metronic/layout/MasterInit.tsx.

If you do not have an existing project then recommended way is to use our current structure as a base and then modify files to match your needs. By following our default structure will make it much easier to apply new Metronic updates.

Please note that Redux was removed from Metronic v8.0.38, instead of Redux we are using React-Query to handle server state, we are using React-Query for <a herf="https://preview.keenthemes.com/metronic8/react/demo1/apps/user-management/users">Users Management page</a>.

If you need Redux you can easily add it to the latest Metronic React version using Redux official docs.

Please let us know if you have any further questions on this topic or anything else.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(