Skip to main content
nextjs-slides provides a complete set of React components for building beautiful presentation decks. All components are designed to work together seamlessly and inherit your app’s theme through Tailwind CSS variables.

​
Component Categories

Layout Components

Full-screen containers and column layouts for structuring your slides

Typography

Titles, subtitles, badges, and notes for text content

Content Components

Code blocks, lists, and interactive demos

Structured Components

Statement lists and speaker cards for organized information

Navigation

Links for navigating between slides and external pages

​
Design Philosophy

All components follow these principles:
  • Theme inheritance — Components use CSS variables (--foreground, --background, etc.) compatible with shadcn/ui and Tailwind v4
  • Responsive by default — Text scales across breakpoints, layouts adapt to screen size
  • Composable — Mix and match primitives to build custom slide designs
  • Accessible — Semantic HTML with proper ARIA attributes

​
Basic Usage

Import components from nextjs-slides: 
import {
  Slide,
  SlideTitle,
  SlideSubtitle,
  SlideCode,
  SlideList,
  SlideListItem
} from 'nextjs-slides';

export const slides = [
  <Slide key="intro">
    <SlideTitle>Hello World</SlideTitle>
    <SlideSubtitle>A simple slide</SlideSubtitle>
  </Slide>,
  
  <Slide key="features" align="left">
    <SlideTitle>Features</SlideTitle>
    <SlideList>
      <SlideListItem>Keyboard navigation</SlideListItem>
      <SlideListItem>Syntax highlighting</SlideListItem>
      <SlideListItem>View transitions</SlideListItem>
    </SlideList>
  </Slide>
];

​
Styling

All components accept a className prop for custom styling. Override the responsive defaults when needed: 
<SlideTitle className="text-3xl sm:text-4xl">
  Custom sized title
</SlideTitle>
The library’s CSS custom properties can be overridden in your global styles: 
:root {
  --nxs-code-bg: #1e1e1e;
  --sh-keyword: #569cd6;
  --sh-string: #ce9178;
}

​
Next Steps

Explore each component category to learn about props, usage patterns, and examples:

Build docs developers (and LLMs) love

Get started for freeTalk to us