Slide definition language

Structure

A deck is a single page component that returns sections. Each section with data-slide becomes a slide.

export default function Home() {
  return (
    <main>
      <section data-slide="">
        <h1>Title slide</h1>
      </section>

      <section data-slide="">
        <h2>Second slide</h2>
        <p>Content goes here</p>
      </section>
    </main>
  )
}

Data attributes

Progressive reveal (data-step)

Add data-step to any element to hide it until the presenter presses the right arrow or space. Steps reveal in DOM order. Pair with an animation class for visual effect.

<section data-slide="">
  <h2>Three reasons</h2>
  <ul>
    <li data-step="" className="step-fade">First reason</li>
    <li data-step="" className="step-fade">Second reason</li>
    <li data-step="" className="step-fade">Third reason</li>
  </ul>
</section>

Entrance animations (step-*)

Apply to data-step elements to control how they appear when revealed.

Fades

Slides and flies

Scales and zooms

Pops and bounces

Spins and flips

Wipes and reveals

Filters

Text

Exit animations (exit-*)

Apply to data-exit-step elements. They animate out before the slide transitions.

Emphasis animations (emphasis-*)

Apply to data-step elements. Triggered on second click to draw attention to a visible element.

Auto-build animations (auto-*)

Animate elements automatically when a slide becomes active. No data-step needed. Stagger with animationDelay.

<section data-slide="">
  <h2>Our team</h2>
  <div className="auto-fade" style={{ animationDelay: '0.2s' }}>
    Card 1
  </div>
  <div className="auto-fade" style={{ animationDelay: '0.4s' }}>
    Card 2
  </div>
</section>

Slide transitions (data-transition)

Set the data-transition attribute on a slide to control how it transitions to/from the next slide.

<section data-slide="" data-transition="cube-left">
  <h1>This slide uses a 3D cube transition</h1>
</section>

Magic Move

Give elements the same data-magic-id on consecutive slides. The runtime animates position and scale between them automatically.

{/* Slide 1: revenue number is large and centered */}
<section data-slide="">
  <div data-magic-id="revenue" className="text-6xl font-bold">
    $4.2M
  </div>
</section>

{/* Slide 2: same element, now small and top-left */}
<section data-slide="">
  <div data-magic-id="revenue" className="text-xl">
    $4.2M
  </div>
  <p>Here is how we got there.</p>
</section>

Speaker notes

Add data-notes to any element inside a slide. The content is hidden during presentation and shown in the presenter view (press P).

<section data-slide="">
  <h2>Revenue growth</h2>
  <p>Up 18% quarter over quarter</p>
  <div data-notes="">
    Mention the enterprise deal pipeline.
    Ask if anyone has questions about methodology.
  </div>
</section>

Brand configuration

The brand.config.ts file at the root of your project defines colors, fonts, and spacing. The layout injects these as CSS custom properties. One file change rebrands the entire deck.

// brand.config.ts
export default {
  colors: {
    primary: '#0d0d0f',     // Section dividers, dark surfaces
    accent: '#f59e0b',      // Highlights, stats, chart fills
    background: '#111114',  // Slide canvas
    surface: '#1a1a1f',     // Card backgrounds
    text: '#e8e6e3',        // Body text and headings
  },
  fonts: {
    heading: '"Inter", system-ui, sans-serif',
    body: '"Inter", system-ui, sans-serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
  },
  spacing: {
    slide: '5rem',     // Outer slide padding
    section: '2rem',   // Gap between sections
    element: '1rem',   // Gap between elements
  },
}

Utility classes

Keyboard controls

Shape system

18 SVG shapes available via the SlideShape component.

import { SlideShape } from '@strategicnerds/slide-nerds'

<SlideShape
  shape="hexagon"
  size={120}
  fill="var(--color-surface)"
  stroke="var(--color-accent)"
  strokeWidth={1.5}
>
  <p>Label</p>
</SlideShape>

Available shapes: circle, square, rounded-square, triangle, diamond, pentagon, hexagon, octagon, star, plus, cloud, arrow-right, arrow-left, chevron-right, pill.

Embedding React components

Slides are React components. Import and render anything -- charts, interactive demos, live data.

import { PricingCalculator } from '../components/PricingCalculator'

<section data-slide="">
  <h2>Interactive demo</h2>
  <PricingCalculator initialPlan="pro" />
  <div data-notes="">
    Let the audience interact with the calculator.
    Switch to cached data if the API is down.
  </div>
</section>

Live components

Five components for real-time audience interaction. Require a hosted deck on slidenerds.com with an active live session.

import {
  LivePoll,
  LiveReactions,
  LiveQA,
  LiveAudienceCount,
  LiveWordCloud,
} from '@strategicnerds/slide-nerds'

<section data-slide="">
  <LivePoll
    question="What matters most?"
    options={['Speed', 'Reliability', 'Cost']}
  />
</section>

<section data-slide="">
  <LiveQA />
  <LiveReactions />
</section>

<section data-slide="">
  <LiveWordCloud prompt="One word for your experience" />
  <LiveAudienceCount />
</section>