Content components help you display code, structured lists, and interactive demonstrations in your slides.
SlideCode
Syntax-highlighted code block powered by highlight.js. Automatically detects language from the file extension in the title prop.
Props
Code string to highlight. Leading/trailing whitespace is trimmed automatically.
File name shown above the code block. Its extension determines the highlight language.
Additional CSS classes for custom styling
Supported Languages
- JavaScript:
.js, .jsx
- TypeScript:
.ts, .tsx (default fallback)
- HTML/XML:
.html, .xml
Unrecognized extensions fall back to TypeScript highlighting.
Usage
import { Slide, SlideTitle, SlideCode } from 'nextjs-slides';
<Slide align="left">
<SlideTitle>API Example</SlideTitle>
<SlideCode title="api.ts">{`
export async function fetchData() {
const response = await fetch('/api/data');
return response.json();
}
`}</SlideCode>
</Slide>
JSX/TSX code
<SlideCode title="Component.tsx">{`
import { useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
`}</SlideCode>
Without title
<SlideCode>{`
const greeting = "Hello, world!";
console.log(greeting);
`}</SlideCode>
Theme colors are controlled by CSS custom properties (--sh-* / --nxs-code-*) defined in nextjs-slides/styles.css. Override them in :root or .dark.
Custom Syntax Theme
Override the default syntax highlighting colors:
:root {
/* Code block container */
--nxs-code-bg: #1e1e1e;
--nxs-code-border: #333;
--nxs-code-text: #d4d4d4;
/* Syntax tokens */
--sh-keyword: #569cd6; /* const, function, import */
--sh-string: #ce9178; /* String literals */
--sh-property: #9cdcfe; /* Object properties */
--sh-entity: #4ec9b0; /* Types, interfaces */
--sh-class: #4ec9b0; /* Class names */
--sh-tag: #569cd6; /* JSX/HTML tags */
--sh-identifier: #dcdcaa; /* Function names */
--sh-literal: #b5cea8; /* Numbers, booleans */
--sh-comment: #6a9955; /* Comments */
--sh-sign: #d4d4d4; /* Punctuation */
}
SlideList & SlideListItem
Bullet-point list components for structured content.
SlideList Props
Should contain SlideListItem components
Additional CSS classes for custom styling
SlideListItem Props
Additional CSS classes for custom styling
Usage
import { Slide, SlideTitle, SlideList, SlideListItem } from 'nextjs-slides';
<Slide align="left">
<SlideTitle>Key Features</SlideTitle>
<SlideList>
<SlideListItem>Server-side rendering</SlideListItem>
<SlideListItem>Static site generation</SlideListItem>
<SlideListItem>API routes</SlideListItem>
<SlideListItem>Built-in optimization</SlideListItem>
</SlideList>
</Slide>
Nested content
<SlideList>
<SlideListItem>
<strong>Fast:</strong> Optimized for performance
</SlideListItem>
<SlideListItem>
<strong>Type-safe:</strong> Written in TypeScript
</SlideListItem>
<SlideListItem>
<strong>Flexible:</strong> Composable primitives
</SlideListItem>
</SlideList>
Each list item renders a small dot bullet (h-1.5 w-1.5 rounded-full) with text-foreground/40 color. Items use text-lg sm:text-xl sizing.
SlideDemo
Live interactive component embed. Keyboard navigation (arrow keys, space) is disabled while focus is inside the demo area.
Props
The interactive component to render
Optional uppercase label shown above the demo area
Additional CSS classes for custom styling
Usage
import { Slide, SlideTitle, SlideDemo } from 'nextjs-slides';
import { Counter } from './components/Counter';
<Slide align="left">
<SlideTitle>Live Demo</SlideTitle>
<SlideDemo label="Interactive Counter">
<Counter />
</SlideDemo>
</Slide>
Multiple demos
<Slide align="left">
<SlideTitle>Component Showcase</SlideTitle>
<SlideDemo label="Button Variants">
<ButtonDemo />
</SlideDemo>
<SlideDemo label="Form Example">
<FormDemo />
</SlideDemo>
</Slide>
Without label
<SlideDemo>
<InteractiveChart data={chartData} />
</SlideDemo>
Keyboard navigation is automatically disabled inside SlideDemo areas (marked with data-slide-interactive) so users can interact with inputs, buttons, and other controls without triggering slide navigation.
Complete Example
Combining code and interactive demos:
import {
Slide,
SlideColumns,
SlideTitle,
SlideCode,
SlideDemo
} from 'nextjs-slides';
import { Counter } from './components/Counter';
<Slide align="left">
<SlideTitle>useState Hook</SlideTitle>
<SlideColumns
left={
<SlideCode title="Counter.tsx">{`
import { useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
`}</SlideCode>
}
right={
<SlideDemo label="Live Demo">
<Counter />
</SlideDemo>
}
/>
</Slide>
Lists with Code
<Slide align="left">
<SlideTitle>Installation Steps</SlideTitle>
<SlideList>
<SlideListItem>
Install the package:
<SlideCode>{`npm install nextjs-slides`}</SlideCode>
</SlideListItem>
<SlideListItem>
Import the styles:
<SlideCode>{`@import 'nextjs-slides/styles.css';`}</SlideCode>
</SlideListItem>
<SlideListItem>
Start using components in your slides
</SlideListItem>
</SlideList>
</Slide>
Styling Tips
Code block width
Control code block sizing:
<SlideCode className="max-w-2xl">{`...`}</SlideCode>
Custom list styling
<SlideList className="gap-6">
<SlideListItem className="text-xl">Larger text</SlideListItem>
<SlideListItem className="text-blue-500">Blue item</SlideListItem>
</SlideList>
Demo container styling
<SlideDemo className="max-w-md" label="Compact Demo">
<SmallComponent />
</SlideDemo>