Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Presentation Builder AI Block for React Aria

A deck editor in a fixed window: a slide navigator with Move up and Move down, the chosen slide in four layouts, fields for its text and speaker notes, Add slide, and typed assistant drafts with Undo.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Build a deck and let an assistant draft the words, with this presentation builder for React with React Aria. A framed window of fixed height has a top bar for Slidewright, a deck editor, with the one primary, the Shine Button Add slide, and a "Draft with the assistant" Dropdown Menu (Improve wording, Write speaker notes, Suggest a title). A navigator at the start lists the slides as drawn thumbnails you can walk with the arrow keys, with Move up and Move down for the chosen one. The chosen slide is shown large in one of four layouts (title, bullets, quote and two columns) with real text, and fields under it edit the title, the layout in a Native Select, the text and the speaker notes in a Textarea. Assistant drafts are typed rewrites, and Undo draft puts the old text back. The frame is ruled by Guides.

FAQ

What stays local, and how do I wire it for real?

Everything. The six slides, their notes and the assistant's drafts are typed at the top of the file, no model runs, and nothing is saved when you leave. A slide you add has no typed draft, and the menu says so. To make it real, send the slide text to your model from the three menu handlers and put the answer through the same draftWith function, which already keeps an Undo.

How do the four layouts read the text?

The first line of the slide text is the subtitle on a title slide and the attribution on a quote; on a bullets slide each line is a bullet; and on a two-column slide the lines split in half, the first half in the first column. The title field is the slide's title or, on a quote, the quote itself.

How do I reorder slides?

Choose a slide and press Move up or Move down; the buttons are disabled with a spoken reason at either end. The navigator is also a list you can walk: Arrow Up and Arrow Down move to the previous or next slide and keep focus on its thumbnail.

Can I undo an assistant draft?

Yes, one step. Undo draft in the status bar puts back the text the last draft replaced. Edits you type yourself are not part of that history in this demo.

Is it usable with a keyboard and a screen reader?

Each thumbnail is a button named "Slide 2 of 6, Where we are" and marks the chosen one as current, every field has a visible label, the menu opens from the keyboard, and one polite status line says what changed. The window never changes height, and only its regions scroll.

How does it look on a phone?

Below 768 px a Slides and Slide switch under the top bar shows one side at a time, choosing a slide opens it, and the top bar buttons keep only their icons with spoken names.