Diagram Stepper

Preview Code

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

const slides = () => {
  return (
    <>
      <Slide>
      <DiagramStepper
        animation={regionFadeIn}
        steps={[
          { show: ['client'] },
          { show: ['api', 'arrow1'] },
          { show: ['db', 'arrow2'], highlight: ['db'] },
        ]}
      >
        <svg viewBox="0 0 600 100" width="600">
          <DiagramRegion id="client">
            <rect width="80" height="40" x="10" y="30" fill="var(--rs-accent)" />
            <text x="50" y="55" textAnchor="middle" fill="var(--rs-fg)">Client</text>
          </DiagramRegion>
          <DiagramRegion id="arrow1">
            <line x1="90" y1="50" x2="180" y2="50" stroke="var(--rs-muted)" />
          </DiagramRegion>
          <DiagramRegion id="api">
            <rect width="80" height="40" x="180" y="30" fill="var(--rs-accent)" />
            <text x="220" y="55" textAnchor="middle" fill="var(--rs-fg)">API</text>
          </DiagramRegion>
          <DiagramRegion id="arrow2">
            <line x1="260" y1="50" x2="350" y2="50" stroke="var(--rs-muted)" />
          </DiagramRegion>
          <DiagramRegion id="db">
            <rect width="80" height="40" x="350" y="30" fill="var(--rs-accent)" />
            <text x="390" y="55" textAnchor="middle" fill="var(--rs-fg)">DB</text>
          </DiagramRegion>
        </svg>
      </DiagramStepper>
      </Slide>
    </>
  )
}

export default slides

Each step lists show, hide, and highlight arrays of region IDs. Combine with regionFadeIn / regionScaleIn / regionSlideUp from @react-slides/plugin-motion for animated transitions.