Skip to main content
This guide will walk you through creating a complete slide deck with nextjs-slides. You’ll learn how to define slides, set up routing, and add navigation.
Make sure you’ve installed nextjs-slides before starting this guide.

​
Step-by-Step Guide

1

Import the stylesheet

In your root layout or global CSS file, import the nextjs-slides stylesheet after Tailwind CSS:
app/globals.css
@import 'tailwindcss';
@import 'nextjs-slides/styles.css';
The stylesheet includes an @source directive that tells Tailwind v4 to scan the library’s component files for utility classes — no extra configuration needed.
2

Define your slides

Create a file to define your slides. Import the primitives you need and build your slide array:
app/slides/slides.tsx
import {
  Slide,
  SlideTitle,
  SlideSubtitle,
  SlideBadge,
  SlideCode,
} from 'nextjs-slides';

export const slides = [
  <Slide key="intro">
    <SlideBadge>Welcome</SlideBadge>
    <SlideTitle>My Presentation</SlideTitle>
    <SlideSubtitle>Built with nextjs-slides</SlideSubtitle>
  </Slide>,

  <Slide key="code" align="left">
    <SlideTitle>Code Example</SlideTitle>
    <SlideCode title="hello.ts">{`const greeting = "Hello, world!";
console.log(greeting);`}</SlideCode>
  </Slide>,
];
Each slide is a React element with a unique key. The align prop controls content alignment ("center" or "left").
3

Create the layout (provider)

Create a layout file that wraps your slides with the SlideDeck provider:
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}>{children}</SlideDeck>;
}
SlideDeck is a client component, so your layout can stay a server component — no "use client" needed.
4

Add the index route

Create a page that redirects to the first slide:
app/slides/page.tsx
import { redirect } from 'next/navigation';

export default function SlidesPage() {
  redirect('/slides/1');
}
This ensures /slides automatically redirects to /slides/1.
5

Add the dynamic slide route

Create a dynamic route to render individual slides:
app/slides/[page]/page.tsx
import { getSlide, generateSlideParams } from 'nextjs-slides';
import { slides } from '../slides';

export const generateStaticParams = () => generateSlideParams(slides);

export default async function SlidePage({
  params,
}: {
  params: Promise<{ page: string }>;
}) {
  return getSlide(await params, slides);
}
generateSlideParams() generates static params for all slides (1, 2, 3, etc.), and getSlide() renders the correct slide based on the URL parameter.
6

Start your development server

Run your Next.js development server:
npm run dev
Navigate to http://localhost:3000/slides and you’ll see your slide deck!

​
Try It Out

Your slide deck is now ready! Here’s what you can do:
  • Navigate with keyboard: Press → or Space to go to the next slide, ← to go back
  • URL-based routing: Each slide has its own URL (e.g., /slides/1, /slides/2)
  • Progress indicators: See the dot progress indicator and slide counter at the bottom

​
Folder Structure

Here’s the complete folder structure for your slide deck: 
app/
├── globals.css              # Imports tailwindcss and nextjs-slides/styles.css
└── slides/
    ├── layout.tsx           # SlideDeck provider
    ├── page.tsx             # Redirects to /slides/1
    ├── slides.tsx           # Your slides array
    └── [page]/
        └── page.tsx         # Dynamic route for each slide

​
Next Steps

Components

Explore all available components for building slides

SlideDeck API

Customize your slide deck with props and configuration

Keyboard Navigation

Learn about keyboard shortcuts and navigation

Speaker Notes

Add speaker notes and sync them to your phone

​
Add More Slides

To add more slides, simply add more elements to the slides array:
app/slides/slides.tsx
import {
  Slide,
  SlideTitle,
  SlideSubtitle,
  SlideBadge,
  SlideCode,
  SlideList,
  SlideListItem,
} from 'nextjs-slides';

export const slides = [
  <Slide key="intro">
    <SlideBadge>Welcome</SlideBadge>
    <SlideTitle>My Presentation</SlideTitle>
    <SlideSubtitle>Built with nextjs-slides</SlideSubtitle>
  </Slide>,

  <Slide key="features" align="left">
    <SlideTitle>Key Features</SlideTitle>
    <SlideList>
      <SlideListItem>URL-based routing</SlideListItem>
      <SlideListItem>Keyboard navigation</SlideListItem>
      <SlideListItem>Syntax highlighting</SlideListItem>
      <SlideListItem>Speaker notes</SlideListItem>
    </SlideList>
  </Slide>,

  <Slide key="code" align="left">
    <SlideTitle>Code Example</SlideTitle>
    <SlideCode title="hello.ts">{`const greeting = "Hello, world!";
console.log(greeting);`}</SlideCode>
  </Slide>,
];
Each slide needs a unique key prop. Use descriptive keys like "intro", "features", or "code" to make your code more readable.

​
Customization

You can customize your slide deck with additional props:
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}
      basePath="/slides"
      exitUrl="/"
      showProgress={true}
      showCounter={true}
    >
      {children}
    </SlideDeck>
  );
}
  • basePath — URL prefix for slide routes (default: "/slides")
  • exitUrl — URL for the exit button (×) in the top-right corner
  • showProgress — Show dot progress indicator (default: true)
  • showCounter — Show slide counter like “3 / 10” (default: true)

​
Learn More

View Full Documentation

Explore all components, features, and configuration options

Build docs developers (and LLMs) love

Get started for freeTalk to us