SlideNote
Small footnote text in a faded colour, typically placed at the bottom of a slide for annotations or caveats.
Props
The note content to display
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