Master Detail

Two-panel layout with a master list on the left and a detail view on the right. On mobile, panels stack vertically. Ideal for admin interfaces, email clients, and file managers.

Basic

Preview

Inbox 3 new messages

Sent 12 messages

Drafts 2 drafts

Archive 156 messages

Inbox

3 new messages

Select a message to view its content here.

<div class="master-detail" style="height:400px;">
  <div class="master-detail-master">
    <div class="master-detail-master-header">
      <input type="search" class="input w-full" placeholder="Search...">
    </div>
    <div class="master-detail-master-content">
      <div class="list">
        <div class="list-item list-item-active">
          <div class="list-item-content">
            <span class="list-item-title">Inbox</span>
            <span class="list-item-subtitle">3 new messages</span>
          </div>
        </div>
        <div class="list-item">
          <div class="list-item-content">
            <span class="list-item-title">Sent</span>
            <span class="list-item-subtitle">12 messages</span>
          </div>
        </div>
        <div class="list-item">
          <div class="list-item-content">
            <span class="list-item-title">Drafts</span>
            <span class="list-item-subtitle">2 drafts</span>
          </div>
        </div>
        <div class="list-item">
          <div class="list-item-content">
            <span class="list-item-title">Archive</span>
            <span class="list-item-subtitle">156 messages</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="master-detail-detail">
    <div class="master-detail-detail-header">
      <h2 style="margin:0; font-size:1.125rem; font-weight:600;">Inbox</h2>
      <p style="margin:0.25rem 0 0; font-size:0.875rem; opacity:0.6;">3 new messages</p>
    </div>
    <div class="master-detail-detail-content" style="padding:1rem;">
      <p>Select a message to view its content here.</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-row h-full w-full overflow-hidden bg-base-200" style="height:400px;">
  <div class="w-70 min-w-60 max-w-100 shrink-0 flex flex-col overflow-hidden bg-base-100 border-r border-base-300">
    <div class="shrink-0 p-4 border-b border-base-300">
      <input type="search" class="input w-full" placeholder="Search...">
    </div>
    <div class="flex-1 overflow-y-auto">
      <div class="flex flex-col">
        <div class="flex items-center gap-3 px-4 py-3 bg-primary/10 border-l-2 border-primary cursor-pointer">
          <div class="flex flex-col flex-1 min-w-0">
            <span class="font-medium text-sm">Inbox</span>
            <span class="text-xs opacity-60">3 new messages</span>
          </div>
        </div>
        <div class="flex items-center gap-3 px-4 py-3 hover:bg-base-200 cursor-pointer">
          <div class="flex flex-col flex-1 min-w-0">
            <span class="font-medium text-sm">Sent</span>
            <span class="text-xs opacity-60">12 messages</span>
          </div>
        </div>
        <div class="flex items-center gap-3 px-4 py-3 hover:bg-base-200 cursor-pointer">
          <div class="flex flex-col flex-1 min-w-0">
            <span class="font-medium text-sm">Drafts</span>
            <span class="text-xs opacity-60">2 drafts</span>
          </div>
        </div>
        <div class="flex items-center gap-3 px-4 py-3 hover:bg-base-200 cursor-pointer">
          <div class="flex flex-col flex-1 min-w-0">
            <span class="font-medium text-sm">Archive</span>
            <span class="text-xs opacity-60">156 messages</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex-1 min-w-0 flex flex-col overflow-hidden bg-base-200">
    <div class="shrink-0 p-4 bg-base-100 border-b border-base-300">
      <h2 class="text-lg font-semibold m-0">Inbox</h2>
      <p class="text-sm opacity-60 mt-1 m-0">3 new messages</p>
    </div>
    <div class="flex-1 overflow-y-auto p-4">
      <p>Select a message to view its content here.</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// Highlight selected item:
document.querySelectorAll('.list-item').forEach(item => {
  item.addEventListener('click', () => {
    document.querySelectorAll('.list-item').forEach(i => i.classList.remove('list-item-active'));
    item.classList.add('list-item-active');
  });
});

With Empty State

Preview

Contacts

Alice Johnson

Bob Smith

🙋

No Contact Selected

Select a contact from the list to view details.

<div class="master-detail" style="height:350px;">
  <div class="master-detail-master">
    <div class="master-detail-master-header">
      <h3 style="margin:0; font-weight:600;">Contacts</h3>
    </div>
    <div class="master-detail-master-content">
      <div class="list">
        <div class="list-item">
          <div class="list-item-content">
            <span class="list-item-title">Alice Johnson</span>
          </div>
        </div>
        <div class="list-item">
          <div class="list-item-content">
            <span class="list-item-title">Bob Smith</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="master-detail-detail">
    <div class="master-detail-empty">
      <div>
        <div class="master-detail-empty-icon" style="font-size:3rem;">&#128587;</div>
        <h3 class="master-detail-empty-title">No Contact Selected</h3>
        <p class="master-detail-empty-text">Select a contact from the list to view details.</p>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-row h-full w-full overflow-hidden bg-base-200" style="height:350px;">
  <div class="w-70 min-w-60 max-w-100 shrink-0 flex flex-col overflow-hidden bg-base-100 border-r border-base-300">
    <div class="shrink-0 p-4 border-b border-base-300">
      <h3 class="m-0 font-semibold">Contacts</h3>
    </div>
    <div class="flex-1 overflow-y-auto">
      <div class="flex flex-col">
        <div class="flex items-center gap-3 px-4 py-3 hover:bg-base-200 cursor-pointer">
          <span class="font-medium text-sm">Alice Johnson</span>
        </div>
        <div class="flex items-center gap-3 px-4 py-3 hover:bg-base-200 cursor-pointer">
          <span class="font-medium text-sm">Bob Smith</span>
        </div>
      </div>
    </div>
  </div>
  <div class="flex-1 min-w-0 flex flex-col overflow-hidden bg-base-200">
    <div class="flex items-center justify-center h-full text-center p-10">
      <div>
        <div class="text-5xl mb-4 opacity-30">&#128587;</div>
        <h3 class="text-xl font-medium m-0 mb-2">No Contact Selected</h3>
        <p class="text-base m-0 opacity-60">Select a contact from the list to view details.</p>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for empty state display

With Detail Content

Preview

Orders

ORD-001 $245.00 — Pending

ORD-002 $128.50 — Shipped

ORD-003 $89.99 — Delivered

Order ORD-001

Pending

Customer
John Doe

Date
Feb 7, 2026

Total
$245.00

Items
3 products

<div class="master-detail" style="height:420px;">
  <div class="master-detail-master">
    <div class="master-detail-master-header">
      <strong>Orders</strong>
    </div>
    <div class="master-detail-master-content">
      <div class="list">
        <div class="list-item list-item-active">
          <div class="list-item-content">
            <span class="list-item-title">ORD-001</span>
            <span class="list-item-subtitle">$245.00 &mdash; Pending</span>
          </div>
        </div>
        <div class="list-item">
          <div class="list-item-content">
            <span class="list-item-title">ORD-002</span>
            <span class="list-item-subtitle">$128.50 &mdash; Shipped</span>
          </div>
        </div>
        <div class="list-item">
          <div class="list-item-content">
            <span class="list-item-title">ORD-003</span>
            <span class="list-item-subtitle">$89.99 &mdash; Delivered</span>
          </div>
        </div>
      </div>
    </div>
    <div class="master-detail-master-footer">
      <button class="btn btn-sm color-primary w-full">New Order</button>
    </div>
  </div>
  <div class="master-detail-detail">
    <div class="master-detail-detail-header">
      <div style="display:flex; justify-content:space-between; align-items:center;">
        <h2 style="margin:0; font-size:1.125rem; font-weight:600;">Order ORD-001</h2>
        <span class="badge color-warning">Pending</span>
      </div>
    </div>
    <div class="master-detail-detail-content" style="padding:1rem;">
      <div style="display:grid; grid-template-columns:1fr 1fr; gap:1rem; font-size:0.875rem;">
        <div><span style="opacity:0.5;">Customer</span><br>John Doe</div>
        <div><span style="opacity:0.5;">Date</span><br>Feb 7, 2026</div>
        <div><span style="opacity:0.5;">Total</span><br><strong>$245.00</strong></div>
        <div><span style="opacity:0.5;">Items</span><br>3 products</div>
      </div>
    </div>
    <div class="master-detail-detail-footer">
      <div style="display:flex; gap:0.5rem; margin-left:auto;">
        <button class="btn btn-sm btn-ghost">Cancel Order</button>
        <button class="btn btn-sm color-primary">Process</button>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-row h-full w-full overflow-hidden bg-base-200" style="height:420px;">
  <div class="w-70 min-w-60 max-w-100 shrink-0 flex flex-col overflow-hidden bg-base-100 border-r border-base-300">
    <div class="shrink-0 p-4 border-b border-base-300">
      <strong>Orders</strong>
    </div>
    <div class="flex-1 overflow-y-auto">
      <div class="flex flex-col">
        <div class="flex items-center gap-3 px-4 py-3 bg-primary/10 border-l-2 border-primary cursor-pointer">
          <div class="flex flex-col flex-1 min-w-0">
            <span class="font-medium text-sm">ORD-001</span>
            <span class="text-xs opacity-60">$245.00 &mdash; Pending</span>
          </div>
        </div>
        <div class="flex items-center gap-3 px-4 py-3 hover:bg-base-200 cursor-pointer">
          <div class="flex flex-col flex-1 min-w-0">
            <span class="font-medium text-sm">ORD-002</span>
            <span class="text-xs opacity-60">$128.50 &mdash; Shipped</span>
          </div>
        </div>
        <div class="flex items-center gap-3 px-4 py-3 hover:bg-base-200 cursor-pointer">
          <div class="flex flex-col flex-1 min-w-0">
            <span class="font-medium text-sm">ORD-003</span>
            <span class="text-xs opacity-60">$89.99 &mdash; Delivered</span>
          </div>
        </div>
      </div>
    </div>
    <div class="shrink-0 p-4 border-t border-base-300">
      <button class="btn btn-sm color-primary w-full">New Order</button>
    </div>
  </div>
  <div class="flex-1 min-w-0 flex flex-col overflow-hidden bg-base-200">
    <div class="shrink-0 p-4 bg-base-100 border-b border-base-300">
      <div class="flex justify-between items-center">
        <h2 class="text-lg font-semibold m-0">Order ORD-001</h2>
        <span class="badge color-warning">Pending</span>
      </div>
    </div>
    <div class="flex-1 overflow-y-auto p-4">
      <div class="grid grid-cols-2 gap-4 text-sm">
        <div><span class="opacity-50">Customer</span><br>John Doe</div>
        <div><span class="opacity-50">Date</span><br>Feb 7, 2026</div>
        <div><span class="opacity-50">Total</span><br><strong>$245.00</strong></div>
        <div><span class="opacity-50">Items</span><br>3 products</div>
      </div>
    </div>
    <div class="shrink-0 p-4 bg-base-100 border-t border-base-300">
      <div class="flex gap-2 ml-auto justify-end">
        <button class="btn btn-sm btn-ghost">Cancel Order</button>
        <button class="btn btn-sm color-primary">Process</button>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Click handler to switch detail view:
document.querySelectorAll('.list-item').forEach(item => {
  item.addEventListener('click', () => {
    // Remove active from all
    document.querySelectorAll('.list-item').forEach(i => i.classList.remove('list-item-active'));
    // Set active
    item.classList.add('list-item-active');
    // Update detail content via your framework or fetch
  });
});

Width Variants

Preview

Narrow

240px width

Narrow master panel gives more space to detail.

Wide

350px width

Wide master panel for richer list content.

<div style="display:flex; flex-direction:column; gap:1rem;">
  <div class="master-detail master-detail-narrow" style="height:200px;">
    <div class="master-detail-master">
      <div class="master-detail-master-header"><strong>Narrow</strong></div>
      <div class="master-detail-master-content" style="padding:0.5rem 1rem; font-size:0.875rem; opacity:0.6;">240px width</div>
    </div>
    <div class="master-detail-detail">
      <div style="padding:1rem; font-size:0.875rem; opacity:0.6;">Narrow master panel gives more space to detail.</div>
    </div>
  </div>
  <div class="master-detail master-detail-wide" style="height:200px;">
    <div class="master-detail-master">
      <div class="master-detail-master-header"><strong>Wide</strong></div>
      <div class="master-detail-master-content" style="padding:0.5rem 1rem; font-size:0.875rem; opacity:0.6;">350px width</div>
    </div>
    <div class="master-detail-detail">
      <div style="padding:1rem; font-size:0.875rem; opacity:0.6;">Wide master panel for richer list content.</div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-4">
  <div class="flex flex-row h-full w-full overflow-hidden bg-base-200" style="height:200px;">
    <div class="flex flex-col overflow-hidden bg-base-100 border-r border-base-300 shrink-0" style="width:240px; min-width:200px;">
      <div class="shrink-0 p-4 border-b border-base-300"><strong>Narrow</strong></div>
      <div class="flex-1 p-4 text-sm opacity-60">240px width</div>
    </div>
    <div class="flex-1 min-w-0 flex flex-col overflow-hidden bg-base-200">
      <div class="p-4 text-sm opacity-60">Narrow master panel gives more space to detail.</div>
    </div>
  </div>
  <div class="flex flex-row h-full w-full overflow-hidden bg-base-200" style="height:200px;">
    <div class="flex flex-col overflow-hidden bg-base-100 border-r border-base-300 shrink-0" style="width:350px; min-width:300px; max-width:500px;">
      <div class="shrink-0 p-4 border-b border-base-300"><strong>Wide</strong></div>
      <div class="flex-1 p-4 text-sm opacity-60">350px width</div>
    </div>
    <div class="flex-1 min-w-0 flex flex-col overflow-hidden bg-base-200">
      <div class="p-4 text-sm opacity-60">Wide master panel for richer list content.</div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for width variants

Classes Reference

Class	Description
.master-detail	Base container (flex row, full height)
.master-detail-full	100dvh height
.master-detail-has-navbar	Height minus navbar
.master-detail-master	Left panel (fixed width)
.master-detail-master-header	Master header area
.master-detail-master-content	Scrollable master content
.master-detail-master-footer	Master footer area
.master-detail-detail	Right panel (flex: 1)
.master-detail-detail-header	Detail header area
.master-detail-detail-content	Scrollable detail content
.master-detail-detail-footer	Detail footer area
.master-detail-empty	Centered empty state
.master-detail-empty-icon	Empty state icon
.master-detail-empty-title	Empty state title
.master-detail-empty-text	Empty state description
.master-detail-narrow	Narrow master (240px)
.master-detail-wide	Wide master (350px)
.master-detail-collapsible	Collapsible master on mobile
.master-detail-master-open	Open master on mobile (with collapsible)
.master-detail-mobile-master-only	Hide detail on mobile
.master-detail.glass	Glassmorphism variant