# Code Walkthrough

> Explains code step by step: pick a step and a highlight band springs to its lines, the rest dim, and the panel scrolls them into view.

Category: Sections · MotionKit Plus · Updated 2026-10-23 · Live demo: https://motionkitui.com/components/code-walkthrough

## When to use it

Tutorials, API docs, engineering blog posts and onboarding: explaining a file one idea at a time instead of with a wall of comments.

## How it works

Each step names a line range. Lines are a fixed 24px tall, so the highlight band's top and height are simple sums, and a spring moves it between ranges. Lines outside the range drop to 60% opacity, and an effect scrolls the code panel, not the page, to just above the first highlighted line. A small single-pass tokeniser colours comments, strings, numbers, keywords, functions and components in the MotionKit palette, with no highlighter dependency. Steps are buttons with a roving Tab stop, and each change is announced.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/code-walkthrough` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `code` | `string` |  | The source to explain. JavaScript, TypeScript and JSX are highlighted. |
| `steps` | `WalkthroughStep[]` |  | Each step's title, description and [from, to] lines. |
| `filename` | `string` | `"example.tsx"` | File name in the panel header. |
| `accent` | `string` | `"#5FAEB4"` | Colour of the band and active step. |

## Accessibility

- **Keyboard: Pass.** Steps are buttons with one Tab stop: Up and Down move between them, Home and End jump to the ends. The code panel is focusable for scrolling.
- **Screen readers: Pass.** The active step is marked with aria-current, and each change announces the step and its line range.
- **Reduced motion: Pass.** With reduced motion on, the band jumps, notes fade without growing and the panel scrolls instantly.
- **Colour contrast: Partial.** Highlighted code measures 6.7:1 to 14.1:1. Dimmed lines are deliberately quieter, at 3.1:1 to 5.6:1.