A kitchen queue with New, Preparing, Ready and Out columns. Drag cards or use the buttons and arrow keys to advance them, and hear a short chime when a new order arrives.
Maya
Delivery2× Smash Double, Crinkle Fries
Priya
DeliveryMargherita, Large, Garlic Knots
Leo
Table 73× Fish Tacos, Horchata
Sam
PickupVeggie Burrito, Chips and Salsa
Ana
DeliveryPad Thai, 4× Spring Rolls
npx shadcn@latest add https://hyperblur.dev/r/orders-queue-board.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/orders-queue-board.tsx.
import { OrdersQueueBoard } from "@/components/hyperblur/orders-queue-board"
<OrdersQueueBoard onStatusChange={(id, status) => console.log(id, status)} onPrint={(order) => console.log(order.number)} />| Prop | Type | Default | Description |
|---|---|---|---|
| orders | QueueOrder[] | Controlled list. An order is { id, number, customer, items: { name, quantity? }[], total, channel: "delivery" | "pickup" | "table", status, table?, elapsedMinutes?, placedAt? }. New ids with status "new" play the chime and slide in. | |
| defaultOrders | QueueOrder[] | 6 sample orders | Initial list when uncontrolled. |
| onStatusChange | (id: string, status: QueueStatus, order: QueueOrder) => void | Called when an order is dragged, advanced, moved back or moved with the arrow keys. Status is "new" | "preparing" | "ready" | "dispatched". | |
| onPrint | (order: QueueOrder) => void | Shows a print button on each card and is called with its order. | |
| soundEnabled | boolean | Controlled state of the Sound switch. | |
| defaultSoundEnabled | boolean | true | Initial Sound state when uncontrolled. Audio starts only after the first click or key press on the page. |
| onSoundChange | (enabled: boolean) => void | Called when the Sound switch is toggled. | |
| lateAfter | number | 20 | Minutes after which an open order is flagged as late. |
| now | Date | string | Fixed clock used with placedAt to compute elapsed time. Without it the clock starts after mount and ticks every 30 seconds. | |
| currency | string | "USD" | ISO currency code passed to Intl.NumberFormat. |
| locale | string | "en-US" | Locale used to format money. |
| labels | Partial<OrdersQueueLabels> | English | Every visible string: column names, channels, button labels, and templates such as minutes "{n} min" and lateCount "{n} late". |
| actions | React.ReactNode | Extra controls rendered in the header next to the Sound switch. | |
| accent | string | "#2f7bff" | Accent color used for buttons, focus rings and highlights. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles on the root element. |