Skip to main content

​
SlideTitle

Primary heading for a slide. Renders an <h1> with responsive sizing that scales from text-4xl to text-7xl across breakpoints. Override the default size with className (e.g. className="text-3xl sm:text-4xl").

​
Props

​
children
React.ReactNode
required
The heading content to display
​
className
string
Additional CSS classes to apply. Use this to override the default responsive sizing

​
Usage

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

export default function MySlide() {
  return (
    <Slide>
      <SlideTitle>Welcome to the Presentation</SlideTitle>
    </Slide>
  );
}

​
Custom Sizing

<SlideTitle className="text-3xl sm:text-4xl md:text-5xl">
  Smaller Custom Title
</SlideTitle>

​
With Other Typography Components

<Slide align="center">
  <SlideBadge>Introduction</SlideBadge>
  <SlideTitle>My Slide</SlideTitle>
  <SlideSubtitle>Supporting text</SlideSubtitle>
</Slide>

​
Styling Details

  • Default font size: text-4xl (mobile) to text-7xl (large screens)
  • Font weight: font-black
  • Letter spacing: -0.04em
  • Color: text-foreground
  • Semantic HTML: Renders as <h1> element

Build docs developers (and LLMs) love

Get started for freeTalk to us