Skip to main content

​
Overview

SlideDeck is the main provider component that wraps your slides layout. It provides keyboard navigation, ViewTransition animations, progress UI, an optional exit button, and presenter sync capabilities. Place this component in your slides layout (e.g. app/slides/layout.tsx). Important: SlideDeck must be the direct child of the layout (no wrapper div) for the deck-unveil exit animation to work correctly.

​
Props

​
slides
React.ReactNode[]
required
Array of slide components to display in the deck.
​
children
React.ReactNode
required
The current slide’s content (typically passed from the layout).
​
basePath
string
default:"/slides"
Base path for slide URLs. Use this when you have multiple decks or non-standard routing.
​
exitUrl
string
URL to navigate to when exiting the deck. When set, shows an × button in the top-right corner.
​
showProgress
boolean
default:"true"
Show progress dots at the bottom of the viewport.
​
showCounter
boolean
default:"true"
Show slide counter (e.g. “3 / 10”) in the bottom-right corner.
​
syncEndpoint
string
API endpoint for presenter ↔ phone sync. When set, POSTs the current slide on navigation for SlideNotesView to poll. See the sync route handlers documentation.
​
speakerNotes
(string | React.ReactNode | null)[]
Speaker notes per slide (same index as slides array). Use parseSpeakerNotes() to load from a markdown file.
​
className
string
Additional className for the deck container. Useful for applying custom styling or font classes to specific decks.

​
Features

  • Keyboard navigation — Arrow keys and Space to navigate slides
  • ViewTransition animations — Slide-in/out with directional awareness
  • Progress UI — Dots and a counter at the bottom of the viewport
  • Exit button — When exitUrl is set, shows an × in the top-right corner
  • Presenter sync — When syncEndpoint is set, POSTs the current slide on navigation

​
Usage

// app/slides/layout.tsx
import { SlideDeck } from 'nextjs-slides';
import { slides } from './slides';

export default function SlidesLayout({ children }: { children: React.ReactNode }) {
  return (
    <SlideDeck slides={slides} exitUrl="/" syncEndpoint="/api/nxs-sync">
      {children}
    </SlideDeck>
  );
}

​
Multiple Decks

You can have multiple slide decks with different configurations: 
// app/slides-alt/layout.tsx
import { SlideDeck } from 'nextjs-slides';
import { slides } from './slides';

export default function AltSlidesLayout({ children }: { children: React.ReactNode }) {
  return (
    <SlideDeck 
      slides={slides} 
      basePath="/slides-alt"
      exitUrl="/"
      className="font-serif"
    >
      {children}
    </SlideDeck>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us