Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Job Queue Status Notification Block for React Aria

A job queue's four counters that roll when they change, a progress bar of done over total, a Pause queue that moves running jobs to Paused and re-derives the counts, and a job list with Retry on the failed one.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Say what the queue is doing and give the one control that matters, with this queue status notification for React with React Aria. It is Queuemoor, a job queue, in a hairline frame with a plus mark on each corner. The first band is four counter cells, Queued, Running, Done and Failed, in Sliding Number so each figure rolls when it changes; under them a Progress bar of done over total and a line that says how many jobs are paused. Pause queue, the one Shine Button in the header, moves the running jobs to Paused and every count follows; Resume moves them back. The job list shows four of nine jobs with a name in mono, a state as a glyph and a word, and Retry on the failed one; Show all opens the rest. Guides draw the lines. For background jobs, import runs and any queue with a pause.

FAQ

How do I fill it with my jobs?

Edit JOBS: each has an id, a name, how many items it handles, a state (done, failed, paused, queued or running) and, for a failed one, a reason. Every counter, the bar and the lines are worked out from that array by small helpers, so they always agree. In your app pass the jobs your queue reports and call its pause and retry endpoints from toggle and retry.

What stays local in the demo?

Everything. Pause queue changes the states on this page, Retry queues the failed job again here and nothing runs on a server. A reload brings the queue back as typed. Failed jobs that you retry become Queued; a queue that is paused keeps them waiting.

What happens to the counts when I pause?

The running jobs become Paused, so Running drops to 0, Queued and Done stay, and the line under the bar reads "3 jobs are paused and wait for Resume." Resume puts them back and the numbers roll up again. The bar only moves when a job is done.

What moves on its own?

Only the spinner of a running job, and it stops under reduced motion and when the queue is paused. The counters roll only when you change something.

Is it accessible?

The counters are a labelled list, the bar is hidden from assistive technology because its figures are written next to it, and every state is a word as well as a glyph. Retry names its job. One polite status line says each change, and Show all reports whether the extra rows are open.

All 100 notification blocks