LayoutAlternatives
StableOther layouts for one slide, suggested by the AI and compared with the slide as it is. Preview without changing the deck, then apply one or keep the current.
Also known as layout suggestions, design ideas
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Preview, apply and undo
Slide 3, Pricing
Other layouts for slide 3
Your text stays exactly as written. Layouts that cannot fit it are left out.
Arrow keys and focus preview a layout on the slide without changing it. Enter applies it. Escape goes back to the current layout.
3 layouts ready.
<LayoutAlternatives slideName="slide 3"
current={{ thumbnail: <SlideDrawing slide={slide} /> }}
options={options} state={state} loadingCount={waiting}
previewId={previewId} onPreview={setPreviewId}
onApply={(id) => { applyLayout(id); setAppliedId(id); setPreviewId(null); }}
appliedId={appliedId} onUndo={undoLayout}
textMode={textMode} onTextModeChange={(m) => { setTextMode(m); askAgain(m); }}
onMore={() => askAgain(textMode)} cost="About 2 credits" />
// options: [{ id: "chart-full", label: "Full-width chart",
// note: "Points move to speaker notes", thumbnail: <SlideDrawing … /> }, …]Hover or Tab through the layouts: the slide on the left shows each one as a preview and the deck does not change. Enter or a click applies; Undo takes it back. Switch to Shorten to fit to ask again with one more option.
When to use it
Lets people try other layouts for one slide safely: they see each one on the slide before anything changes, and their words are protected unless they say otherwise.
Made of: Title with AI mark · Text mode (Keep my words, Shorten to fit) · Text mode promise · Current layout (always first) · Suggested layouts with label and what changes · Placeholders for layouts on the way · Preview bar (Back to current, Apply layout) · Applied row with Undo · More layouts with cost · No good layouts or failed notice
Use it for
- A Layouts panel beside the slide stage in a deck editor.
- A bottom Sheet on a phone, opened from the slide.
- Any single item where the AI offers other arrangements of the same content.
Not for
- Picking one of several fresh generations, such as images: use VariantGrid.
- Reviewing an AI edit that changed several slides: use DeckChangeReview.
- Choosing between video takes: use TakeGrid.
Do and avoid
Other layouts for slide 2
Your text stays exactly as written. Layouts that cannot fit it are left out.
Arrow keys and focus preview a layout on the slide without changing it. Enter applies it. Escape goes back to the current layout.
2 layouts ready.
Do
- Keep the current layout first, so going back is always one step.
- Say on the slide stage, in words, that a preview is not applied.
- Make the text mode visible and keep it until the person changes it.
- Show no options rather than weak ones, and offer Edit text.
- Say on each option what it changes about the words when the mode is Shorten to fit.
Avoid
- Do not apply a layout on hover or focus. Previews never change the deck.
- Do not shuffle layouts in a way that drops the person's edits.
- Do not colour the slide drawings or the preview lime. Lime is only the AI mark and the placeholders' mark.
- Do not use amber for "layouts available". Suggestions are optional.
On a phone
- Two layouts per row; three from a wider panel and four on a wide page.
- A tap previews a layout; the Apply layout button commits it, because touch has no hover.
- Buttons and layout tiles have a 44px touch area.
- Put it in a bottom Sheet on a phone.
Seen in products
- PowerPoint Designer shows layout thumbnails in a side pane, applies one on select, offers a way back to the original, and shows no ideas when it cannot make good ones.
- Plus AI Remix has a layout picker or lets the AI pick, with a Strict mode that keeps the person's text.
- Beautiful.ai Slide AI shows several Smart Slide layouts for the same content.
- Gamma's generate setting separates generate, condense and preserve, a promise about how much text may change.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| currentrequired | { thumbnail: ReactNode; label?: string } | none | The slide as it is now. Always the first option, labelled Current. |
| optionsrequired | { id: string; label: string; thumbnail: ReactNode; note?: string }[] | none | Suggested layouts. label is the accessible name; note says what changes, such as "Shortens two points". |
| staterequired | "loading" | "partial" | "ready" | "failed" | "none" | none | Where the request is. none means the AI found no layout good enough. |
| loadingCount | number | 0 | Placeholders to draw for layouts still on the way, while loading or partial. |
| previewId | string | null | none | The option previewed on the slide. null shows the current layout. |
| onPreviewrequired | (id: string | null) => void | none | Preview an option on your slide stage, or go back to the current layout with null. Never change the deck here. |
| onApplyrequired | (id: string) => void | none | Apply an option to the slide: Enter, a mouse click or Apply layout. |
| appliedId | string | null | none | The option just applied. Shows Applied and Undo. |
| onUndo | () => void | none | Shows Undo after applying. Restore the previous layout and clear appliedId. |
| textModerequired | "keep" | "fit" | none | keep: the person's words stay exactly. fit: the AI may shorten text to fit a layout. |
| onTextModeChange | (mode: "keep" | "fit") => void | none | Shows the Keep my words and Shorten to fit control. Ask for new layouts when it changes. |
| onMore | () => void | none | Shows More layouts when ready, and Try again in the none state. |
| onRetry | () => void | none | Try again in the failed state. |
| onEditText | () => void | none | Edit text in the none state. |
| error | string | none | Plain reason in the failed state. |
| noneReason | string | none | Plain reason in the none state. |
| cost | ReactNode | none | What More layouts costs, shown beside it. |
| slideName | string | none | The slide, such as "slide 3". Used in the title and the group name. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Heading level of the title. |
| className | string | none | Extra classes for the panel. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one LayoutAlternatives switches all of this from its properties panel, across 10 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Status | state | Loading, Partial, Ready, Failed, None |
| Text mode | textMode | Keep, Fit |
| Cost | cost | Any text |
Tokens
Change one of these and every part that uses it follows.
--surface--bg--sunken--border--border-strong--fg--fg-muted--lime--on-lime--success-fg--danger-fg--radius-card--radius-control--dur-fast--ease-out
Built in
- The layouts are a radio group with one tab stop. Arrow keys, Home and End move between layouts, and focus previews the layout.
- Enter applies the focused layout. Space previews it. Escape goes back to the current layout and moves focus to it.
- Each layout's name says whether it is the current one or applied, and includes what it changes.
- Previewing and Applied are written on the tile, not shown by border alone.
- A polite live region says only state changes: layouts ready, previewing a layout, back to original, applied, undone.
- Placeholders are hidden from screen readers; the live region says how many layouts are ready.
- A touch tap previews instead of applying, and Apply layout is a separate button.
- Tiles enter with Reveal, which does not move under reduced motion.
What you need to do
- Show the preview on your slide stage when onPreview is called, and mark it as a preview in words. Never save a preview to the deck.
- Return null from your preview when onPreview(null) arrives, so Escape and Back to current really restore the slide.
- Only offer layouts that fit the chosen text mode. In Keep my words, leave out layouts that would cut text.
- Work out the cost of More layouts in your code and pass it in cost.
- On a phone, put the part in a bottom Sheet and keep the slide visible above it.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide