Message Thread List - Free UI Component Template

Text Color #1e293b

Accent Color #10b981

Background Color #ffffff

Font Size (rem) 1

Max Width (px) 480

Message Thread List

A professional messaging thread view with online status dots, unread indicators, and overflow-protected message previews.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Message Thread List</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --text-color: {{textColor}};
            --accent-color: {{accentColor}};
            --bg-color: {{bgColor}};
            --page-bg: #ecfdf5; /* Default vibrant light emerald */
            --font-size: {{fontSize}}rem;
            --list-width: {{listWidth}}px;
        }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--page-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 2rem;
            color: var(--text-color);
        }

.thread-container {
            width: 100%;
            max-width: var(--list-width);
            background: var(--bg-color);
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(16, 185, 129, 0.1);
            font-size: var(--font-size);
        }

.thread-header {
            padding: 1.5rem 2rem;
            border-bottom: 1px solid #f1f5f9;
        }
        .thread-title { font-size: 1.25em; font-weight: 800; }

.search-row {
            padding: 1rem 2rem;
            background: #fafafa;
            border-bottom: 1px solid #f1f5f9;
        }
        .search-input {
            width: 100%;
            padding: 0.6rem 1rem;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            font-size: 0.9em;
            font-family: inherit;
        }

.thread-list {
            list-style: none;
            display: flex;
            flex-direction: column;
        }

.thread-item {
            padding: 1.25rem 2rem;
            display: flex;
            gap: 1rem;
            cursor: pointer;
            transition: all 0.2s ease;
            border-bottom: 1px solid #f1f5f9;
        }
        .thread-item:last-child { border-bottom: none; }
        .thread-item:hover { background: #f8fafc; }
        .thread-item.active { background: rgba(var(--accent-rgb, 16, 185, 129), 0.05); }

.item-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            flex-shrink: 0;
            position: relative;
        }
        .status-dot {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 12px;
            height: 12px;
            border: 2px solid white;
            border-radius: 50%;
            background: #94a3b8;
        }
        .status-online { background: #10b981; }

.item-text { flex: 1; min-width: 0; }
        .item-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
        .sender-name { font-weight: 800; font-size: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .send-time { font-size: 0.75em; color: #94a3b8; font-weight: 600; flex-shrink: 0; }
        
        .message-preview {
            font-size: 0.85em;
            color: #64748b;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }
        .active .message-preview { color: var(--text-color); font-weight: 600; }

.unread-indicator {
            width: 8px;
            height: 8px;
            background: var(--accent-color);
            border-radius: 50%;
            margin-top: 20px;
            flex-shrink: 0;
        }

</style>
</head>
<body style="--accent-rgb: 16, 185, 129;">

<div class="thread-container">
        <div class="thread-header">
            <h2 class="thread-title">Messages</h2>
        </div>
        <div class="search-row">
            <input type="text" class="search-input" placeholder="Search conversations...">
        </div>

<ul class="thread-list">
            <li class="thread-item active">
                <div class="item-avatar">
                    AV
                    <span class="status-dot status-online"></span>
                </div>
                <div class="item-text">
                    <div class="item-top">
                        <span class="sender-name">Alexander Vaughn</span>
                        <span class="send-time">2m ago</span>
                    </div>
                    <span class="message-preview">Hey, just checking in on the latest dashboard refinements for the client...</span>
                </div>
                <div class="unread-indicator"></div>
            </li>
            <li class="thread-item">
                <div class="item-avatar" style="background: #fde68a; color: #92400e;">
                    ER
                    <span class="status-dot status-online"></span>
                </div>
                <div class="item-text">
                    <div class="item-top">
                        <span class="sender-name">Elena Rodriguez</span>
                        <span class="send-time">45m ago</span>
                    </div>
                    <span class="message-preview">I've attached the new design assets in the shared folder. Take a look?</span>
                </div>
            </li>
            <li class="thread-item">
                <div class="item-avatar" style="background: #e9d5ff; color: #6b21a8;">
                    MT
                    <span class="status-dot"></span>
                </div>
                <div class="item-text">
                    <div class="item-top">
                        <span class="sender-name">Marcus Thorne</span>
                        <span class="send-time">Yesterday</span>
                    </div>
                    <span class="message-preview">The database migration is complete. All systems are green.</span>
                </div>
            </li>
            <li class="thread-item">
                <div class="item-avatar">
                    SC
                    <span class="status-dot"></span>
                </div>
                <div class="item-text">
                    <div class="item-top">
                        <span class="sender-name">Sophia Chen</span>
                        <span class="send-time">Oct 29</span>
                    </div>
                    <span class="message-preview">Can we sync up tomorrow about the QA automation suite?</span>
                </div>
            </li>
        </ul>
    </div>

</body>
</html>