Layout components provide the foundation for your slides. Use Slide as the primary container, or choose SlideSplitLayout for a full-viewport two-column design.
Slide
The primary slide container with centered content and a decorative border. This is the main primitive you’ll use for most slides.
Props
The content to display inside the slide
align
'center' | 'left'
default:"center"
Content alignment. "center" centers both horizontally and text; "left" aligns to the start.
Additional CSS classes for custom styling
Usage
import { Slide, SlideTitle, SlideSubtitle } from 'nextjs-slides';
<Slide align="center">
<SlideTitle>Welcome</SlideTitle>
<SlideSubtitle>Let's get started</SlideSubtitle>
</Slide>
Left-aligned content
<Slide align="left">
<SlideTitle>Technical Overview</SlideTitle>
<p>This slide uses left alignment for better readability of longer content.</p>
</Slide>
Slide renders a full-viewport container (h-dvh w-dvw) with responsive padding. Content is constrained to max-w-4xl for optimal readability.
SlideColumns
Inline two-column grid for use inside a Slide. Use this when you need a title or other content above two columns.
Props
Content for the left column
Content for the right column
Additional CSS classes for custom styling
Usage
import { Slide, SlideTitle, SlideColumns, SlideCode } from 'nextjs-slides';
<Slide align="left">
<SlideTitle>Before & After</SlideTitle>
<SlideColumns
left={
<SlideCode title="before.ts">{`
const data = await fetch('/api');
const json = await data.json();
`}</SlideCode>
}
right={
<SlideCode title="after.ts">{`
const json = await fetch('/api')
.then(r => r.json());
`}</SlideCode>
}
/>
</Slide>
Use SlideColumns inside Slide for content below a title. For a full-viewport split, use SlideSplitLayout instead.
SlideSplitLayout
Full-viewport two-column slide with a vertical divider — a top-level alternative to Slide.
Props
Content for the left half of the slide
Content for the right half of the slide
Additional CSS classes for custom styling
Usage
import {
SlideSplitLayout,
SlideTitle,
SlideSubtitle,
SlideList,
SlideListItem
} from 'nextjs-slides';
<SlideSplitLayout
left={
<>
<SlideTitle>Features</SlideTitle>
<SlideSubtitle>What makes it great</SlideSubtitle>
</>
}
right={
<SlideList>
<SlideListItem>Fast performance</SlideListItem>
<SlideListItem>Type-safe</SlideListItem>
<SlideListItem>Easy to use</SlideListItem>
</SlideList>
}
/>
Do not nest SlideSplitLayout inside Slide. It renders its own h-dvh w-dvw container and decorative border. Use it as a top-level slide element in your slides array.
Layout Patterns
Single column with centered content
The default pattern for most slides:
<Slide align="center">
<SlideBadge>Introduction</SlideBadge>
<SlideTitle>My Presentation</SlideTitle>
<SlideSubtitle>Built with nextjs-slides</SlideSubtitle>
</Slide>
Left-aligned with code
Better for technical content:
<Slide align="left">
<SlideTitle>Implementation</SlideTitle>
<SlideCode title="example.tsx">{`
export function Component() {
return <div>Hello</div>;
}
`}</SlideCode>
</Slide>
Title with two columns
Use SlideColumns inside Slide:
<Slide align="left">
<SlideTitle>Comparison</SlideTitle>
<SlideColumns
left={<p>Option A: Traditional approach</p>}
right={<p>Option B: Modern approach</p>}
/>
</Slide>
Full split layout
Use SlideSplitLayout as a standalone slide:
<SlideSplitLayout
left={<SlideTitle>Overview</SlideTitle>}
right={<SlideCode>...</SlideCode>}
/>
Responsive Behavior
Slide uses responsive padding: px-12 sm:px-24 md:px-32 lg:px-40SlideSplitLayout uses equal w-1/2 columns with responsive paddingSlideColumns uses a grid-cols-2 layout with gap-8- The decorative border uses responsive insets:
inset-4 sm:inset-6
All layouts adapt automatically to different screen sizes while maintaining visual consistency.