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

Unable to view layouts after Laravel integration in Metronic Tailwind


Hi KeenThemes Team,

I am new to Metronic. I followed the Laravel integration guide from the documentation:

https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/laravel

However, after completing the steps, I am unable to view the layouts properly in the Laravel project.

Could you please guide me on:

Whether any additional setup is required after following the Laravel integration guide?
How to correctly load or view the available layouts?
Whether the ThemeForest package needs any specific files copied into the Laravel starter project?

Any help would be appreciated.


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 Kanmani,

Welcome to Metronic! It looks like you followed the Laravel integration guide but the layouts aren't displaying — this is a common issue and usually comes down to one missing step.

Understanding

The Laravel starter project on GitHub provides the skeleton (controllers, routes, Blade templates) but does not include the Metronic assets (CSS, JS, icons). You need to copy those in separately from your ThemeForest download.

Solution

Step 1 — Clone the Laravel starter project

git clone https://github.com/keenthemes/metronic-tailwind-html-integration.git
cd metronic-tailwind-html-integration/metronic-tailwind-laravel

Step 2 — Install dependencies

composer install
npm install

Step 3 — Copy Metronic assets (this is the key step)

From your ThemeForest download, copy the dist/assets folder into the Laravel project's public/assets/ directory:

cp -r /path/to/metronic-tailwind-html/dist/assets public/assets

This provides the CSS, JavaScript, icons, and media files that the Blade templates reference.

Step 4 — Environment setup

cp .env.example .env
php artisan key:generate

Step 5 — Start the servers

# Terminal 1
php artisan serve

# Terminal 2
npm run dev

Then visit /demo1 through /demo10 to see all 10 layouts.

Important Notes

  • The GitHub starter project provides the Laravel integration framework (controllers, routes, Blade templates).
  • The ThemeForest package provides the Metronic source assets (dist/assets/).
  • Both are needed — the starter project alone won't display layouts without the assets.

Sources

Next Steps

If layouts still don't display after copying the assets, please share:

  1. A screenshot of what you see (blank page, broken styles, error message?)
  2. Any browser console errors (press F12 → Console tab)

That will help us pinpoint the exact issue.


This reply was generated by AI. A human will follow up if needed.

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