Skip to main content
The SlideLink component provides styled Next.js links for navigation between slides, to breakout pages, or to external URLs. Styled Next.js <Link> component for navigating within your slide deck or to external resources.

​
Props

​
href
string
required
The destination URL (can be a slide route, breakout page, or external link)
​
children
React.ReactNode
required
The link text or content
​
variant
'primary' | 'ghost'
default:"primary"
Visual style. "primary" is a solid button; "ghost" is a bordered transparent button.
​
className
string
Additional CSS classes for custom styling

​
Variants

​
Primary variant

Default solid button style: 
import { Slide, SlideTitle, SlideLink } from 'nextjs-slides';

<Slide>
  <SlideTitle>Interactive Demo</SlideTitle>
  <SlideLink href="/slides/demo1">View Demo →</SlideLink>
</Slide>

​
Ghost variant

Bordered transparent style: 
<Slide>
  <SlideTitle>Thank You</SlideTitle>
  <SlideLink href="/" variant="ghost">Exit Presentation</SlideLink>
</Slide>

​
Usage Patterns

​
Link to breakout page

Navigate to an interactive demo or detail page: 
import { Slide, SlideTitle, SlideSubtitle, SlideLink } from 'nextjs-slides';

<Slide>
  <SlideTitle>Live Component Demo</SlideTitle>
  <SlideSubtitle>See it in action</SlideSubtitle>
  <SlideLink href="/slides/demo1">Open Interactive Demo →</SlideLink>
</Slide>
Breakout pages are routes inside your slides folder but outside the [page] route. They render without deck navigation, perfect for full-page demos.
Jump directly to another slide: 
<Slide>
  <SlideTitle>Table of Contents</SlideTitle>
  <div className="flex flex-col gap-2">
    <SlideLink href="/slides/5">Chapter 1: Introduction</SlideLink>
    <SlideLink href="/slides/12">Chapter 2: Deep Dive</SlideLink>
    <SlideLink href="/slides/20">Chapter 3: Conclusion</SlideLink>
  </div>
</Slide>
Provide a way to leave the presentation: 
<Slide>
  <SlideTitle>Questions?</SlideTitle>
  <div className="flex gap-4">
    <SlideLink href="/slides/1">Restart Presentation</SlideLink>
    <SlideLink href="/" variant="ghost">Exit to Homepage</SlideLink>
  </div>
</Slide>

​
External resource

Link to documentation or external sites: 
<Slide>
  <SlideTitle>Learn More</SlideTitle>
  <SlideLink href="https://nextjs.org/docs">
    Next.js Documentation ↗
  </SlideLink>
</Slide>
Combine multiple links with different variants: 
import { Slide, SlideTitle, SlideLink } from 'nextjs-slides';

<Slide>
  <SlideTitle>Next Steps</SlideTitle>
  <div className="flex flex-col gap-3">
    <SlideLink href="/slides/demo1">Try the Demo</SlideLink>
    <SlideLink href="https://github.com/example/repo" variant="ghost">
      View Source Code
    </SlideLink>
    <SlideLink href="/docs" variant="ghost">
      Read Documentation
    </SlideLink>
  </div>
</Slide>

​
Complete Example

Interactive slide with code and demo link: 
import {
  Slide,
  SlideTitle,
  SlideSubtitle,
  SlideCode,
  SlideLink
} from 'nextjs-slides';

<Slide align="left">
  <SlideTitle>useState Hook</SlideTitle>
  <SlideSubtitle>Managing state in React</SlideSubtitle>
  
  <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>
  
  <SlideLink href="/slides/demo/counter">See Live Demo →</SlideLink>
</Slide>

​
Styling

​
Custom colors

Override button colors: 
<SlideLink 
  href="/slides/next" 
  className="bg-blue-500 hover:bg-blue-600"
>
  Custom Blue Button
</SlideLink>

​
Full width

Make links span the container: 
<SlideLink href="/slides/demo" className="w-full">
  Full Width Link
</SlideLink>

​
Sizing

Adjust padding and text size: 
<SlideLink 
  href="/slides/next" 
  className="px-8 py-4 text-lg"
>
  Larger Link
</SlideLink>

​
Accessibility

SlideLink wraps Next.js <Link> and renders semantic anchor tags for proper keyboard navigation and screen reader support: 
<SlideLink href="/slides/next">
  Next Slide
</SlideLink>
Users can:
  • Navigate to links with Tab key
  • Activate with Enter or Space
  • Right-click to open in new tab (standard browser behavior)

​
Keyboard Navigation

Note that the slide deck provides built-in keyboard navigation:
  • → or Space: Next slide
  • ←: Previous slide
Use SlideLink when you need to:
  • Jump to non-sequential slides
  • Navigate to breakout pages
  • Link to external resources
  • Provide explicit navigation options
For most slide navigation, users will rely on arrow keys and spacebar. Use SlideLink for special navigation needs or when creating a table of contents.

​
Best Practices

​
Use clear link text

{/* Good */}
<SlideLink href="/slides/demo1">View Interactive Demo →</SlideLink>

{/* Avoid */}
<SlideLink href="/slides/demo1">Click here</SlideLink>

​
Choose appropriate variants

{/* Primary for main actions */}
<SlideLink href="/slides/demo">Start Demo</SlideLink>

{/* Ghost for secondary actions */}
<SlideLink href="/" variant="ghost">Exit</SlideLink>

<div className="flex flex-col gap-2">
  <SlideLink href="/slides/demo1">Demo 1: Basics</SlideLink>
  <SlideLink href="/slides/demo2">Demo 2: Advanced</SlideLink>
  <SlideLink href="/slides/demo3">Demo 3: Expert</SlideLink>
</div>

​
Breakout Page Pattern

A common pattern is to link from a slide to a full-page demo, then back: 
// Slide 12: Link to demo
<Slide>
  <SlideTitle>Counter Demo</SlideTitle>
  <SlideLink href="/slides/demo/counter">View Live Demo →</SlideLink>
</Slide>

// app/slides/demo/counter/page.tsx (breakout page)
export default function CounterDemo() {
  return (
    <div className="p-8">
      <h1>Interactive Counter</h1>
      <Counter />
      <SlideLink href="/slides/12" variant="ghost">
        ← Back to Slides
      </SlideLink>
    </div>
  );
}
Breakout pages inherit the SlideDeck provider from the layout but render outside the [page] route, so they don’t show deck navigation (progress dots, counter, etc.).

Build docs developers (and LLMs) love

Get started for freeTalk to us