Queue

The Queue component provides a flexible system for displaying lists of messages, todos, attachments, and collapsible sections. Perfect for showing AI workflow progress, pending tasks, message history, or any structured list of items in your application.

How do I set up the project?
What is the roadmap for Q4?
Can you review my PR?
Please generate a changelog.
Add dark mode support.
Optimize database queries.
Set up CI/CD pipeline.

Write project documentation
Complete the README and API docs
Implement authentication
Fix bug #42
Resolve crash on settings page
Refactor queue logic
Unify queue and todo state management
Add unit tests
Increase test coverage for hooks

Installation

npx ai-elements@latest add queue

Usage

import {
  Queue,
  QueueSection,
  QueueSectionTrigger,
  QueueSectionLabel,
  QueueSectionContent,
  QueueList,
  QueueItem,
  QueueItemIndicator,
  QueueItemContent,
} from '@/components/ai-elements/queue';

<Queue>
  <QueueSection>
    <QueueSectionTrigger>
      <QueueSectionLabel count={3} label="Tasks" />
    </QueueSectionTrigger>
    <QueueSectionContent>
      <QueueList>
        <QueueItem>
          <QueueItemIndicator />
          <QueueItemContent>Analyze user requirements</QueueItemContent>
        </QueueItem>
      </QueueList>
    </QueueSectionContent>
  </QueueSection>
</Queue>

Features

Flexible component system with composable parts
Collapsible sections with smooth animations
Support for completed/pending state indicators
Built-in scroll area for long lists
Attachment display with images and file indicators
Hover-revealed action buttons for queue items
TypeScript support with comprehensive type definitions
Customizable styling with Tailwind CSS
Responsive design with mobile-friendly interactions
Keyboard navigation and accessibility support
Theme-aware with automatic dark mode support

Examples

With PromptInput

Write project documentation

Complete the README and API docs

Implement authentication

Fix bug #42

Resolve crash on settings page

Refactor queue logic

Unify queue and todo state management

Add unit tests

Increase test coverage for hooks

Props

`<Queue />`

[...props]?:

React.ComponentProps<"div">

Any other props are spread to the root div.

`<QueueSection />`

defaultOpen?:

boolean

Whether the section is open by default. Defaults to true.

[...props]?:

React.ComponentProps<typeof Collapsible>

Any other props are spread to the Collapsible component.

`<QueueSectionTrigger />`

[...props]?:

React.ComponentProps<"button">

Any other props are spread to the button element.

`<QueueSectionLabel />`

label:

string

The label text to display.

count?:

number

The count to display before the label.

icon?:

React.ReactNode

An optional icon to display before the count.

[...props]?:

React.ComponentProps<"span">

Any other props are spread to the span element.

`<QueueSectionContent />`

[...props]?:

React.ComponentProps<typeof CollapsibleContent>

Any other props are spread to the CollapsibleContent component.

`<QueueList />`

[...props]?:

React.ComponentProps<typeof ScrollArea>

Any other props are spread to the ScrollArea component.

`<QueueItem />`

[...props]?:

React.ComponentProps<"li">

Any other props are spread to the li element.

`<QueueItemIndicator />`

completed?:

boolean

Whether the item is completed. Affects the indicator styling. Defaults to false.

[...props]?:

React.ComponentProps<"span">

Any other props are spread to the span element.

`<QueueItemContent />`

completed?:

boolean

Whether the item is completed. Affects text styling with strikethrough and opacity. Defaults to false.

[...props]?:

React.ComponentProps<"span">

Any other props are spread to the span element.

`<QueueItemDescription />`

completed?:

boolean

Whether the item is completed. Affects text styling. Defaults to false.

[...props]?:

React.ComponentProps<"div">

Any other props are spread to the div element.

`<QueueItemActions />`

[...props]?:

React.ComponentProps<"div">

Any other props are spread to the div element.

`<QueueItemAction />`

[...props]?:

Omit<React.ComponentProps<typeof Button>, "variant" | "size">

Any other props (except variant and size) are spread to the Button component.

`<QueueItemAttachment />`

[...props]?:

React.ComponentProps<"div">

Any other props are spread to the div element.

`<QueueItemImage />`

[...props]?:

React.ComponentProps<"img">

Any other props are spread to the img element.

`<QueueItemFile />`

[...props]?:

React.ComponentProps<"span">

Any other props are spread to the span element.