# Focus walkthrough

> Stepping through regions of a file with the rest dimmed.

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-code-block-8).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-code-block-8
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-code-block-8-light-6eb48d37102ed846.png
- Registry item: https://reui.io/r/new-york-v4/c-code-block-8.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-code-block-8.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@reui/badge`, `button`, `@reui/code-block`

## Files

### `c-code-block-8.tsx`

```tsx
"use client"

import { useState } from "react"
import { Badge } from "@/components/reui/badge"
import {
  CodeBlock,
  CodeBlockHeader,
  CodeBlockTitle,
} from "@/components/reui/code-block/code-block"

import { Button } from "@/components/ui/button"

const code = `export async function checkout(cart: Cart) {
  const totals = computeTotals(cart)

  const session = await payments.createSession({
    amount: totals.total,
    currency: cart.currency,
  })

  await audit.record("checkout.started", session.id)
  return session
}`

const steps = [
  { label: "Totals", lines: "2" },
  { label: "Payment session", lines: "4-7" },
  { label: "Audit", lines: "9-10" },
]

/*
 * `focusedLines` keeps a step sharp and dims the rest - unlike highlighting,
 * which adds emphasis without taking any away. Hovering the block restores
 * everything, so the surrounding code is one glance away.
 */
export function Pattern() {
  const [step, setStep] = useState(0)

  return (
    <div className="w-full max-w-2xl">
      <CodeBlock
        code={code}
        language="typescript"
        showLineNumbers
        focusedLines={steps[step].lines}
      >
        <CodeBlockHeader className="gap-1.5">
          <CodeBlockTitle>checkout.ts</CodeBlockTitle>
          <div
            role="group"
            aria-label="Walkthrough step"
            className="ml-auto flex items-center gap-1"
          >
            {steps.map((entry, index) => (
              <Button
                key={entry.label}
                aria-pressed={index === step}
                size="xs"
                variant={index === step ? "secondary" : "ghost"}
                onClick={() => setStep(index)}
              >
                {entry.label}
              </Button>
            ))}
          </div>
          <Badge variant="primary-light">
            {step + 1}/{steps.length}
          </Badge>
        </CodeBlockHeader>
      </CodeBlock>
    </div>
  )
}
```