Render queue

Displays supplied export jobs, progress, and status with explicit cancel and retry callbacks for a connected renderer.

Preview

Exports

Film masterRendering
42%
42%
Review copyFailed
Destination unavailable

In action

Keep exports visible

Delivery workspace

Exports

Film masterRendering
ProRes master
42%
42%
Review copyFailed
Destination was unavailable

Actions update sample records. A renderer owns real export work.

When to use

Use it for

Renderer-owned jobs with queued, rendering, complete, failed, or canceled status.
onCancel for active jobs and onRetry for failed or canceled jobs; the host owns the resulting status.
Known percentages from zero through 100; missing progress remains explicitly unreported.

Not for

Simulating render progress or success without a backend result.
Displaying cancel or retry controls when there is no callback to handle them.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { RenderQueue } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/render-queue.

2. Vendor the source

npx @noorddev/vlak-cli add render-queue

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/render-queue.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { RenderQueue } from "@noorddev/vlak-react";

<RenderQueue label="Exports" jobs={[{ id: "master", label: "Film master", status: "rendering", progress: 42, detail: "ProRes master" }, { id: "preview", label: "Review copy", status: "queued" }]} />

Props

RenderQueue

Host-owned render jobs and available cancel or retry actions.

Prop	Type	Default	Description
`label`required	`ReactNode`
`jobs`required	`RenderJob[]`
`onCancel`	`(id: string) => void`
`onRetry`	`(id: string) => void`
`disabled`	`boolean`

Also accepts HTMLAttributes<HTMLDivElement>.

Keyboard

Keys	Does
`Tab`	Moves through available cancel and retry buttons.
`Enter, Space`	Requests the focused job action without changing the supplied job state.

Accessibility

Job labels and statuses remain text; determinate native progress is named per job.
Missing or invalid progress has an explicit text state and never emits NaN or an invented percentage.
Actions have job-specific names, 44px targets, and disabled support.
The ref and native attributes reach the root div.

Markup

<div class="rs-render-queue"><p class="rs-render-queue-label">Exports</p><ul class="rs-render-queue-list"><li class="rs-render-queue-job"><div class="rs-render-queue-header"><span>Film master</span><span>Rendering</span></div><progress class="rs-render-queue-progress" value="42" max="100" aria-label="Film master progress">42%</progress><p class="rs-render-queue-note">42%</p></li></ul></div>

Classes

.rs-render-queue.rs-render-queue-label.rs-render-queue-list.rs-render-queue-job.rs-render-queue-header.rs-render-queue-note.rs-render-queue-progress.rs-render-queue-action

Depends on

/button