Presentation

Installation

pnpm dlx shadcn@latest add @diceui/presentation

@diceui/pptx pulls in @diceui/pptx-core automatically. The thumbnail rail collapses below 768px behind a toggle, which is why this item also depends on button and use-mobile.

Layout

Import the parts, and compose them together.

import {
  Presentation,
  PresentationContent,
  PresentationError,
  PresentationLoading,
  PresentationSelection,
  PresentationSlide,
  PresentationThumbnailList,
  PresentationViewport,
} from "@/components/ui/presentation";
 
return (
  <Presentation>
    <PresentationThumbnailList />
    <PresentationContent>
      <PresentationLoading />
      <PresentationError />
      <PresentationViewport>
        <PresentationSlide>
          <PresentationSelection />
        </PresentationSlide>
      </PresentationViewport>
    </PresentationContent>
  </Presentation>
)

Pass a File, Blob, ArrayBuffer, or Uint8Array to file on Presentation. There is no toolbar in this item — toolbars are assembled around the primitives.

Examples

Editing

Load with readOnly={false} and place PresentationSelection inside PresentationSlide to move, resize, and edit text. Undo and redo shortcuts are opt-in via undoRedoShortcuts. Drag thumbnails to reorder slides.

This example also uses PresentationZoomSelect, a companion control built with useZoom and select. Install it with @diceui/presentation-zoom-select.

API Reference

PresentationProvider

Makes an existing store available to descendants without rendering any DOM. Use it when a toolbar has to sit outside Presentation, or when the store is created with useCreatePresentationStore before the tree mounts.

Presentation

The outermost component. Creates an internal store (or inherits one from PresentationProvider), loads the file, and provides context to all descendants.

PresentationContent

Layout wrapper for the viewport column next to the thumbnail rail.

PresentationViewport

Scrollable container that centers the slide and optionally auto-fits it to fill the available space. The styled wrapper defaults autoFit to true with 10px padding.

PresentationSlide

Renders the active slide as a scaled DOM tree. Mounts an empty wrapper immediately so sibling layout is stable. Children are placed in an overlay; put PresentationSelection here.

PresentationSelection

PowerPoint-style editing overlay. Enables drag-to-move, resize, inline text editing, multi-select, and keyboard shortcuts. Renders nothing unless the presentation was loaded with readOnly={false}.

Must be placed inside PresentationSlide.

PresentationLoading

Renders its children only while the presentation is in the "loading" state.

PresentationError

Renders its children only when the presentation fails to parse.

PresentationThumbnailList

Scrollable list of slide thumbnails. Below 768px the rail collapses behind a toggle button and closes on outside pointerup or Escape.

PresentationThumbnailItem

Clickable item for a single slide in a PresentationThumbnailList.

PresentationThumbnailItemPreview

Renders the slide miniature for the enclosing PresentationThumbnailItem. Previews are rendered lazily as they approach the viewport.

PresentationThumbnailItemNumber

Renders the 1-based slide number for the enclosing PresentationThumbnailItem.

PresentationZoomSelect

Companion select for Fit and explicit zoom levels. Must be used inside PresentationProvider or Presentation.

usePresentation

Subscribes to top-level presentation state: parse status, progress, and errors.

useSlide

Subscribes to slide navigation state and exposes navigation actions.

useZoom

Subscribes to zoom state. Setting an explicit level turns auto-fit off; setAutoFit(true) turns it back on.

useHistory

Undo, redo, and whether the deck has unsaved edits.

Create a store with useCreatePresentationStore for programmatic load, edit, save, and reset. See the store API for the full imperative surface.

Accessibility

Keyboard Interactions

Thumbnail list

Selection overlay

Available when the presentation is loaded with readOnly={false}.