Skip to main content
Typography components provide semantic text elements with responsive sizing and theme-aware colors. All text scales automatically across breakpoints.

​
SlideTitle

Primary heading for a slide. Renders an <h1> with responsive sizing that scales from text-4xl to text-7xl.

​
Props

​
children
React.ReactNode
required
The title text content
​
className
string
Additional CSS classes to override default sizing or styling

​
Usage

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

<Slide>
  <SlideTitle>Welcome to My Talk</SlideTitle>
</Slide>

​
Custom sizing

Override the default responsive scale: 
<SlideTitle className="text-3xl sm:text-4xl md:text-5xl">
  Smaller Title
</SlideTitle>
The default sizing is text-4xl sm:text-5xl md:text-6xl lg:text-7xl with -0.04em letter spacing and font-black weight.

​
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 text content
​
className
string
Additional CSS classes for custom styling

​
Usage

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

<Slide>
  <SlideTitle>Next.js Slides</SlideTitle>
  <SlideSubtitle>Composable primitives for presentations</SlideSubtitle>
</Slide>
Uses text-muted-foreground color for visual hierarchy. Default sizing is text-lg sm:text-xl md:text-2xl.

​
SlideBadge

Small pill-shaped label, typically placed above a title to categorize the slide (e.g., component name, topic tag).

​
Props

​
children
React.ReactNode
required
The badge text content
​
className
string
Additional CSS classes for custom styling

​
Usage

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

<Slide>
  <SlideBadge>Component Library</SlideBadge>
  <SlideTitle>Button</SlideTitle>
</Slide>

​
Multiple badges

<Slide>
  <SlideBadge>React</SlideBadge>
  <SlideTitle>Hooks Deep Dive</SlideTitle>
</Slide>
Renders as an inverted pill (bg-foreground text-background) with rounded corners, text-sm, and font-semibold.

​
SlideHeaderBadge

Italic accent text for slide headers — use for event names, series labels, or other branding above the title.

​
Props

​
children
React.ReactNode
required
The header badge text content
​
className
string
Additional CSS classes for custom styling

​
Usage

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

<Slide>
  <SlideHeaderBadge>React Conference 2024</SlideHeaderBadge>
  <SlideTitle>Building Modern UIs</SlideTitle>
</Slide>

​
For branding

<Slide>
  <SlideHeaderBadge>Tech Talk Series</SlideHeaderBadge>
  <SlideTitle>Episode 5: Performance</SlideTitle>
</Slide>
Renders in italic style with text-xl sm:text-2xl sizing and font-semibold weight.

​
SlideNote

Small footnote text in a faded color, typically placed at the bottom of a slide for annotations or caveats.

​
Props

​
children
React.ReactNode
required
The note text content
​
className
string
Additional CSS classes for custom styling

​
Usage

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

<Slide>
  <SlideTitle>Performance Metrics</SlideTitle>
  <p>Our app loads in under 1 second</p>
  <SlideNote>* Tested on desktop with fast 3G connection</SlideNote>
</Slide>

​
Multiple notes

<Slide align="left">
  <SlideTitle>API Usage</SlideTitle>
  <SlideCode title="api.ts">{`
const response = await fetch('/api/data');
  `}</SlideCode>
  <SlideNote>Requires authentication token in headers</SlideNote>
  <SlideNote>Rate limited to 100 requests/minute</SlideNote>
</Slide>
Uses text-muted-foreground with text-base sm:text-lg sizing for subtle annotations.

​
Complete Example

Combining multiple typography components: 
import {
  Slide,
  SlideHeaderBadge,
  SlideBadge,
  SlideTitle,
  SlideSubtitle,
  SlideNote
} from 'nextjs-slides';

<Slide>
  <SlideHeaderBadge>Next.js Conf 2024</SlideHeaderBadge>
  <SlideBadge>Keynote</SlideBadge>
  <SlideTitle>The Future of Web Development</SlideTitle>
  <SlideSubtitle>
    Exploring new paradigms in full-stack applications
  </SlideSubtitle>
  <SlideNote>Slides available at nextjs-conf.com</SlideNote>
</Slide>

​
Styling Patterns

​
Custom colors

Override text colors using Tailwind utilities: 
<SlideTitle className="text-blue-500">Blue Title</SlideTitle>
<SlideSubtitle className="text-gray-400">Gray subtitle</SlideSubtitle>

​
Custom fonts

Apply different font families: 
<SlideTitle className="font-pixel">Pixel Font Title</SlideTitle>
<SlideSubtitle className="font-mono">Monospace subtitle</SlideSubtitle>

​
Responsive overrides

Customize responsive behavior: 
<SlideTitle className="text-2xl sm:text-3xl md:text-4xl">
  Custom responsive sizing
</SlideTitle>

​
Responsive Behavior

All typography components scale automatically:
  • SlideTitle: text-4xl → text-5xl → text-6xl → text-7xl
  • SlideSubtitle: text-lg → text-xl → text-2xl
  • SlideHeaderBadge: text-xl → text-2xl
  • SlideNote: text-base → text-lg
  • SlideBadge: Fixed text-sm
Override any default with the className prop.

Build docs developers (and LLMs) love

Get started for freeTalk to us