Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Metronic 9 Tailwind React Demos Setup


Hi,

All Metronic 9 Demos(demo 1 - demo 10) are already available for the Metronic 9 Taiwind React version.

To use your preferred demo please perform below steps:

1) Refer to readme. md and install dependencies and launch the Metronic React app.

2) Import the new demo: 


import { Demo8Layout } from "@/layouts/demo8";


3) Assign Demo8Layout to the page route settings in
src/routing/AppRoutingSetup.tsx:


<Route element={<Demo8Layout />}>

...

</Route.


4) Go to the demo component and customize it as per your requirements:
src/layouts/demo8.

If you need any further help please do let us know.

Regards,
Sean


user
Sean Author 1 year ago
React Laravel Tailwind 4
2 Answers
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 (2)

J
Johar Saifuddin Mandav 1 year ago

Dear Sean we wanted command to switch between one demo to another demo kindly help us


user
Eren Kömürcü 1 year ago

Hi Sean,

Tooltips not working in demo3.

Regards

Edit

I updated the menu elements used in the sidebar using the DefaultTooltip component and it worked.

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  :(