KDS Order

Kitchen Display System order cards for restaurant/food service operations. Status-coded cards with elapsed timers, item lists, and action buttons for kitchen workflow management.

Pending Order

Preview

#057

Table 4 - ERPlora Cafe

3:42

14:18

2

Grilled Chicken Wrap

No onions
1

Caesar Salad

Dressing on side
2

Sparkling Water

<div class="kds-order kds-order-pending" style="max-width: 320px;">
  <div class="kds-order-header">
    <div>
      <div class="kds-order-id">#057</div>
      <div class="kds-order-table">Table 4 - ERPlora Cafe</div>
    </div>
    <div class="kds-order-time">
      <div class="kds-order-elapsed">3:42</div>
      <div class="kds-order-started">14:18</div>
    </div>
  </div>
  <div class="kds-order-body">
    <ul class="kds-order-items">
      <li class="kds-order-item">
        <span class="kds-order-item-qty">2</span>
        <div class="kds-order-item-details">
          <div class="kds-order-item-name">Grilled Chicken Wrap</div>
          <div class="kds-order-item-notes">No onions</div>
        </div>
        <span class="kds-order-item-status kds-order-item-status-pending"></span>
      </li>
      <li class="kds-order-item">
        <span class="kds-order-item-qty">1</span>
        <div class="kds-order-item-details">
          <div class="kds-order-item-name">Caesar Salad</div>
          <div class="kds-order-item-notes">Dressing on side</div>
        </div>
        <span class="kds-order-item-status kds-order-item-status-pending"></span>
      </li>
      <li class="kds-order-item">
        <span class="kds-order-item-qty">2</span>
        <div class="kds-order-item-details">
          <div class="kds-order-item-name">Sparkling Water</div>
        </div>
        <span class="kds-order-item-status kds-order-item-status-pending"></span>
      </li>
    </ul>
  </div>
  <div class="kds-order-footer">
    <button class="kds-order-action kds-order-action-secondary">Recall</button>
    <button class="kds-order-action kds-order-action-primary">Start</button>
  </div>
</div>

Requires: ux.min.css

<div class="overflow-hidden cursor-pointer max-w-xs bg-base-100 rounded-box border-3 border-warning hover:-translate-y-0.5 hover:shadow-lg transition-all">
  <div class="flex justify-between items-start p-4 pb-3 border-b-2 border-warning mb-3">
    <div>
      <div class="text-xl font-bold">#057</div>
      <div class="text-sm text-base-content/60 mt-1">Table 4 - ERPlora Cafe</div>
    </div>
    <div class="text-right">
      <div class="font-bold text-2xl text-warning">3:42</div>
      <div class="text-xs text-base-content/40">14:18</div>
    </div>
  </div>
  <div class="px-4">
    <ul class="list-none m-0 p-0">
      <li class="flex items-start gap-2 py-2 border-b border-base-300">
        <span class="flex items-center justify-center font-bold text-sm shrink-0 w-7 h-7 bg-base-200 rounded">2</span>
        <div class="flex-1 min-w-0">
          <div class="font-semibold">Grilled Chicken Wrap</div>
          <div class="text-xs italic text-warning">No onions</div>
        </div>
        <span class="shrink-0 rounded-full w-2.5 h-2.5 mt-2 bg-warning"></span>
      </li>
      <li class="flex items-start gap-2 py-2 border-b border-base-300">
        <span class="flex items-center justify-center font-bold text-sm shrink-0 w-7 h-7 bg-base-200 rounded">1</span>
        <div class="flex-1 min-w-0">
          <div class="font-semibold">Caesar Salad</div>
          <div class="text-xs italic text-warning">Dressing on side</div>
        </div>
        <span class="shrink-0 rounded-full w-2.5 h-2.5 mt-2 bg-warning"></span>
      </li>
      <li class="flex items-start gap-2 py-2">
        <span class="flex items-center justify-center font-bold text-sm shrink-0 w-7 h-7 bg-base-200 rounded">2</span>
        <div class="flex-1 min-w-0">
          <div class="font-semibold">Sparkling Water</div>
        </div>
        <span class="shrink-0 rounded-full w-2.5 h-2.5 mt-2 bg-warning"></span>
      </li>
    </ul>
  </div>
  <div class="flex gap-2 p-4 pt-3 border-t border-base-300 mt-3">
    <button class="flex-1 flex items-center justify-center gap-2 font-semibold text-sm py-3 rounded bg-base-200 hover:bg-base-300">Recall</button>
    <button class="flex-1 flex items-center justify-center gap-2 font-semibold text-sm py-3 rounded bg-warning text-white hover:brightness-110">Start</button>
  </div>
</div>

Requires: tw.min.css

// Transition order from pending to preparing
function startOrder(orderEl) {
  orderEl.classList.remove('kds-order-pending');
  orderEl.classList.add('kds-order-preparing');
}

// Action button handler
document.querySelectorAll('.kds-order-action-primary').forEach(btn => {
  btn.addEventListener('click', () => {
    const order = btn.closest('.kds-order');
    startOrder(order);
    btn.textContent = 'Ready';
  });
});

Status Variants

Preview

#058

Bar - ERPlora

5:12

14:15

1

Ribeye Steak

Grill Station
1

Fries

#055

Table 7

8:30

14:12

2

Margherita Pizza

#052

Table 2

12:05

14:08

1

Fish & Chips

<div class="flex gap-4 flex-wrap">
  <!-- Preparing -->
  <div class="kds-order kds-order-preparing" style="max-width: 260px;">
    <div class="kds-order-header">
      <div>
        <div class="kds-order-id">#058</div>
        <div class="kds-order-table">Bar - ERPlora</div>
      </div>
      <div class="kds-order-time">
        <div class="kds-order-elapsed">5:12</div>
        <div class="kds-order-started">14:15</div>
      </div>
    </div>
    <div class="kds-order-body">
      <ul class="kds-order-items">
        <li class="kds-order-item">
          <span class="kds-order-item-qty">1</span>
          <div class="kds-order-item-details">
            <div class="kds-order-item-name">Ribeye Steak</div>
            <div class="kds-order-item-station">Grill Station</div>
          </div>
          <span class="kds-order-item-status kds-order-item-status-preparing"></span>
        </li>
        <li class="kds-order-item">
          <span class="kds-order-item-qty">1</span>
          <div class="kds-order-item-details">
            <div class="kds-order-item-name">Fries</div>
          </div>
          <span class="kds-order-item-status kds-order-item-status-ready"></span>
        </li>
      </ul>
    </div>
    <div class="kds-order-footer">
      <button class="kds-order-action kds-order-action-primary">Ready</button>
    </div>
  </div>

  <!-- Ready -->
  <div class="kds-order kds-order-ready" style="max-width: 260px;">
    <div class="kds-order-header">
      <div>
        <div class="kds-order-id">#055</div>
        <div class="kds-order-table">Table 7</div>
      </div>
      <div class="kds-order-time">
        <div class="kds-order-elapsed">8:30</div>
        <div class="kds-order-started">14:12</div>
      </div>
    </div>
    <div class="kds-order-body">
      <ul class="kds-order-items">
        <li class="kds-order-item">
          <span class="kds-order-item-qty">2</span>
          <div class="kds-order-item-details">
            <div class="kds-order-item-name">Margherita Pizza</div>
          </div>
          <span class="kds-order-item-status kds-order-item-status-ready"></span>
        </li>
      </ul>
    </div>
    <div class="kds-order-footer">
      <button class="kds-order-action kds-order-action-primary">Bump</button>
    </div>
  </div>

  <!-- Completed -->
  <div class="kds-order kds-order-completed" style="max-width: 260px;">
    <div class="kds-order-header">
      <div>
        <div class="kds-order-id">#052</div>
        <div class="kds-order-table">Table 2</div>
      </div>
      <div class="kds-order-time">
        <div class="kds-order-elapsed">12:05</div>
        <div class="kds-order-started">14:08</div>
      </div>
    </div>
    <div class="kds-order-body">
      <ul class="kds-order-items">
        <li class="kds-order-item">
          <span class="kds-order-item-qty">1</span>
          <div class="kds-order-item-details">
            <div class="kds-order-item-name">Fish & Chips</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Status is controlled by modifier classes on .kds-order:
  .kds-order-pending   → warning (yellow) border
  .kds-order-preparing → info (blue) border + pulsing item dots
  .kds-order-ready     → success (green) border
  .kds-order-completed → muted border + reduced opacity
  .kds-order-alert     → error (red) border + pulse animation

Each variant sets --kds-status-color which cascades to header border and elapsed time color -->

Requires: tw.min.css

// Status lifecycle: pending → preparing → ready → completed
function advanceStatus(orderEl) {
  const statuses = ['pending', 'preparing', 'ready', 'completed'];
  const current = statuses.find(s => orderEl.classList.contains('kds-order-' + s));
  const idx = statuses.indexOf(current);
  if (idx < statuses.length - 1) {
    orderEl.classList.remove('kds-order-' + current);
    orderEl.classList.add('kds-order-' + statuses[idx + 1]);
  }
}

Alert & Priority

Preview

RUSH

#061

Table 1 - ERPlora VIP

11:20

14:09

1

Lobster Risotto

Extra truffle oil

Main Kitchen
2

Wagyu Burger

Medium rare

Grill Station
2

Truffle Fries

<div class="kds-order kds-order-alert kds-order-priority-high" style="max-width: 320px;">
  <span class="kds-order-priority">RUSH</span>
  <div class="kds-order-header">
    <div>
      <div class="kds-order-id">#061</div>
      <div class="kds-order-table">Table 1 - ERPlora VIP</div>
    </div>
    <div class="kds-order-time">
      <div class="kds-order-elapsed">11:20</div>
      <div class="kds-order-started">14:09</div>
    </div>
  </div>
  <div class="kds-order-body">
    <ul class="kds-order-items">
      <li class="kds-order-item">
        <span class="kds-order-item-qty">1</span>
        <div class="kds-order-item-details">
          <div class="kds-order-item-name">Lobster Risotto</div>
          <div class="kds-order-item-notes">Extra truffle oil</div>
          <div class="kds-order-item-station">Main Kitchen</div>
        </div>
        <span class="kds-order-item-status kds-order-item-status-preparing"></span>
      </li>
      <li class="kds-order-item">
        <span class="kds-order-item-qty">2</span>
        <div class="kds-order-item-details">
          <div class="kds-order-item-name">Wagyu Burger</div>
          <div class="kds-order-item-notes">Medium rare</div>
          <div class="kds-order-item-station">Grill Station</div>
        </div>
        <span class="kds-order-item-status kds-order-item-status-pending"></span>
      </li>
      <li class="kds-order-item">
        <span class="kds-order-item-qty">2</span>
        <div class="kds-order-item-details">
          <div class="kds-order-item-name">Truffle Fries</div>
        </div>
        <span class="kds-order-item-status kds-order-item-status-ready"></span>
      </li>
    </ul>
  </div>
  <div class="kds-order-footer">
    <button class="kds-order-action kds-order-action-secondary">Recall</button>
    <button class="kds-order-action kds-order-action-primary">Bump All</button>
  </div>
</div>

Requires: ux.min.css

<!-- .kds-order-alert adds:
  - Red border via --kds-status-color: var(--color-error)
  - Subtle red background tint
  - Pulsing box-shadow animation (kds-pulse)

.kds-order-priority-high + .kds-order-priority creates:
  - Absolute positioned "RUSH" badge at top-right
  - Red background with white text -->

Requires: tw.min.css

// Auto-escalate orders past threshold
function checkAlertThreshold(orderEl, maxMinutes = 10) {
  const elapsed = orderEl.querySelector('.kds-order-elapsed');
  const [min] = elapsed.textContent.split(':').map(Number);
  if (min >= maxMinutes) {
    orderEl.classList.add('kds-order-alert');
  }
}

// Run check every 30 seconds
setInterval(() => {
  document.querySelectorAll('.kds-order:not(.kds-order-completed)')
    .forEach(el => checkAlertThreshold(el));
}, 30000);

Compact Variant

Preview

#063

Counter

1:15

1

Latte
1

Croissant

#064

Drive-Thru

2:45

3

Espresso

<div class="flex gap-3 flex-wrap">
  <div class="kds-order kds-order-pending kds-order-compact" style="max-width: 240px;">
    <div class="kds-order-header">
      <div>
        <div class="kds-order-id">#063</div>
        <div class="kds-order-table">Counter</div>
      </div>
      <div class="kds-order-time">
        <div class="kds-order-elapsed">1:15</div>
      </div>
    </div>
    <div class="kds-order-body">
      <ul class="kds-order-items">
        <li class="kds-order-item">
          <span class="kds-order-item-qty">1</span>
          <div class="kds-order-item-details">
            <div class="kds-order-item-name">Latte</div>
          </div>
        </li>
        <li class="kds-order-item">
          <span class="kds-order-item-qty">1</span>
          <div class="kds-order-item-details">
            <div class="kds-order-item-name">Croissant</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="kds-order-footer">
      <button class="kds-order-action kds-order-action-primary">Done</button>
    </div>
  </div>

  <div class="kds-order kds-order-preparing kds-order-compact" style="max-width: 240px;">
    <div class="kds-order-header">
      <div>
        <div class="kds-order-id">#064</div>
        <div class="kds-order-table">Drive-Thru</div>
      </div>
      <div class="kds-order-time">
        <div class="kds-order-elapsed">2:45</div>
      </div>
    </div>
    <div class="kds-order-body">
      <ul class="kds-order-items">
        <li class="kds-order-item">
          <span class="kds-order-item-qty">3</span>
          <div class="kds-order-item-details">
            <div class="kds-order-item-name">Espresso</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="kds-order-footer">
      <button class="kds-order-action kds-order-action-primary">Ready</button>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- .kds-order-compact reduces padding and font sizes:
  - Header/body/footer use 0.5rem horizontal padding
  - Order ID becomes text-base (instead of text-xl)
  - Elapsed time becomes text-xl (instead of 1.5rem)
  - Items have 0.25rem vertical padding
  Ideal for high-density KDS displays with many orders -->

Requires: tw.min.css

// Compact mode toggle for KDS display density
function toggleCompactMode(container) {
  container.querySelectorAll('.kds-order').forEach(order => {
    order.classList.toggle('kds-order-compact');
  });
}

Classes Reference

Class	Description
`kds-order`	Base KDS order card with border, hover lift, and press scale
`kds-order-pending`	Warning (yellow) status color
`kds-order-preparing`	Info (blue) status color
`kds-order-ready`	Success (green) status color
`kds-order-alert`	Error (red) status with pulse animation
`kds-order-completed`	Muted status with reduced opacity
`kds-order-compact`	Reduced padding and font sizes for dense layouts
`kds-order-priority-high`	Enables absolute-positioned priority badge
`kds-order-priority`	Priority badge element (e.g., "RUSH")
`kds-order-bumped`	Bump scale animation on order completion
`kds-order-header`	Header with order ID, table, and timer
`kds-order-id`	Order number display
`kds-order-table`	Table/location label
`kds-order-time`	Timer container (right-aligned)
`kds-order-elapsed`	Elapsed time display (color matches status)
`kds-order-started`	Start time label
`kds-order-body`	Body wrapper for items list
`kds-order-items`	Unstyled list container
`kds-order-item`	Single item row with qty, details, and status
`kds-order-item-qty`	Quantity badge
`kds-order-item-details`	Item name, notes, and station container
`kds-order-item-name`	Item name text
`kds-order-item-notes`	Special instructions (italic, warning color)
`kds-order-item-station`	Kitchen station label
`kds-order-item-status`	Status dot indicator
`kds-order-item-status-pending`	Yellow dot
`kds-order-item-status-preparing`	Blue pulsing dot
`kds-order-item-status-ready`	Green dot
`kds-order-footer`	Footer with action buttons
`kds-order-action`	Base action button
`kds-order-action-primary`	Primary action (status-colored background)
`kds-order-action-secondary`	Secondary action (neutral background)