*What Is the Best Way to Organize Custom Code in a Metronic Laravel Project?

Hi there,

Understanding

You're working on a Laravel project with Metronic and want to add custom components, CSS, and JavaScript without touching the core theme files — so future Metronic updates stay easy to apply.

Solution

The recommended approach for Metronic v9 (Tailwind) in Laravel:

1. Use the resources/src directory for custom code

Create your custom files alongside the existing theme structure:

resources/src/
├── custom/
│   ├── css/
│   │   └── app.css          # Your custom styles
│   ├── js/
│   │   └── app.js           # Your custom scripts
│   └── components/
│       └── dashboard.blade.php  # Custom Blade components

2. Import custom files in the entry points

Add your imports in resources/src/app.ts (or the relevant entry point):

import './custom/js/app'
import './custom/css/app.css'

This keeps your code loaded through the existing build pipeline without modifying Metronic's source files.

3. Use Blade components for reusable UI

Create components in app/View/Components/ and register them in resources/views/components/. This keeps them separate from Metronic's layout files.

4. Override styles with Tailwind's @layer

If you need to override Metronic's Tailwind utilities, use a custom CSS file with @layer utilities or @layer components. This ensures your overrides don't fight the existing cascade.

5. For configuration changes, publish vendor files

When Metronic provides publishable config or assets, use php artisan vendor:publish to move them into your project. This gives you local copies to modify.

Sources

• Metronic v9 Laravel Integration Guide
• Metronic Tailwind GitHub

Next Steps

• Start by reviewing the Laravel integration guide linked above
• If you need help with a specific customization, share more details about what you're trying to change

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