Skip to main content

SlideNote

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

Props

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

Usage

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

export default function MySlide() {
  return (
    <Slide>
      <SlideTitle>Performance Benchmarks</SlideTitle>
      {/* ... slide content ... */}
      <SlideNote>* Results may vary based on hardware configuration</SlideNote>
    </Slide>
  );
}

Multiple Notes

<Slide align="left">
  <SlideTitle>API Limitations</SlideTitle>
  <SlideList>
    <SlideListItem>Rate limit: 1000 requests/hour</SlideListItem>
    <SlideListItem>Max payload: 10MB</SlideListItem>
  </SlideList>
  <SlideNote>Rate limits apply per API key</SlideNote>
  <SlideNote>Contact support for enterprise quotas</SlideNote>
</Slide>

Disclaimers

<Slide>
  <SlideTitle>Early Access Features</SlideTitle>
  <SlideSubtitle>Try them today</SlideSubtitle>
  {/* ... feature content ... */}
  <SlideNote>
    These features are in beta and subject to change
  </SlideNote>
</Slide>

Citation or Source

<Slide>
  <SlideTitle>Industry Statistics</SlideTitle>
  {/* ... statistics ... */}
  <SlideNote>Source: Stack Overflow Developer Survey 2025</SlideNote>
</Slide>

Styling Details

  • Font size: text-base (mobile) to text-lg (small screens and up)
  • Color: text-muted-foreground (faded appearance)
  • Semantic HTML: Renders as <p> element
  • Typically positioned at the bottom of slide content for footnotes and annotations

Build docs developers (and LLMs) love