The New Way to Build! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Learn More

RTL Support React Metronics


Hello

I have purchased metronics package for react yesterday.

I was sure that is RTL support, but as indicated in the forms:
Metronic Demo2 RTL In React - KeenThemes

it shows that you haven't released update with RTL support for react

I you do support react, please refer me to the relevant page so I will user is it.

if you don't support it,, please refund me with the amount I purchased the package.

Waiting for an update


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi,

Thank you for reaching out to us.

All our versions share the same style base so you can reuse our RTL solution from the HTML version in your React project.

Follow the steps below:

  1. Generate RTL and LTR CSS style files using our HTML version.
    To generate styles, refer to our gulp build and rtl version setup docs.
  2. Copy the generated style.bundle.css and style.bundle.rtl.css files to public folder in your React app.
  3. In the index.html file, add a link tag with default direction styles as shown below.

    <link rel="stylesheet" href="/style.bundle.css">

  4. Remove the style import line below from src/main.tsx:

    import "./_metronic/assets/sass/style.scss"

  5. To switch the direction dynamically, you just need to change the link href from style.bundle.css to style.bundle.rtl.css.
    You can reuse switch functions from this gist.


If this prevents you from using Metronic further you can request a refund using this form. 100% money back is guaranteed.

Regards,
Lauris Stepanovs,
Keenthemes Support Team
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(