Skip to main content

​
SlideSpeaker

Speaker card with an avatar circle, name, and role/title. When avatar is omitted, a placeholder circle is shown. Use inside SlideSpeakerGrid or SlideSpeakerList to lay out multiple speakers.

​
Props

​
name
string
required
The speaker’s name (displayed in uppercase)
​
title
string
required
The speaker’s role or title (displayed in uppercase, muted color)
​
avatar
string
Image URL or path for the speaker avatar. Falls back to placeholder when omitted
​
className
string
Additional CSS classes to apply to the speaker card

​
Usage

import { SlideSpeaker } from 'nextjs-slides';

<SlideSpeaker
  name="Alex Johnson"
  title="Senior Developer"
  avatar="/avatars/alex.jpg"
/>

​
Without Avatar

<SlideSpeaker
  name="Jordan Smith"
  title="Product Designer"
/>

​
SlideSpeakerGrid

Two-column responsive grid for laying out SlideSpeaker cards side by side (stacks to one column on small screens).

​
Props

​
children
React.ReactNode
required
The SlideSpeaker components to display in a grid
​
className
string
Additional CSS classes to apply to the grid container

​
Usage

import { Slide, SlideTitle, SlideSpeakerGrid, SlideSpeaker } from 'nextjs-slides';

export default function SpeakersSlide() {
  return (
    <Slide>
      <SlideTitle>Our Team</SlideTitle>
      <SlideSpeakerGrid>
        <SlideSpeaker
          name="Alex Johnson"
          title="Senior Developer"
          avatar="/avatars/alex.jpg"
        />
        <SlideSpeaker
          name="Jordan Smith"
          title="Product Designer"
          avatar="/avatars/jordan.jpg"
        />
        <SlideSpeaker
          name="Taylor Lee"
          title="Engineering Manager"
          avatar="/avatars/taylor.jpg"
        />
        <SlideSpeaker
          name="Morgan Davis"
          title="UX Researcher"
          avatar="/avatars/morgan.jpg"
        />
      </SlideSpeakerGrid>
    </Slide>
  );
}

​
Responsive Behavior

  • Small screens: Single column layout
  • Medium screens and up: Two-column grid

​
SlideSpeakerList

Vertical stack layout for SlideSpeaker cards.

​
Props

​
children
React.ReactNode
required
The SlideSpeaker components to display in a vertical list
​
className
string
Additional CSS classes to apply to the list container

​
Usage

import { Slide, SlideTitle, SlideSpeakerList, SlideSpeaker } from 'nextjs-slides';

export default function KeynoteSpeaker() {
  return (
    <Slide>
      <SlideTitle>Keynote Speaker</SlideTitle>
      <SlideSpeakerList>
        <SlideSpeaker
          name="Dr. Sarah Chen"
          title="Chief Technology Officer"
          avatar="/avatars/sarah.jpg"
        />
      </SlideSpeakerList>
    </Slide>
  );
}

​
Multiple Speakers in List

<SlideSpeakerList>
  <SlideSpeaker
    name="Alex Johnson"
    title="Senior Developer"
    avatar="/avatars/alex.jpg"
  />
  <SlideSpeaker
    name="Jordan Smith"
    title="Product Designer"
    avatar="/avatars/jordan.jpg"
  />
  <SlideSpeaker
    name="Taylor Lee"
    title="Engineering Manager"
    avatar="/avatars/taylor.jpg"
  />
</SlideSpeakerList>

​
Grid vs List

Choose the appropriate layout component based on your needs:
  • SlideSpeakerGrid: Use when displaying multiple speakers of equal importance (e.g., team members, panelists)
  • SlideSpeakerList: Use when displaying a single keynote speaker or when you want a vertical stacked layout

Build docs developers (and LLMs) love

Get started for freeTalk to us