The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro

Bringing in components from the free templates


Hello

What is the best way to bring in components from the Free Templates page (say for example this one: https://keenthemes.com/products/start-react-free).

I am currently using React Demo01.

It feels like the React version has gotten the short end of the stick when it comes to components and there are a lot more prettier ones in HTML.

Bringing over react components from another "app folder" is trickey....making sure imports and modules all OK and confirming levels etc...

Perhaps a quit doc or video or reply would help me a lot. How would one of your seasoned devs perform such thing. Thanks in advance.


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 (3)

 
Deleted comment
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment

Hi,

Thank you for reaching out to us.

Components from our other themes were not designed to be used in Metronic, but you can easily reuse any of the components from our HTML version, All styles needed for every page are already included in our React theme all you have to do is just copy html markup from HTML version and place it into your TSX component. Please note, that some of the pages might require additional dependencies installation and initialization of js file.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



somehow i know that just copying and pasting a component from the html version to a react component that's not gonna work lollll

is there ANY WAY - we can get a quick video doing this properly or a few steps using real actual examples.



Hi,

There are some differences from the plain HTML you should fix to make it work in React component.

Primary, you should replace class attribute with className and replace HTML comments with JSX comments.

For easier plain HTML to JSX migration, you can use this transform tool:

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  :(
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.