Skip to main content

​
Prerequisites

Before installing nextjs-slides, ensure your project meets these requirements:
  • Next.js >= 15.0.0
  • React >= 19.0.0
  • React DOM >= 19.0.0
  • Tailwind CSS >= 4.0.0
This library requires React 19 for ViewTransitions and Tailwind CSS v4 for the @source directive that enables automatic utility class scanning.

​
Install the Package

Install nextjs-slides using your preferred package manager: 
npm install nextjs-slides

​
Peer Dependencies

If you don’t already have the peer dependencies installed, add them to your project: 
npm install next@latest react@latest react-dom@latest tailwindcss@latest
The package also includes clsx, tailwind-merge, and highlight.js as direct dependencies, so you don’t need to install them separately.

​
Import the Stylesheet

Add the nextjs-slides stylesheet to your root layout or global CSS file. This must come after the Tailwind CSS import:
globals.css
@import 'tailwindcss';
@import 'nextjs-slides/styles.css';
The stylesheet includes an @source directive that tells Tailwind v4 to scan the library’s component files for utility classes — no extra configuration needed!

​
What’s Included

The nextjs-slides/styles.css file provides:
  • Syntax highlighting theme — CSS variables for code blocks (--nxs-code-* and --sh-*)
  • Slide transition animations — ::view-transition-* animations for smooth slide changes
  • Tailwind source directive — Automatic utility class scanning for the library

​
Verify Installation

To verify everything is set up correctly, check that:
  1. The stylesheet is imported in your global CSS after Tailwind
  2. Your project is using Next.js 15+, React 19+, and Tailwind CSS 4+
  3. You can import components from the package:
import { Slide, SlideTitle, SlideDeck } from 'nextjs-slides';

​
Optional: Geist Fonts

For the best visual experience, you can optionally install the Geist font family: 
npm install geist
Then configure the fonts in your root layout:
app/layout.tsx
import { GeistSans } from 'geist/font/sans';
import { GeistMono } from 'geist/font/mono';
import { GeistPixelSquare } from 'geist/font/pixel';

export default function RootLayout({ children }) {
  return (
    <html
      lang="en"
      className={`${GeistSans.variable} ${GeistMono.variable} ${GeistPixelSquare.variable}`}
    >
      <body className={GeistSans.className}>{children}</body>
    </html>
  );
}
And add the font variables to your global CSS:
globals.css
@theme inline {
  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
  --font-pixel:
    var(--font-geist-pixel-square), var(--font-geist-sans), ui-sans-serif,
    system-ui, sans-serif;
}
Use className="font-pixel" on any primitive where you want the pixel display font.

​
Troubleshooting

Make sure nextjs-slides/styles.css is imported after tailwindcss in your global CSS. If styles still don’t apply, you can manually add the source directive:
globals.css
@source "../node_modules/nextjs-slides/dist";
Adjust the path to be relative to your CSS file location.
Ensure you’ve imported nextjs-slides/styles.css in your root layout or global CSS. The --sh-* variables must be in scope for highlight.js tokens to display correctly.
Import the stylesheet without a layer:
@import "nextjs-slides/styles.css";
Not:
@import "nextjs-slides/styles.css" layer(base);
Layered imports can be overridden by Tailwind utilities.

​
Next Steps

Now that nextjs-slides is installed, you’re ready to create your first slide deck:

Quick Start

Follow the step-by-step guide to build your first presentation

Build docs developers (and LLMs) love

Get started for freeTalk to us