Overview
The SlideSplitLayout component creates a full-viewport two-column slide. This is a top-level alternative to Slide.
Important: Do not nest this inside Slide; it renders its own full-viewport container, border, and padding. To combine a title with two columns, use SlideColumns inside a Slide instead.
Props
Content to display in the left column.
Content to display in the right column.
Optional CSS classes to customize the split layout container.
Usage Examples
Basic Split Layout
import { SlideSplitLayout, SlideTitle, SlideSubtitle } from 'nextjs-slides';
export default function MySlide() {
return (
<SlideSplitLayout
left={
<div>
<SlideTitle>Left Side</SlideTitle>
<SlideSubtitle>Primary content goes here</SlideSubtitle>
</div>
}
right={
<div>
<SlideTitle>Right Side</SlideTitle>
<SlideSubtitle>Supporting content here</SlideSubtitle>
</div>
}
/>
);
}
Content and Code Side-by-Side
import {
SlideSplitLayout,
SlideTitle,
SlideList,
SlideListItem,
SlideCode,
} from 'nextjs-slides';
export default function MySlide() {
return (
<SlideSplitLayout
left={
<div>
<SlideTitle>API Features</SlideTitle>
<SlideList>
<SlideListItem>Type-safe routes</SlideListItem>
<SlideListItem>Auto-generated docs</SlideListItem>
<SlideListItem>Built-in validation</SlideListItem>
</SlideList>
</div>
}
right={
<SlideCode title="example.ts">{`
import { createAPI } from './api';
const api = createAPI({
routes: ['/users', '/posts'],
validate: true,
});
export default api;
`}</SlideCode>
}
/>
);
}
Demo and Description
import {
SlideSplitLayout,
SlideTitle,
SlideSubtitle,
SlideDemo,
} from 'nextjs-slides';
import { InteractiveCounter } from './components/Counter';
export default function MySlide() {
return (
<SlideSplitLayout
left={
<div>
<SlideTitle>Interactive Demo</SlideTitle>
<SlideSubtitle>
Try clicking the buttons to see the counter in action.
</SlideSubtitle>
<SlideSubtitle>
The demo area disables keyboard navigation so you can interact
with the component freely.
</SlideSubtitle>
</div>
}
right={
<SlideDemo label="Live Counter">
<InteractiveCounter />
</SlideDemo>
}
/>
);
}
Custom Styling
import { SlideSplitLayout, SlideTitle } from 'nextjs-slides';
export default function MySlide() {
return (
<SlideSplitLayout
className="bg-slate-900"
left={
<div className="text-cyan-400">
<SlideTitle>Themed Left</SlideTitle>
</div>
}
right={
<div className="text-pink-400">
<SlideTitle>Themed Right</SlideTitle>
</div>
}
/>
);
}
Visual Structure
The component creates a layout with:
- Full viewport dimensions (
h-dvh w-dvw)
- Decorative border around the entire slide
- Vertical divider line between columns
- Each column takes 50% width
- Content is vertically centered in each column
Source Location
src/primitives.tsx:103