Queue

Collapsible sections for queued messages, todos, and attachments — built for AI workflow progress and pending work.

Queued messages & todos

Collapsible sections for pending prompts and todos. Hover an item for send/remove actions; attachments render as images or file chips.

Loading…

Installation

CLI

npx @sonojs/ui@latest add queue

Also needsnpx @sonojs/ui@latest add button collapsible scroll-area && npm i lucide-react

Usage

queue.tsx

import {
  Queue,
  QueueItem,
  QueueItemAction,
  QueueItemActions,
  QueueItemContent,
  QueueItemIndicator,
  QueueList,
  QueueSection,
  QueueSectionContent,
  QueueSectionLabel,
  QueueSectionTrigger,
} from "@/components/sonojs/queue"

export function Example() {
  return (
    <Queue>
      <QueueSection>
        <QueueSectionTrigger>
          <QueueSectionLabel count={2} label="Queued" />
        </QueueSectionTrigger>
        <QueueSectionContent>
          <QueueList>
            <QueueItem>
              <div className="flex items-center gap-2">
                <QueueItemIndicator />
                <QueueItemContent>How do I set up the project?</QueueItemContent>
                <QueueItemActions>
                  <QueueItemAction aria-label="Remove">…</QueueItemAction>
                </QueueItemActions>
              </div>
            </QueueItem>
          </QueueList>
        </QueueSectionContent>
      </QueueSection>
    </Queue>
  )
}

Props

Prop	Type	Default	Description
defaultOpen	boolean	true	`QueueSection` — start expanded.
completed	boolean	false	`QueueItemIndicator` / `Content` / `Description` — muted + strike-through.
count / label	number / string	—	`QueueSectionLabel` — e.g. `3 Queued`.
QueueMessage / QueueTodo	types	—	Optional data shapes for message parts and todo status.