Writing Slides

Layouts

@react-slides/components ships layout primitives. Pass one as layout on <Slide> or use it directly inside slide content.

Preview Code

import { Slide } from '@react-slides/core'
import { TwoColumnLayout } from '@react-slides/components'

const slides = () => {
  return (
    <>
      <Slide>
      <TwoColumnLayout
        left={<h2>Left column</h2>}
        right={<p>Right column with longer text content.</p>}
        ratio="2fr 3fr"
      />
      </Slide>
    </>
  )
}

export default slides

Available: CenteredLayout, TwoColumnLayout, SplitLayout, TitleLayout, SectionLayout, StackLayout. See the components docs.

Code reveals

CodeStepper shows a snippet and reveals or highlights lines step by step. Pair with useShikiHighlighter() from @react-slides/plugin-shiki.

Preview Code

import { Slide, CodeStepper } from '@react-slides/core'
import { useShikiHighlighter } from '@react-slides/plugin-shiki'

const slides = () => {
const Highlighter = useShikiHighlighter()
const code = `let count = 0
function increment() {
count += 1
return count
}`
return (
  <>
    <Slide>
      <CodeStepper
        language="tsx"
        highlighter={Highlighter}
        steps={[
          { lines: [1, 3], highlight: [1] },
          { lines: [1, 6], highlight: [4, 5, 6] },
        ]}
      >{code}</CodeStepper>
    </Slide>
  </>
)
}

export default slides

For side-by-side snapshot comparisons use CodeDiff instead.

Diagrams

DiagramStepper orchestrates region visibility for SVGs (and Mermaid via MermaidAdapter).

Preview Code

import { Slide, DiagramStepper, DiagramRegion } from '@react-slides/core'

const slides = () => {
  return (
    <>
      <Slide>
      <DiagramStepper
        steps={[
          { show: ['client'] },
          { show: ['api'] },
          { show: ['db'], highlight: ['db'] },
        ]}
      >
        <svg viewBox="0 0 600 100" width="600">
          <DiagramRegion id="client">…</DiagramRegion>
          <DiagramRegion id="api">…</DiagramRegion>
          <DiagramRegion id="db">…</DiagramRegion>
        </svg>
      </DiagramStepper>
      </Slide>
    </>
  )
}

export default slides

For Mermaid charts: pass a MermaidAdapter as the child and map node IDs via regionMap.

Animations

Replace Fragment with MotionFragment from @react-slides/plugin-motion for Framer Motion animations.

Preview Code

import { Slide } from '@react-slides/core'
import { MotionFragment, fadeIn, slideUp } from '@react-slides/plugin-motion'

const slides = () => {
  return (
    <>
      <Slide>
      <MotionFragment animation={fadeIn}>fadeIn</MotionFragment>
      <MotionFragment animation={slideUp}>slideUp</MotionFragment>
      </Slide>
    </>
  )
}

export default slides

Speaker notes

Pass notes to a <Slide> for presenter view.

import { Slide } from '@react-slides/core'

const slides = () => {
  return (
    <>
      <Slide notes="Remember to mention the migration deadline.">
        <h1>Migration plan</h1>
      </Slide>
    </>
  )
}

export default slides

The <SpeakerView> component (from @react-slides/viewer) reads notes from the synced state when paired with presenterMode().