Queue

What’s waiting while the agent works: queued messages and its todo list. Done items are checked, struck through and read out as done.

Sourcecomponents/queue.tsx

Also make the FAQ collapsible
Use this logo in the header
logo.svg

Done: Read the brief
Build the pricing cards
Three tiers, one marked Most popular
Run the accessibility tests

Usage

Queue usage

import { Queue, QueueItem, QueueItemContent, QueueItemIndicator, QueueList, QueueSection, QueueSectionContent, QueueSectionLabel, QueueSectionTrigger } from "@/components/queue";
export function QueueUsage({ todos }: { todos: { id: string; title: string; done: boolean }[] }) {  return (    <Queue>      <QueueSection>        <QueueSectionTrigger>          <QueueSectionLabel count={todos.length} label="Todos" />        </QueueSectionTrigger>        <QueueSectionContent>          <QueueList aria-label="Todos">            {todos.map((todo) => (              <QueueItem key={todo.id}>                <div className="flex items-start gap-2">                  <QueueItemIndicator completed={todo.done} />                  <QueueItemContent completed={todo.done}>{todo.title}</QueueItemContent>                </div>              </QueueItem>            ))}          </QueueList>        </QueueSectionContent>      </QueueSection>    </Queue>  );}

When to use

Use when

What's waiting: messages queued while the agent works, and its todo list. Done items are checked and read out as done

Don’t use when

Steps already taken (use Trace); a general list (use Item)