Svelte AI Elements

Queue

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

  • How do I set up the project?
  • What is the roadmap for Q4?
  • Update the default logo to this png.
    setup-guide.png
  • 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

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/r/queue.json

If you prefer using jsrepo, please install via the command below:

pnpm dlx jsrepo add @ai/elements/ai-elements/queue

Usage

Examples

With Descriptions

With Actions

With Attachments

Component API

Queue

PropTypeDefaultDescription
classstring-Additional CSS classes to apply to the container
childrenSnippet-Child components
...restPropsHTMLAttributes<HTMLDivElement>-All other div props are supported

QueueSection

PropTypeDefaultDescription
defaultOpenbooleantrueWhether the section is open by default
classstring-Additional CSS classes
childrenSnippet-Child components
...restPropsCollapsibleProps-All other Collapsible props are supported

QueueItem

PropTypeDefaultDescription
classstring-Additional CSS classes
childrenSnippet-Child components
...restPropsHTMLLiAttributes-All other li props

QueueItemIndicator

PropTypeDefaultDescription
completedbooleanfalseWhether the item is completed
classstring-Additional CSS classes

QueueItemContent

PropTypeDefaultDescription
completedbooleanfalseWhether the item is completed
classstring-Additional CSS classes
childrenSnippet-Content to display

Features

  • Collapsible sections for organizing items into groups
  • Completed/pending states with visual indicators
  • Hover-revealed actions for clean UI
  • Attachment support for images and files
  • Scrollable lists with max height
  • Smooth animations for expand/collapse
  • Keyboard accessible with proper ARIA labels
  • Responsive design that adapts to different screen sizes
  • Seamless light/dark theme integration