Source: https://ai-sdk.dev/elements/components/queue

Vercel

Slash Forward

Sparkles

AI SDK

Docs Cookbook Providers Playground AI ElementsAI ElementsLeft sparkleRight sparkle AI GatewayGateway

Search...⌘KFeedback GitHub Vercel LogoSign in with Vercel

Chatbot

Queue

A comprehensive queue component system for displaying message lists, todos, and collapsible task sections in AI applications.

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.

Preview

Code

7 Queued

• How do I set up the project?

• What is the roadmap for Q4?

• Update the default logo to this png.

  

• Please generate a changelog.

• Add dark mode support.

• Optimize database queries.

• Set up CI/CD pipeline.

5 Todo

• 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

---

AI Elements

shadcn CLI

Manual

npx ai-elements@latest add 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

Preview

Code

• 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

SearchGPT-4o

Props

---

<Queue />

Prop

Type

...props?React.ComponentProps<"div">

<QueueSection />

Prop

Type

defaultOpen?boolean

...props?React.ComponentProps<typeof Collapsible>

<QueueSectionTrigger />

Prop

Type

...props?React.ComponentProps<"button">

<QueueSectionLabel />

Prop

Type

label?string

count?number

icon?React.ReactNode

...props?React.ComponentProps<"span">

<QueueSectionContent />

Prop

Type

...props?React.ComponentProps<typeof CollapsibleContent>

<QueueList />

Prop

Type

...props?React.ComponentProps<typeof ScrollArea>

<QueueItem />

Prop

Type

...props?React.ComponentProps<"li">

<QueueItemIndicator />

Prop

Type

completed?boolean

...props?React.ComponentProps<"span">

<QueueItemContent />

Prop

Type

completed?boolean

...props?React.ComponentProps<"span">

<QueueItemDescription />

Prop

Type

completed?boolean

...props?React.ComponentProps<"div">

<QueueItemActions />

Prop

Type

...props?React.ComponentProps<"div">

<QueueItemAction />

Prop

Type

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

<QueueItemAttachment />

Prop

Type

...props?React.ComponentProps<"div">

<QueueItemImage />

Prop

Type

...props?React.ComponentProps<"img">

<QueueItemFile />

Prop

Type

...props?React.ComponentProps<"span">

Prompt Input

Allows a user to send a message with file attachments to a large language model. It includes a textarea, file upload capabilities, a submit button, and a dropdown for selecting the model. Reasoning

A collapsible component that displays AI reasoning content, automatically opening during streaming and closing when finished.

On this page

Installation Features Examples With PromptInput Props <Queue /> <QueueSection /> <QueueSectionTrigger /> <QueueSectionLabel /> <QueueSectionContent /> <QueueList /> <QueueItem /> <QueueItemIndicator /> <QueueItemContent /> <QueueItemDescription /> <QueueItemActions /> <QueueItemAction /> <QueueItemAttachment /> <QueueItemImage /> <QueueItemFile />

GitHubEdit this page on GitHub Scroll to topCopy pageOpen in chat