SlideStatementList
Container for SlideStatement items. Adds border separators between statements automatically.
Props
The SlideStatement components to display
Additional CSS classes to apply to the container
Usage
import { SlideStatementList, SlideStatement } from 'nextjs-slides';
export default function MySlide() {
return (
<Slide>
<SlideTitle>Key Features</SlideTitle>
<SlideStatementList>
<SlideStatement
title="Fast Performance"
description="Built on Next.js 15 with optimized rendering"
/>
<SlideStatement
title="Type Safe"
description="Full TypeScript support out of the box"
/>
<SlideStatement
title="Customizable"
description="Override styles with Tailwind classes"
/>
</SlideStatementList>
</Slide>
);
}
SlideStatement
Title + description pair for structured content blocks. Use inside a SlideStatementList for automatic border separators.
Props
Bold heading text for the statement
Optional muted description text below the title
Additional CSS classes to apply to the statement container
Usage
import { SlideStatement } from 'nextjs-slides';
<SlideStatement
title="Responsive Design"
description="Adapts to any screen size with mobile-first approach"
/>
Standalone Usage
import { Slide, SlideTitle, SlideStatement } from 'nextjs-slides';
export default function MySlide() {
return (
<Slide>
<SlideTitle>Single Statement</SlideTitle>
<SlideStatement
title="Important Point"
description="This statement stands alone without a list"
/>
</Slide>
);
}
Styling
The component applies automatic border separators when used inside SlideStatementList:
- Top border on each item
- Bottom border on the last item
- Responsive padding that increases on larger screens
<SlideStatementList className="max-w-3xl">
<SlideStatement
title="Custom Styled"
description="Override with Tailwind classes"
className="bg-foreground/5"
/>
</SlideStatementList>