Skip to content

Metronic Tailwind Migration Plan

Executive Summary

This plan outlines how to leverage Metronic's visual design patterns while preserving Vell's Blade/Alpine/Livewire architecture. The strategy is style adoption, not language migration.

1. Quick Wins: Illustrations for Error Pages

Current State

Your error pages (resources/views/default/errors/404.blade.php) use large text-based styling without illustrations.

Metronic Assets Available (56 SVGs with dark/light variants)

Illustration Use Case Files
20.svg / 20-dark.svg 500 Error (robot/server) Server error messaging
31.svg / 31-dark.svg 404 Error (lost person) Page not found
3.svg / 3-dark.svg Empty states No activity/data
33.svg / 33-dark.svg Team empty No members

Migration Steps

  1. Copy illustrations to your assets: 

    cp tmp/metronic-tailwind-html-demos/dist/assets/media/illustrations/*.svg \
   public/themes/default/assets/img/illustrations/

  2. Update error.blade.php layout (resources/views/default/layout/error.blade.php:39-52): 

    {{-- Add before the h1 --}}
<div class="mb-10">
    <img alt="error" class="dark:hidden max-h-[160px] mx-auto"
         src="{{ asset('themes/default/assets/img/illustrations/31.svg') }}"/>
    <img alt="error" class="hidden dark:block max-h-[160px] mx-auto"
         src="{{ asset('themes/default/assets/img/illustrations/31-dark.svg') }}"/>
</div>

  3. Use different illustrations per error code in individual error files.

2. Cards Component Enhancement

Current Card Component

Location: resources/views/default/components/card.blade.php

Your card has: variant (none/solid/outline/shadow/outline-shadow) and size (none/xs/sm/md/lg)

Metronic Card Patterns to Adopt

Header with Actions Pattern: 

{{-- Add to card.blade.php as a slot option --}}
@if (!empty($head))
    <div {{ $attributes->twMergeFor('head', 'flex items-center justify-between', $head_base_class) }}>
        <h3 class="text-base font-semibold">{{ $head }}</h3>
        @if (!empty($headActions))
            <div class="flex items-center gap-2">{{ $headActions }}</div>
        @endif
    </div>
@endif

Table Container Pattern: 

{{-- New slot for scrollable table cards --}}
@if ($tableMode ?? false)
    <div class="kt-scrollable-x-auto overflow-x-auto">
        {{ $slot }}
    </div>
@endif

Footer with Centered Link Pattern: 

@if (!empty($foot))
    <div {{ $attributes->twMergeFor('foot', 'flex justify-center', $foot_base_class) }}>
        {{ $foot }}
    </div>
@endif

3. Tables Standardization

Current Pattern (performance.blade.php:318-356)

You're using inline table styling. Metronic provides a cleaner semantic approach.

Add to your SCSS or as Tailwind components:

/* resources/views/default/scss/components/_tables.scss */

.lqd-table {
    @apply w-full text-sm;
}

.lqd-table thead tr {
    @apply border-b border-border;
}

.lqd-table thead th {
    @apply py-3 px-4 font-medium text-foreground/70 text-left;
}

.lqd-table tbody tr {
    @apply border-b border-foreground/5 hover:bg-foreground/5 transition-colors;
}

.lqd-table tbody td {
    @apply py-3 px-4;
}

.lqd-table-fixed {
    @apply table-fixed;
}

/* Column alignments */
.lqd-table th.text-end,
.lqd-table td.text-end {
    @apply text-right;
}

/* Compact variant */
.lqd-table-sm thead th,
.lqd-table-sm tbody td {
    @apply py-2 px-3 text-xs;
}

Blade Table Component

Create resources/views/default/components/table.blade.php: 

@props([
    'variant' => 'default', // default, compact, bordered
    'fixed' => false,
])

<table {{ $attributes->class([
    'lqd-table',
    'lqd-table-fixed' => $fixed,
    'lqd-table-sm' => $variant === 'compact',
]) }}>
    {{ $slot }}
</table>

4. Authentication Pages Enhancement

Metronic Pattern (branded/sign-in.html)

  • Split layout: Form left, branded image right
  • Social login buttons (Google/Apple)
  • Password visibility toggle
  • Remember me checkbox

Files to Update

  1. resources/views/default/auth/login.blade.php
  2. resources/views/default/auth/register.blade.php
  3. resources/views/default/auth/forgot-password.blade.php

Key Styling Patterns to Adopt

{{-- Split layout wrapper --}}
<div class="grid lg:grid-cols-2 grow min-h-screen">
    {{-- Form Side --}}
    <div class="flex justify-center items-center p-8 lg:p-10 order-2 lg:order-1">
        <x-card class="max-w-[370px] w-full">
            {{-- Form content --}}
        </x-card>
    </div>

    {{-- Branded Side --}}
    <div class="lg:rounded-xl lg:border lg:border-border lg:m-5 order-1 lg:order-2
                bg-top xl:bg-cover bg-no-repeat"
         style="background-image: url('{{ asset('path/to/branded-bg.png') }}')">
        <div class="flex flex-col p-8 lg:p-16 gap-4">
            {{-- Logo and tagline --}}
        </div>
    </div>
</div>

5. CRM Profile Standardization for Account Pages

Mapping: Metronic CRM → Vell Features

Metronic Section Maps To Vell Location
General Info (Phone, Email, Status) User Profile account/profile
Attributes (customer_id, license_id) Cloud Connections, BYOC account/connections
API Credentials API Keys account/api-keys
Skills/Tags Subscription Features account/subscription
Deals Table MQLs, SQL deals crm/deals or leads
Recent Activity Activity Timeline account/activity
Teams Contributors teams/members
Campaigns Social Media, Agents agents/list, social/campaigns

Layout Pattern: 3-Column Grid

<div class="grid grid-cols-1 lg:grid-cols-3 gap-5 lg:gap-7.5">
    {{-- Left Column: Info Cards --}}
    <div class="col-span-1 space-y-5">
        <x-card>
            <x-slot name="head">General Info</x-slot>
            {{-- Key-value pairs --}}
        </x-card>

        <x-card>
            <x-slot name="head">API Credentials</x-slot>
            {{-- API key input with copy button --}}
        </x-card>
    </div>

    {{-- Right Column: Main Content --}}
    <div class="col-span-2 space-y-5">
        <x-card>
            <x-slot name="head">Deals</x-slot>
            <x-slot name="headActions">
                {{-- Action menu --}}
            </x-slot>
            <x-table :fixed="true">
                {{-- Deals table --}}
            </x-table>
        </x-card>
    </div>
</div>

Key-Value Display Pattern

<table class="w-full">
    <tbody>
        <tr>
            <td class="text-sm text-secondary-foreground pb-3 pe-4 lg:pe-8">Phone:</td>
            <td class="text-sm text-foreground pb-3">+1 234 567 890</td>
        </tr>
        {{-- More rows --}}
    </tbody>
</table>

6. Comparison: Performance Simulator vs Metronic CRM

Current: performance.blade.php Strengths

  • Good use of <x-card> components
  • Color-coded metrics (green/red for up/down)
  • Responsive grid layout
  • Chart implementation

Improvements from Metronic

  1. Card Header Actions - Add dropdown menus for export/settings
  2. Table Scroll Container - Wrap tables in scrollable container
  3. Status Badges - Use kt-badge style for status indicators
  4. Action Buttons - Add icon-only action buttons per row

Side-by-Side Comparison

Feature Your performance.blade.php Metronic CRM
Card headers Static title Title + action dropdown
Tables Inline overflow scroll kt-scrollable-x-auto wrapper
Status Custom badge classes kt-badge kt-badge-sm kt-badge-{color}
Row actions None Dropdown menu per row
Empty state N/A Illustration + message

7. Action Buttons with Icons

Metronic Pattern

<button class="kt-btn kt-btn-sm kt-btn-icon kt-btn-ghost">
    <i class="ki-filled ki-dots-vertical text-lg"></i>
</button>

Blade Equivalent

Add to your button component variations: 

{{-- In button.blade.php variations array --}}
'icon-only' => 'lqd-btn-icon size-8 p-0',
'ghost' => 'bg-transparent hover:bg-foreground/5',

{{-- Usage --}}
<x-button variant="ghost" size="sm" class="size-8 p-0">
    <x-tabler-dots-vertical class="size-4" />
</x-button>

8. Assets to Copy

Illustrations (Priority: High)

# Run from project root
mkdir -p public/themes/default/assets/img/illustrations
cp tmp/metronic-tailwind-html-demos/dist/assets/media/illustrations/*.svg \
   public/themes/default/assets/img/illustrations/

CSS Components (Priority: Medium)

# Useful CSS patterns to reference
tmp/metronic-tailwind-html-demos/src/css/components/menu.css      # Dropdown menus
tmp/metronic-tailwind-html-demos/src/css/components/scrollable.css # Scroll containers
tmp/metronic-tailwind-html-demos/src/css/components/range.css     # Range sliders
tmp/metronic-tailwind-html-demos/src/css/components/rating.css    # Star ratings

Background Images (Priority: Medium)

mkdir -p public/themes/default/assets/img/backgrounds
cp tmp/metronic-tailwind-html-demos/dist/assets/media/images/2600x1200/bg-1*.png \
   public/themes/default/assets/img/backgrounds/
cp tmp/metronic-tailwind-html-demos/dist/assets/media/images/2600x1600/1*.png \
   public/themes/default/assets/img/backgrounds/auth-

9. Implementation Priority

Phase 1: Quick Wins ✅ COMPLETED

  • Copy illustrations to assets (56 SVGs)
  • Update 404/500/419/503 error pages with illustrations
  • Add table CSS classes to SCSS (.lqd-table variants)

Phase 2: Component Enhancement ✅ COMPLETED

  • Enhance card.blade.php with header actions slot (headActions)
  • Add tableMode prop for scrollable table content
  • Create table.blade.php component with variants
  • Add icon-only button variants (icon, icon-sm, icon-lg, xs)
  • Simplify dashboard card headers (removed icons, using headActions)

Phase 3: User Dashboard & Account Pages (CRM Standardization) ✅ COMPLETED

3.1 Settings Page Redesign ✅ COMPLETED

File: resources/views/default/panel/user/settings/index.blade.php

Implemented: - [x] 2-column layout: sidebar (1/3) + main content (2/3) - [x] Left sidebar: Profile summary with avatar, quick stats (member since, plan status) - [x] Quick navigation links to sections - [x] Right main: Organized cards (Profile Info, Security, Privacy, Danger Zone) - [x] Profile card with 2-column form grid layout - [x] Security card with password change and 2FA headAction link - [x] Privacy card with clean toggle sections using x-forms.input switchers - [x] Danger Zone card for account deletion - [x] Sticky sidebar for easy navigation

3.2 Subscription Plans Page Enhancement

File: resources/views/default/panel/user/finance/subscriptionPlans.blade.php

Current Issues: - No plan comparison table - Limited feature visibility on plan cards - No "Best for" use case labels - Missing upgrade path recommendations

Improvements: - [ ] Add plan comparison toggle (cards vs table view) - [ ] Show "Best for: Teams/Individuals/Enterprise" labels - [ ] Add feature checklist visible on hover/expand - [ ] Quick action: "Compare Plans" button in header - [ ] Show current plan indicator in header

3.3 API Keys Page Enhancement

File: resources/views/default/panel/user/apiKeys/index.blade.php

Current Issues: - Keys displayed in full (security concern) - No inline connection testing - Missing usage stats per key - No key rotation/regeneration

Improvements: - [ ] Mask API keys with reveal toggle - [ ] Add inline "Test Connection" button per provider - [ ] Show last used timestamp - [ ] Add "Regenerate Key" action - [ ] Quick action: "Test All Keys" in header

3.4 Team Management Enhancement

File: resources/views/default/panel/user/team/index.blade.php

Current Issues: - Overview, invite, members in partials but not cohesive - No pending invitations visibility - Missing member role management quick action

Improvements: - [ ] Unified card layout with headActions - [ ] Show pending invitations count as badge - [ ] Quick action: "Invite Member" in header - [ ] Role dropdown in member list rows

3.5 User Dashboard Widgets Enhancement ✅ COMPLETED

Files: resources/views/default/panel/user/dashboard/widgets/*.blade.php

Implemented: - [x] Removed icons from all 14 widget headers (matching admin pattern) - [x] All widgets use headActions slot for "View All" and action buttons - [x] Added quick actions to key widgets: - Team Invite: "Manage Team" headAction - Affiliates: "View Stats" headAction - Subscription Status: "Upgrade" headAction (conditional) - Usage Statistics: "Upgrade" headAction (conditional) - Integrations: "View All" headAction - Brand Voice: "Manage" headAction - AI Assistant: "All Templates" headAction - Recently Launched: "View All" headAction - Favorite Templates/Chatbots: "View All" headActions - SEO/Marketplace widgets: "Open Dashboard" headActions

Phase 4: Dashboard Polish (ongoing)

  • Apply patterns to performance.blade.php (Cloud Marketplace)
  • Standardize all data tables using component
  • Add empty states with illustrations (use 3.svg for empty, 33.svg for no team)
  • Create action dropdown component for row actions

10. User Dashboard Widget Quick Actions Reference

Widget Current Actions Recommended Quick Actions
Account Summary View All + New Document, + New Chatbot
Subscription Status Upgrade, Cancel + View Plans, + Payment Method
Usage Statistics Upgrade + Download Report, + Set Alert
Team Invite Add Member + Upgrade Seats, + Manage Roles
Affiliates View All + Copy Link, + View Stats
Favorite Templates None + Create from Template
Favorite Chatbots None + New Chat
Integrations None + Connect New
API Keys None + Test All, + Add Key

11. Licensing Notes

Tabler Icons vs Keenicons

  • Tabler: MIT License - Use freely
  • Keenicons: Part of Metronic license - Check your Metronic license terms before using in production

Metronic Illustrations

  • SVG illustrations are part of the Metronic package
  • Your Metronic license should cover usage in your app
  • Review keenthemes.com/metronic/tailwind/docs/getting-started/license for specifics

Files Reference

Your Key Files

  • resources/views/default/components/card.blade.php - Card component
  • resources/views/default/components/button.blade.php - Button component
  • resources/views/default/layout/error.blade.php - Error page layout
  • resources/views/default/scss/components/ - SCSS components
  • app/CustomExtensions/CloudMarketplace/resources/views/simulator/performance.blade.php - Performance dashboard

Metronic Reference Files

  • tmp/metronic-tailwind-html-demos/dist/html/demo1/public-profile/profiles/crm.html - CRM layout
  • tmp/metronic-tailwind-html-demos/dist/html/demo1/authentication/branded/sign-in.html - Auth layout
  • tmp/metronic-tailwind-html-demos/dist/html/demo1/authentication/error-500.html - Error page
  • tmp/metronic-tailwind-html-demos/dist/assets/media/illustrations/ - All illustrations