Overview
The Slide component is the primary slide primitive. Use it as a top-level element in your slides array. It provides a full-viewport container with centered content and a decorative border.
For a two-column layout that fills the whole viewport, use SlideSplitLayout instead.
Props
The content to display inside the slide.
align
SlideAlign
default:"center"
Content alignment. "center" centers both horizontally and text; "left" aligns to the start.Possible values: "center" | "left"
Optional CSS classes to customize the slide styling.
Usage Examples
Basic Slide with Center Alignment
import { Slide, SlideTitle, SlideSubtitle } from 'nextjs-slides';
export default function MySlide() {
return (
<Slide align="center">
<SlideTitle>Welcome</SlideTitle>
<SlideSubtitle>A brief introduction</SlideSubtitle>
</Slide>
);
}
Left-Aligned Slide
import { Slide, SlideTitle, SlideList, SlideListItem } from 'nextjs-slides';
export default function MySlide() {
return (
<Slide align="left">
<SlideTitle>Key Features</SlideTitle>
<SlideList>
<SlideListItem>Fast and lightweight</SlideListItem>
<SlideListItem>Built with React 19</SlideListItem>
<SlideListItem>Fully customizable</SlideListItem>
</SlideList>
</Slide>
);
}
Custom Styling
import { Slide, SlideTitle } from 'nextjs-slides';
export default function MySlide() {
return (
<Slide className="bg-gradient-to-br from-purple-500 to-pink-500">
<SlideTitle className="text-white">Custom Background</SlideTitle>
</Slide>
);
}
Source Location
src/primitives.tsx:37