Drawer With Tabs

Fetch pattern JSON: curl https://webspire.de/patterns/drawer/with-tabs.json

with-tabs.html

<!-- Static preview — shows tabbed drawer panel inline -->
<div class="ws-drawer mx-auto max-w-sm">
  <div class="flex flex-col overflow-hidden rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] shadow-xl">
    <!-- Header + Tabs -->
    <div class="border-b border-[var(--ws-color-border)] px-6 pt-4">
      <div class="flex items-center justify-between pb-4">
        <h2 class="text-lg font-semibold text-[var(--ws-color-text)]">Record</h2>
        <button type="button" class="rounded-lg p-1 text-[var(--ws-color-text-muted)] transition hover:bg-[var(--ws-color-surface-alt)]" aria-label="Close drawer">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
        </button>
      </div>
      <div class="flex gap-4" role="tablist" aria-label="Drawer tabs">
        <button type="button" role="tab" aria-selected="true" class="border-b-2 border-indigo-600 pb-2 text-sm font-medium text-indigo-600">Details</button>
        <button type="button" role="tab" aria-selected="false" class="border-b-2 border-transparent pb-2 text-sm text-[var(--ws-color-text-muted)] transition hover:text-[var(--ws-color-text-soft)]">History</button>
        <button type="button" role="tab" aria-selected="false" class="border-b-2 border-transparent pb-2 text-sm text-[var(--ws-color-text-muted)] transition hover:text-[var(--ws-color-text-soft)]">Notes</button>
      </div>
    </div>
    <!-- Tab content -->
    <div class="flex-1 p-6" role="tabpanel" aria-label="Details">
      <dl class="space-y-4">
        <div>
          <dt class="text-xs font-medium uppercase tracking-wider text-[var(--ws-color-text-muted)]">Name</dt>
          <dd class="mt-1 text-sm text-[var(--ws-color-text)]">Jane Doe</dd>
        </div>
        <div>
          <dt class="text-xs font-medium uppercase tracking-wider text-[var(--ws-color-text-muted)]">Email</dt>
          <dd class="mt-1 text-sm text-[var(--ws-color-text)]">jane@example.com</dd>
        </div>
        <div>
          <dt class="text-xs font-medium uppercase tracking-wider text-[var(--ws-color-text-muted)]">Role</dt>
          <dd class="mt-1 text-sm text-[var(--ws-color-text)]">Product Designer</dd>
        </div>
        <div>
          <dt class="text-xs font-medium uppercase tracking-wider text-[var(--ws-color-text-muted)]">Status</dt>
          <dd class="mt-1"><span class="rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Active</span></dd>
        </div>
        <div>
          <dt class="text-xs font-medium uppercase tracking-wider text-[var(--ws-color-text-muted)]">Joined</dt>
          <dd class="mt-1 text-sm text-[var(--ws-color-text)]">March 15, 2026</dd>
        </div>
      </dl>
    </div>
  </div>
</div>

Details

Family

drawer

Tier

enhanced

Kind

component

Extends

drawer/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

drawerpaneltabssideoverlaydetails

Slots

Name	Required	Description
header	Yes	Title, close button, and tab bar.
content	Yes	Tab panel content area.

Side panel drawer with a tab bar below the header (Details, History, Notes). Active tab is highlighted with an accent border. Content area shows a description list for the Details tab. Hidden by default with trigger button.