Skip to main content
Structured components help you display organized information like feature lists, speaker bios, and team members.

​
SlideStatementList & SlideStatement

Title + description pairs with automatic border separators. Perfect for feature lists, definitions, or structured content.

​
SlideStatementList Props

​
children
React.ReactNode
required
Should contain SlideStatement components
​
className
string
Additional CSS classes for custom styling

​
SlideStatement Props

​
title
string
required
Bold heading text for the statement
​
description
string
Optional muted description below the title
​
className
string
Additional CSS classes for custom styling

​
Usage

import {
  Slide,
  SlideTitle,
  SlideStatementList,
  SlideStatement
} from 'nextjs-slides';

<Slide align="left">
  <SlideTitle>Core Principles</SlideTitle>
  <SlideStatementList>
    <SlideStatement
      title="Performance First"
      description="Optimized for speed with automatic code splitting"
    />
    <SlideStatement
      title="Developer Experience"
      description="Intuitive API with TypeScript support"
    />
    <SlideStatement
      title="Production Ready"
      description="Battle-tested in high-traffic applications"
    />
  </SlideStatementList>
</Slide>

​
Without descriptions

<SlideStatementList>
  <SlideStatement title="Server Components" />
  <SlideStatement title="Client Components" />
  <SlideStatement title="Server Actions" />
</SlideStatementList>
SlideStatementList automatically adds top borders to each statement and a bottom border to the last one, creating a clean separated list.

​
SlideSpeaker

Speaker card with an avatar circle, name, and role/title. When avatar is omitted, a placeholder circle is shown.

​
Props

​
name
string
required
Speaker’s name (displayed in uppercase)
​
title
string
required
Speaker’s role or title (displayed in uppercase)
​
avatar
string
Image URL or path for the speaker avatar. Falls back to placeholder when omitted.
​
className
string
Additional CSS classes for custom styling

​
Usage

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

<Slide>
  <SlideTitle>Today's Speaker</SlideTitle>
  <SlideSpeaker
    name="Jane Smith"
    title="Senior Engineer"
    avatar="/images/jane.jpg"
  />
</Slide>

​
Without avatar

<SlideSpeaker
  name="John Doe"
  title="Tech Lead"
/>
Speaker names and titles are rendered in uppercase with letter spacing (tracking-widest and tracking-wider) for a clean, professional look.

​
SlideSpeakerGrid

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

​
Props

​
children
React.ReactNode
required
Should contain SlideSpeaker components
​
className
string
Additional CSS classes for custom styling

​
Usage

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

<Slide>
  <SlideTitle>Our Team</SlideTitle>
  <SlideSpeakerGrid>
    <SlideSpeaker
      name="Alice Johnson"
      title="Product Manager"
      avatar="/images/alice.jpg"
    />
    <SlideSpeaker
      name="Bob Williams"
      title="Lead Designer"
      avatar="/images/bob.jpg"
    />
    <SlideSpeaker
      name="Carol Davis"
      title="Frontend Engineer"
      avatar="/images/carol.jpg"
    />
    <SlideSpeaker
      name="David Chen"
      title="Backend Engineer"
      avatar="/images/david.jpg"
    />
  </SlideSpeakerGrid>
</Slide>

​
SlideSpeakerList

Vertical stack layout for SlideSpeaker cards. Use when you want speakers in a single column.

​
Props

​
children
React.ReactNode
required
Should contain SlideSpeaker components
​
className
string
Additional CSS classes for custom styling

​
Usage

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

<Slide align="left">
  <SlideTitle>Panelists</SlideTitle>
  <SlideSpeakerList>
    <SlideSpeaker
      name="Emma Wilson"
      title="CTO at TechCorp"
      avatar="/images/emma.jpg"
    />
    <SlideSpeaker
      name="Michael Brown"
      title="VP Engineering at StartupXYZ"
      avatar="/images/michael.jpg"
    />
    <SlideSpeaker
      name="Sarah Martinez"
      title="Principal Architect at BigCo"
      avatar="/images/sarah.jpg"
    />
  </SlideSpeakerList>
</Slide>

​
Complete Examples

​
Feature showcase with statements

import {
  SlideSplitLayout,
  SlideTitle,
  SlideSubtitle,
  SlideStatementList,
  SlideStatement
} from 'nextjs-slides';

<SlideSplitLayout
  left={
    <>
      <SlideTitle>Why Choose Us</SlideTitle>
      <SlideSubtitle>Built for modern workflows</SlideSubtitle>
    </>
  }
  right={
    <SlideStatementList>
      <SlideStatement
        title="Lightning Fast"
        description="Sub-second page loads with edge caching"
      />
      <SlideStatement
        title="Type Safe"
        description="End-to-end TypeScript for fewer bugs"
      />
      <SlideStatement
        title="Scalable"
        description="Handles millions of requests per day"
      />
    </SlideStatementList>
  }
/>

​
Team introduction

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

<Slide>
  <SlideBadge>Meet the Team</SlideBadge>
  <SlideTitle>Core Contributors</SlideTitle>
  <SlideSpeakerGrid>
    <SlideSpeaker
      name="Taylor Swift"
      title="Engineering Lead"
      avatar="/team/taylor.jpg"
    />
    <SlideSpeaker
      name="Morgan Freeman"
      title="Design Lead"
      avatar="/team/morgan.jpg"
    />
  </SlideSpeakerGrid>
</Slide>

​
Mixed content slide

import {
  Slide,
  SlideTitle,
  SlideSubtitle,
  SlideStatementList,
  SlideStatement,
  SlideNote
} from 'nextjs-slides';

<Slide align="left">
  <SlideTitle>API Endpoints</SlideTitle>
  <SlideSubtitle>Available resources</SlideSubtitle>
  <SlideStatementList>
    <SlideStatement
      title="GET /api/users"
      description="Fetch all users with pagination"
    />
    <SlideStatement
      title="POST /api/users"
      description="Create a new user account"
    />
    <SlideStatement
      title="DELETE /api/users/:id"
      description="Remove a user by ID"
    />
  </SlideStatementList>
  <SlideNote>All endpoints require authentication</SlideNote>
</Slide>

​
Responsive Behavior

  • SlideStatement: Uses responsive padding px-8 sm:px-12 md:px-16 and text sizing text-lg sm:text-xl md:text-2xl for titles
  • SlideSpeaker: Avatar size is fixed at h-12 w-12, text uses text-sm for consistency
  • SlideSpeakerGrid: Uses grid-cols-1 sm:grid-cols-2 to stack on mobile and display side-by-side on larger screens
  • SlideSpeakerList: Always uses vertical layout with gap-6

​
Styling Tips

​
Custom statement colors

<SlideStatement
  title="Important Feature"
  description="This is highlighted"
  className="bg-blue-50 border-blue-200"
/>

​
Compact speaker cards

<SlideSpeakerList className="gap-3">
  <SlideSpeaker name="Alex" title="Developer" />
  <SlideSpeaker name="Blake" title="Designer" />
</SlideSpeakerList>

​
Statement list without borders

<SlideStatementList className="[&>*]:border-0">
  <SlideStatement title="Item 1" />
  <SlideStatement title="Item 2" />
</SlideStatementList>

Build docs developers (and LLMs) love

Get started for freeTalk to us