Skip to main content

​
SlideSubtitle

Secondary text below a title. Renders a <p> in a muted foreground color with responsive sizing (text-lg to text-2xl).

​
Props

​
children
React.ReactNode
required
The subtitle content to display
​
className
string
Additional CSS classes to apply

​
Usage

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

export default function MySlide() {
  return (
    <Slide>
      <SlideTitle>Building with React</SlideTitle>
      <SlideSubtitle>Modern patterns and best practices</SlideSubtitle>
    </Slide>
  );
}

​
Multiple Subtitles

<Slide align="left">
  <SlideTitle>API Design</SlideTitle>
  <SlideSubtitle>RESTful endpoints and GraphQL</SlideSubtitle>
  <SlideSubtitle className="mt-2">Performance considerations</SlideSubtitle>
</Slide>

​
With Badge and Title

<Slide align="center">
  <SlideBadge>Chapter 1</SlideBadge>
  <SlideTitle>Getting Started</SlideTitle>
  <SlideSubtitle>Everything you need to know</SlideSubtitle>
</Slide>

​
Styling Details

  • Default font size: text-lg (mobile) to text-2xl (large screens)
  • Color: text-muted-foreground
  • Semantic HTML: Renders as <p> element
  • Inherits text alignment from parent Slide component

Build docs developers (and LLMs) love

Get started for freeTalk to us