nextjs-slides
Build full presentations from React components with URL-based routing, keyboard navigation, progress indicators, and smooth slide transitions — all declarative.Quick Start
Get started in minutes with a step-by-step guide to creating your first slide deck
Installation
Install the package and configure your Next.js project
Key Features
React 19 ViewTransitions
Smooth slide transitions powered by the React 19 ViewTransition component with addTransitionType()
Tailwind CSS v4
Fully styled with Tailwind utilities, inherits your app’s theme via CSS variables
Syntax Highlighting
Beautiful code blocks with highlight.js supporting JavaScript, TypeScript, and HTML
Keyboard Navigation
Navigate with arrow keys and spacebar, with smart input detection
Speaker Notes
Markdown-based speaker notes with phone sync for presenting
URL-based Routing
Each slide is a route — shareable, bookmarkable, and SEO-friendly
What You Can Build
- Technical presentations with syntax-highlighted code examples
- Product demos with interactive components and breakout pages
- Conference talks with speaker notes synced to your phone
- Educational content with step-by-step walkthroughs
- Multiple slide decks with different themes and fonts
Architecture
nextjs-slides provides composable primitives that work with Next.js App Router:<SlideDeck>— The provider component that manages navigation, keyboard events, and progress- Layout primitives —
<Slide>,<SlideColumns>,<SlideSplitLayout>for structuring content - Typography primitives —
<SlideTitle>,<SlideSubtitle>,<SlideBadge>, and more - Content primitives —
<SlideCode>,<SlideList>,<SlideDemo>for rich content - Navigation helpers —
getSlide(),generateSlideParams()for Next.js routing
This library inherits your app’s theme through CSS variables (
--foreground, --background, --primary, etc.), making it compatible with shadcn/ui and any Tailwind v4 setup.Live Demo
Check out the live demo to see nextjs-slides in action: View Live Demo → The demo showcases:- Two complete slide decks with different themes (Geist and Playfair Display)
- All available primitives and components
- Speaker notes with phone sync
- Interactive breakout pages
- Custom syntax highlighting themes
Next Steps
Installation
Install nextjs-slides and configure peer dependencies
Quick Start
Create your first slide deck in minutes