SlideRail
StableThe list of slide thumbnails: move around, choose slides, reorder, and see each slide's state in words.
Also known as slide thumbnails, slide sorter, filmstrip
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
A deck being built
Slides 7
Slide 1
Slide 1, Spring range review
Northwind Kitchens
Spring range review
For the buying team, 14 October
const [current, setCurrent] = useState("s1");
const [selected, setSelected] = useState(["s1"]);
<SlideRail
slides={[
{ id: "s1", title: "Spring range review", status: "edited", aiMade: true, thumbnail: <TitleSlide /> },
{ id: "s3", title: "Orders by month", status: "review", aiMade: true, thumbnail: <ChartSlide />,
error: "A number on this slide has no source." },
{ id: "s4", title: "What chefs told us", status: "stale", aiMade: true, thumbnail: <QuoteSlide /> },
{ id: "s5", title: "Pricing", status: "generating", aiMade: true, thumbnail: <PricingSlide /> },
{ id: "s6", title: "Customer photos", status: "failed", error: "The image could not be made. Your text is safe." },
{ id: "s7", title: "Next steps", status: "pending" },
]}
currentId={current} onCurrentChange={setCurrent}
selectedIds={selected} onSelectionChange={setSelected}
onReorder={(from, to) => moveSlide(from, to)}
onRetry={(id) => retrySlide(id)}
onInsertAfter={(id) => addSlideAfter(id)}
onDuplicate={(ids) => duplicateSlides(ids)}
onDelete={(ids) => deleteSlides(ids)}
onUndo={() => undoLast()}
/>Every state at once. Slide 5 is being written, slide 6 failed and can be tried again on its own, slide 3 needs review, and slide 4 was built before its outline changed. Try Shift with an arrow to choose several slides, Alt with an arrow to move one, and Delete then Undo.
When to use it
Lets someone find their way around a deck the AI is building or editing, see which slides need them, and choose what the next AI edit may touch.
Made of: Title and slide count · Add slide · Slide number · Thumbnail · Working edge while writing · AI mark · State in words · Drop line while dragging · Undo note · Action bar: Try again and More actions · Delete question
Use it for
- The slide list beside the stage in a deck editor.
- Choosing several slides as the scope of an AI edit, such as "shorten slides 3 to 5".
- Following a deck build slide by slide, and retrying one failed slide without stopping the rest.
Not for
- Planning the deck before slides exist: use OutlineEditor.
- Overall progress of a long build: use DeckBuildProgress.
- Picking one of several layouts for one slide: use LayoutAlternatives.
- A gallery of finished images: use VariantGrid.
Do and avoid
Slides 3
Slide 1
Slides 3
Slide 1
Do
- Show every slide's state, and keep failed slides from blocking the others.
- Let people choose several slides before an AI edit, so the edit only touches those.
- Pass onUndo whenever you pass onDelete.
- Pass the same slide drawing you give the stage. The rail scales it down.
Avoid
- Don't use the AI colour for the selection, the current slide or the person's edits. It marks only slides being written and the AI mark.
- Don't make "outline changed" amber unless the person must act before export. Use review for that.
- Don't animate every thumbnail while a deck builds. One working edge per slide being written is enough.
- Don't delete on a single key press.
On a phone
- Below 600px wide, "auto" turns the column into a sideways strip that snaps slide by slide, with 64px-tall thumbnails.
- Every slide is at least 44px tall to tap. Add slide, Try again and More actions grow to 44px on touch screens.
- Drag does not work on most phones, so Move earlier and Move later are in the More actions menu, which opens as a bottom sheet.
- A long press on a slide opens the same menu where the browser supports it; the visible More button always does.
Seen in products
- Gamma: multi-select cards to set the scope of an AI edit, and a right-click menu on a card's edge.
- Gemini in Slides and Copilot in PowerPoint build decks slide by slide from a plan.
- Gamma shipped mobile web editing in June 2026 and phone apps in August 2026.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| slidesrequired | SlideRef[] | none | The slides in order: id, title, status, and optional thumbnail, aiMade and error. |
| currentIdrequired | string | none | The slide on the stage. It holds keyboard focus in the list. |
| onCurrentChangerequired | (id: string) => void | none | Called when the person moves to another slide. |
| selectedIds | string[] | none | Slides chosen as the scope of an edit. Defaults to the current slide. |
| onSelectionChange | (ids: string[]) => void | none | Turns on choosing several slides. |
| onReorder | (from: number, to: number) => void | none | Turns on drag, Alt with an arrow, and Move earlier or later. to is the new index. |
| onRetry | (id: string) => void | none | Shows Try again for a failed slide. |
| onInsertAfter | (id: string) => void | none | Shows Add slide, placed after this slide. |
| onDuplicate | (ids: string[]) => void | none | Shows Duplicate for the chosen slides. |
| onDelete | (ids: string[]) => void | none | Shows Delete. The rail always asks first, with Keep focused. |
| onUndo | () => void | none | Shows Undo after an add, duplicate, delete or move, and on Ctrl+Z or Cmd+Z in the list. |
| orientation | "vertical" | "horizontal" | "auto" | "auto" | "auto" is a column, and a sideways strip below 600px wide. |
| ratio | "16:9" | "4:3" | "1:1" | "4:5" | "9:16" | "fluid" | "16:9" | Slide shape for the thumbnails. Fluid slides show as 16:9. |
| label | string | "Slides" | Name of the list, shown above it. |
| className | string | none | Give the vertical rail a height, such as h-160, so the list scrolls inside it. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one SlideRail switches all of this from its properties panel, across 18 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Orientation | orientation | Vertical, Horizontal, Auto |
| Ratio | ratio | 16:9, 4:3, 1:1, 4:5, 9:16, Fluid |
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.
- waiting
- status "pending": the title on a still placeholder, with "Waiting".
- writing
- status "generating": a working edge in the AI colour and "Writing…".
- edited by you
- status "edited": a person mark and "Edited by you"; the AI mark is dropped.
- failed
- status "failed": "Failed" in words, the error in the action bar and Try again.
- outline changed
- status "stale": a neutral "Outline changed" note.
- needs review
- status "review": amber "Needs review", only when the person must act.
- several chosen
- Shift, Ctrl or Cmd with a click or arrow: chosen slides get a tint and a tick, and the bar says how many.
- dragging
- An ink line shows where the slide will land.
- asking to delete
- Delete opens a question with Keep focused; Undo shows after.
Tokens
Change one of these and every part that uses it follows.
--lime--on-lime--attention--attention-fg--danger-fg--accent-soft--fg--fg-muted--fg-subtle--border--surface--surface-sunken--surface-hover--dur-fast--dur-base--ease-out--spacing
Built in
- The list is a listbox, multi-selectable when onSelectionChange is set. Each slide is an option named "Slide 3 of 7, Orders by month, needs your review, made by AI" plus its error.
- Only the current slide is in the Tab order. Arrows move, Home and End jump, Shift with an arrow or Home or End extends the selection, Space adds or removes a slide, Ctrl+A or Cmd+A selects all, Escape goes back to one slide.
- Alt with an arrow moves the current slide and is announced: "Slide 4, What chefs told us, moved to position 3".
- Delete or Backspace opens a question below the list with Keep focused; Escape closes it. Nothing is deleted on one key.
- A polite live region announces milestones only: a slide failing or needing review, how many slides are ready, moves, deletes and Undo.
- Drag has a keyboard and menu alternative: Alt with an arrow, and Move earlier or Move later in More actions.
- Thumbnails are hidden from screen readers; the option name carries the title and state. States are words with an icon, never colour alone.
- Thumbnail placeholders stop shimmering and the working edge stops turning when reduced motion is on.
What you need to do
- Give every slide a real title. Screen readers move through the deck by these titles.
- Keep the history yourself when you pass onUndo, and restore the slides and the current slide in it.
- After a delete, set a new currentId so focus has a slide to land on.
- Pass error in plain words for failed and review slides, and say whether anything was lost.
- Never let a deck-wide AI change rewrite slides marked edited unless the person chose them.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide