Queue

Display a queue of tasks or messages with organized sections.

Analyze user requirements
Reviewed and documented all feature requests
Create project structure

Implement authentication
Design database schema
Set up API routes

import { CheckIcon, ClockIcon } from "lucide-react"

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

export function QueueDemo() {
  return (
    <div className="w-full max-w-md">
      <Queue>
        <QueueSection>
          <QueueSectionTrigger>
            <QueueSectionLabel
              count={2}
              label="Completed"
              icon={<CheckIcon className="size-4" />}
            />
          </QueueSectionTrigger>
          <QueueSectionContent>
            <QueueList>
              <QueueItem>
                <div className="flex items-start gap-2">
                  <QueueItemIndicator completed />
                  <QueueItemContent completed>
                    Analyze user requirements
                  </QueueItemContent>
                </div>
                <QueueItemDescription completed>
                  Reviewed and documented all feature requests
                </QueueItemDescription>
              </QueueItem>
              <QueueItem>
                <div className="flex items-start gap-2">
                  <QueueItemIndicator completed />
                  <QueueItemContent completed>
                    Create project structure
                  </QueueItemContent>
                </div>
              </QueueItem>
            </QueueList>
          </QueueSectionContent>
        </QueueSection>

        <QueueSection>
          <QueueSectionTrigger>
            <QueueSectionLabel
              count={3}
              label="Pending"
              icon={<ClockIcon className="size-4" />}
            />
          </QueueSectionTrigger>
          <QueueSectionContent>
            <QueueList>
              <QueueItem>
                <div className="flex items-start gap-2">
                  <QueueItemIndicator />
                  <QueueItemContent>Implement authentication</QueueItemContent>
                </div>
              </QueueItem>
              <QueueItem>
                <div className="flex items-start gap-2">
                  <QueueItemIndicator />
                  <QueueItemContent>Design database schema</QueueItemContent>
                </div>
              </QueueItem>
              <QueueItem>
                <div className="flex items-start gap-2">
                  <QueueItemIndicator />
                  <QueueItemContent>Set up API routes</QueueItemContent>
                </div>
              </QueueItem>
            </QueueList>
          </QueueSectionContent>
        </QueueSection>
      </Queue>
    </div>
  )
}

Installation

CLI

Manual


pnpm
npm
yarn
bun
pnpm dlx shadcn@latest add queue

Usage

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

<Queue>
  <QueueSection>
    <QueueSectionTrigger>
      <QueueSectionLabel count={2} label="Completed" icon={<CheckIcon />} />
    </QueueSectionTrigger>
    <QueueSectionContent>
      <QueueList>
        <QueueItem>
          <QueueItemIndicator completed />
          <QueueItemContent completed>Task 1</QueueItemContent>
        </QueueItem>
      </QueueList>
    </QueueSectionContent>
  </QueueSection>
</Queue>

Examples

Default

Analyze user requirements
Reviewed and documented all feature requests
Create project structure

Implement authentication
Design database schema
Set up API routes

import { CheckIcon, ClockIcon } from "lucide-react"

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

export function QueueDemo() {
  return (
    <div className="w-full max-w-md">
      <Queue>
        <QueueSection>
          <QueueSectionTrigger>
            <QueueSectionLabel
              count={2}
              label="Completed"
              icon={<CheckIcon className="size-4" />}
            />
          </QueueSectionTrigger>
          <QueueSectionContent>
            <QueueList>
              <QueueItem>
                <div className="flex items-start gap-2">
                  <QueueItemIndicator completed />
                  <QueueItemContent completed>
                    Analyze user requirements
                  </QueueItemContent>
                </div>
                <QueueItemDescription completed>
                  Reviewed and documented all feature requests
                </QueueItemDescription>
              </QueueItem>
              <QueueItem>
                <div className="flex items-start gap-2">
                  <QueueItemIndicator completed />
                  <QueueItemContent completed>
                    Create project structure
                  </QueueItemContent>
                </div>
              </QueueItem>
            </QueueList>
          </QueueSectionContent>
        </QueueSection>

        <QueueSection>
          <QueueSectionTrigger>
            <QueueSectionLabel
              count={3}
              label="Pending"
              icon={<ClockIcon className="size-4" />}
            />
          </QueueSectionTrigger>
          <QueueSectionContent>
            <QueueList>
              <QueueItem>
                <div className="flex items-start gap-2">
                  <QueueItemIndicator />
                  <QueueItemContent>Implement authentication</QueueItemContent>
                </div>
              </QueueItem>
              <QueueItem>
                <div className="flex items-start gap-2">
                  <QueueItemIndicator />
                  <QueueItemContent>Design database schema</QueueItemContent>
                </div>
              </QueueItem>
              <QueueItem>
                <div className="flex items-start gap-2">
                  <QueueItemIndicator />
                  <QueueItemContent>Set up API routes</QueueItemContent>
                </div>
              </QueueItem>
            </QueueList>
          </QueueSectionContent>
        </QueueSection>
      </Queue>
    </div>
  )
}

import { CheckIcon, ClockIcon } from "lucide-react"
 
export default function Example() {
  return (
    <Queue>
      <QueueSection>
        <QueueSectionTrigger>
          <QueueSectionLabel
            count={2}
            label="Completed"
            icon={<CheckIcon className="size-4" />}
          />
        </QueueSectionTrigger>
        <QueueSectionContent>
          <QueueList>
            <QueueItem>
              <div className="flex items-start gap-2">
                <QueueItemIndicator completed />
                <QueueItemContent completed>
                  Analyze user requirements
                </QueueItemContent>
              </div>
            </QueueItem>
          </QueueList>
        </QueueSectionContent>
      </QueueSection>
 
      <QueueSection>
        <QueueSectionTrigger>
          <QueueSectionLabel
            count={3}
            label="Pending"
            icon={<ClockIcon className="size-4" />}
          />
        </QueueSectionTrigger>
        <QueueSectionContent>
          <QueueList>
            <QueueItem>
              <div className="flex items-start gap-2">
                <QueueItemIndicator />
                <QueueItemContent>Implement authentication</QueueItemContent>
              </div>
            </QueueItem>
          </QueueList>
        </QueueSectionContent>
      </QueueSection>
    </Queue>
  )
}

API Reference

Queue

Main queue container.

Prop	Type	Default	Description
`className`	`string`	-	Custom CSS classes

QueueSection

Collapsible section within the queue.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`true`	Initial open state
`className`	`string`	-	Custom CSS classes

QueueSectionLabel

Section header label with count.

Prop	Type	Default	Description
`count`	`number`	-	Number of items
`label`	`string`	-	Section label
`icon`	`ReactNode`	-	Icon element
`className`	`string`	-	Custom CSS classes

QueueItem

Individual queue item.

Prop	Type	Default	Description
`className`	`string`	-	Custom CSS classes

QueueItemIndicator

Status indicator dot.

Prop	Type	Default	Description
`completed`	`boolean`	`false`	Whether item is completed
`className`	`string`	-	Custom CSS classes

QueueItemContent

Item content text.

Prop	Type	Default	Description
`completed`	`boolean`	`false`	Whether item is completed
`className`	`string`	-	Custom CSS classes

Prompt Input Reasoning

On This Page

Installation Usage Examples Default API Reference Queue QueueSection QueueSectionLabel QueueItem QueueItemIndicator QueueItemContent