Code Stepper

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

Use focus for a “spotlight” effect — focused range stays at full opacity, others dim.

{ focus: [4, 6] }

Pair with annotation and annotationLine to attach inline notes per step.