Skip to main content
This guide shows you how to create a complete basic presentation using nextjs-slides primitives.

​
Minimal Slide Deck

Here’s the simplest possible slide deck:
slides.tsx
import {
  Slide,
  SlideTitle,
  SlideSubtitle,
  SlideBadge,
} from 'nextjs-slides';

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

​
Title Slide with Speaker

Start your presentation with a professional title slide including speaker information:
slides.tsx
import {
  Slide,
  SlideHeaderBadge,
  SlideTitle,
  SlideSubtitle,
  SlideSpeaker,
  SlideSpeakerGrid,
} from 'nextjs-slides';

export const slides = [
  // Title slide
  <Slide key="title" align="left">
    <SlideHeaderBadge>nextjs-slides</SlideHeaderBadge>
    <SlideTitle>Composable Slide Primitives</SlideTitle>
    <SlideSubtitle>Build presentations with React components</SlideSubtitle>
    <SlideSpeakerGrid>
      <SlideSpeaker name="Your Name" title="Your Title" />
    </SlideSpeakerGrid>
  </Slide>,
];
Use align="left" for left-aligned content. The default is "center".

​
Content Slide with Badge

Add content slides with badges for section labels:
slides.tsx
<Slide key="slide-component">
  <SlideBadge>Slide</SlideBadge>
  <SlideTitle className="text-3xl sm:text-4xl md:text-5xl">
    The base container
  </SlideTitle>
  <SlideSubtitle>
    Full-viewport layout with vertical centering, responsive padding, and a
    decorative border frame
  </SlideSubtitle>
  <SlideNote>
    Props: align ("center" or "left"), className · This slide uses center
    alignment (default)
  </SlideNote>
</Slide>

​
Bullet List Slide

Create slides with bullet points using SlideList and SlideListItem:
slides.tsx
<Slide key="list" align="left">
  <SlideBadge>SlideList</SlideBadge>
  <SlideTitle className="text-3xl sm:text-4xl md:text-5xl">
    Bullet lists
  </SlideTitle>
  <SlideSubtitle>
    SlideList wraps SlideListItem children with consistent spacing and bullet
    dots
  </SlideSubtitle>
  <SlideList>
    <SlideListItem>Each item renders a dot and responsive text</SlideListItem>
    <SlideListItem>Supports any React content as children</SlideListItem>
    <SlideListItem>
      Override styling with className on either component
    </SlideListItem>
  </SlideList>
</Slide>

​
Typography Showcase

Demonstrate all typography primitives:
slides.tsx
<Slide key="typography" align="left">
  <SlideBadge>Typography</SlideBadge>
  <SlideTitle className="text-3xl sm:text-4xl md:text-5xl">
    Typography primitives
  </SlideTitle>
  <SlideSubtitle>
    SlideSubtitle: muted secondary text, responsive lg to 2xl
  </SlideSubtitle>
  <SlideHeaderBadge>
    SlideHeaderBadge: italic accent for event names or series labels
  </SlideHeaderBadge>
  <SlideNote>
    SlideNote: small faded footnote for annotations and caveats
  </SlideNote>
</Slide>

​
Multiple Speakers

Use SlideSpeakerGrid for side-by-side speaker cards:
<Slide key="speakers">
  <SlideBadge>Speakers</SlideBadge>
  <SlideTitle>Our Team</SlideTitle>
  <SlideSpeakerGrid>
    <SlideSpeaker name="Speaker One" title="Role / Company" />
    <SlideSpeaker name="Speaker Two" title="Role / Company" />
  </SlideSpeakerGrid>
</Slide>

​
Closing Slide

End your presentation with a call to action:
slides.tsx
<Slide key="end">
  <SlideHeaderBadge>nextjs-slides</SlideHeaderBadge>
  <SlideTitle className="font-pixel">
    That's the slide system.
  </SlideTitle>
  <SlideSubtitle>
    Compose these primitives to build any presentation
  </SlideSubtitle>
  <div className="flex items-center gap-4">
    <SlideLink href="/">Back to app →</SlideLink>
  </div>
</Slide>

​
Complete Example

Here’s a complete basic presentation:
app/slides/slides.tsx
import {
  Slide,
  SlideBadge,
  SlideHeaderBadge,
  SlideLink,
  SlideList,
  SlideListItem,
  SlideNote,
  SlideSpeaker,
  SlideSpeakerGrid,
  SlideSubtitle,
  SlideTitle,
} from 'nextjs-slides';

export const slides: React.ReactNode[] = [
  // 1. Title slide
  <Slide key="title" align="left">
    <SlideHeaderBadge>My Conference 2024</SlideHeaderBadge>
    <SlideTitle>Introduction to Web Components</SlideTitle>
    <SlideSubtitle>Building reusable UI with modern standards</SlideSubtitle>
    <SlideSpeakerGrid>
      <SlideSpeaker name="Your Name" title="Frontend Engineer" />
    </SlideSpeakerGrid>
  </Slide>,

  // 2. Content slide
  <Slide key="what-are-components">
    <SlideBadge>Introduction</SlideBadge>
    <SlideTitle>What are Web Components?</SlideTitle>
    <SlideSubtitle>
      A suite of technologies for creating reusable custom elements
    </SlideSubtitle>
  </Slide>,

  // 3. List slide
  <Slide key="features" align="left">
    <SlideBadge>Features</SlideBadge>
    <SlideTitle>Key Features</SlideTitle>
    <SlideList>
      <SlideListItem>Custom Elements - Define your own HTML tags</SlideListItem>
      <SlideListItem>Shadow DOM - Encapsulated styling and markup</SlideListItem>
      <SlideListItem>HTML Templates - Reusable markup fragments</SlideListItem>
    </SlideList>
  </Slide>,

  // 4. Closing slide
  <Slide key="end">
    <SlideHeaderBadge>Thank You</SlideHeaderBadge>
    <SlideTitle>Questions?</SlideTitle>
    <SlideSubtitle>Let's discuss web components</SlideSubtitle>
    <div className="flex items-center gap-4">
      <SlideLink href="/">Back to home →</SlideLink>
    </div>
  </Slide>,
];

​
Next Steps

Code Slides

Add syntax-highlighted code blocks to your slides

Interactive Demos

Embed live React components in your presentations

Custom Styling

Customize themes, fonts, and colors

Slide Layouts

Learn about advanced layout options

Build docs developers (and LLMs) love

Get started for freeTalk to us