DeckBuildProgress
StableProgress for a deck the AI builds slide by slide: slides ready out of the total, the real step, Stop that keeps what is done, and Retry per failed slide.
Also known as deck progress, build progress
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
A live build
Building 8 slides
Building: Q3 churn review
0 of 8 slides ready
Writing the title slide
You can leave this page. The deck keeps building and we will tell you when it is ready.
- 1. Q3 churn reviewBuilding
- 2. Churn went from 3.1% to 4.4%Waiting
- 3. Who left: small teams on monthly plansWaiting
- 4. What they told usWaiting
- 5. Price change in JulyWaiting
- 6. Three fixes we can ship this quarterWaiting
- 7. What it costsWaiting
- 8. Ask: approve the onboarding fixWaiting
<DeckBuildProgress
deckTitle="Q3 churn review"
state={state} // "queued" | "building" | "partial" | "failed" | "cancelled" | "done"
slides={slides} // [{ id, title, status: "waiting" | "building" | "ready" | "failed", kind }]
currentStep="Making the chart for slide 5"
background // the job keeps running if the person leaves
onStop={stopAndKeep}
onRetrySlide={(id) => retry(id)}
onRetryFailed={retryFailed}
onResume={buildTheRest}
onOpen={(slideId) => open(slideId)}
/>Eight slides build one by one. Slide 5 fails and the rest carry on, so the job ends Partly ready. Try Stop part way: it keeps the ready slides and offers to build the rest.
When to use it
Shows honestly how far a deck build has got, lets people use and keep what is done, and makes failed slides easy to fix without starting again.
Made of: Status icon and heading · Count line · Segment bar (one per slide) · Current step · Leave-the-page note · Actions · Slide list toggle · Slide rows (thumbnail, number, title, status, Open or Retry)
Use it for
- Building a deck from an approved outline, where each slide takes a few seconds.
- Redoing many slides at once, such as a new theme across the deck.
- A phone screen, as a compact bar above the slide strip.
Not for
- One image or one file being made: use GenerationProgress.
- A long agent run with many kinds of steps: use ActivityTrace.
- A job that is out of sight in the background: use BackgroundRunChip.
Do and avoid
Partly ready · 3 of 4 ready, 1 failed
Building your deck
Please keep this tab open or you will lose your slides.
Do
- Count real slides: "3 of 12 slides ready". People can check that.
- Let people open ready slides while the rest build.
- Say what Stop keeps, and offer to build the rest later.
- Treat one failed slide as that slide's problem, with its own Retry.
Avoid
- Do not show a made-up percentage or a timer that is not tied to the job.
- Do not ask people to keep the tab open. Run the job on the server.
- Do not animate slides flying in or play a celebration when the deck is ready.
- Do not colour the whole card lime. Lime marks only the slide the AI is making right now.
On a phone
- Set compact for a phone: one status line, the bar and the main action, with the slide list behind a Show slides button.
- Slide rows are at least 48px tall, and Open, Retry and Show slides get a 44px touch area.
- The bar keeps one segment per slide and shrinks the gaps, so it fits at 320px wide.
Seen in products
- Gemini in Google Slides builds a deck from a plan and asks people to keep the tab open while it works.
- Plus AI warns that Remix all can take a couple of minutes.
- Gamma's changelog shows decks built card by card in one long job.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| staterequired | "queued" | "building" | "partial" | "failed" | "cancelled" | "done" | none | Where the whole job is. Use partial when the job ended with some slides made and some failed; failed only when nothing usable exists. |
| slidesrequired | DeckBuildSlide[] | none | Every slide in outline order: id, title, status ("waiting" | "building" | "ready" | "failed") and an optional thumbnail kind. All counts come from here. |
| currentStep | string | none | The real step the job is on, such as "Making the chart for slide 4". Shown while building. |
| queuePosition | number | none | Place in the queue while queued. |
| background | boolean | false | Says the person can leave the page and the deck keeps building. Set it only when that is true. |
| error | string | none | Why the whole build failed, in plain words. |
| onStop | () => void | none | Stops the build and keeps the ready slides. The button reads "Stop and keep 3 slides". |
| onRetrySlide | (slideId: string) => void | none | Retries one failed slide. Adds Retry to its row. |
| onRetryFailed | () => void | none | Retries every failed slide, or the whole build when state is failed. |
| onResume | () => void | none | After a stop, builds the slides that were not made. |
| onOpen | (slideId?: string) => void | none | Opens the deck, or one ready slide. Adds Open to ready rows and Open deck when the job ends. |
| compact | boolean | false | One-row layout for a phone, with the list folded away. |
| deckTitle | string | none | Name of the deck, shown in the heading. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Level of the heading in the full layout. |
| className | string | none | Extra classes for the card. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one DeckBuildProgress switches all of this from its properties panel, across 24 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Status | state | Queued, Building, Partial, Failed, Cancelled, Done |
| Background | background | On or off |
| Compact | compact | On or off |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- queued
- "Waiting to start", with the queue position when given. The bar is empty.
- building
- Count, bar and the current step. The slide being made has a lime segment and a lime-edged thumbnail.
- partial
- Build ended with failed slides: amber "Needs you" line, Retry the failed slides, Open deck.
- failed
- Nothing usable was made: error text and Try the build again.
- cancelled
- "Stopped. 3 slides kept, 5 not built", with Build the other slides and Open deck.
- done
- "All 8 slides are ready" with Open deck.
- compact
- One-row phone layout with the slide list folded. Set compact.
Tokens
Change one of these and every part that uses it follows.
--surface--sunken--border--border-strong--fg--fg-muted--fg-subtle--lime--danger--danger-soft--danger-fg--attention-fg--success-fg--radius-card--radius-control--dur-base--dur-fast--ease-out
Built in
- The bar is a progressbar named "Slides ready" with a value text such as "3 of 12 slides ready, 1 failed".
- A polite live region speaks only when the job changes state or a slide fails, never for each step or each ready slide. It stays quiet on first render.
- Every slide status is a word (Waiting, Building, Ready, Failed, Not built), with an icon for Ready and Failed.
- Open and Retry buttons name their slide, such as "Retry slide 5, Price change in July".
- The slide list sits behind a button with aria-expanded.
- The pulsing dot on the slide being built holds still under reduced motion, and segments change colour without movement.
What you need to do
- Pass the real step from your build job. Never invent steps or a percentage to look busy.
- Keep the job running on the server if the person leaves, and only set background when that is true.
- When the person comes back to a finished job, show what happened with CatchUpSummary instead of replaying the progress.
- Move focus to the deck or the first ready slide when the person presses Open.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide