# Line actions and diagnostics

> Error and warning lines with an action button on the active line.

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

- Page, with a live preview: https://shadcn.exchange/r/reui/c-code-block-11
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-code-block-11-light-ede97a8e80eed45c.png
- Registry item: https://reui.io/r/new-york-v4/c-code-block-11.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-11.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-11.tsx`

```tsx
"use client"

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

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

const code = `export function parseAmount(input: string) {
  const value = parseInt(input)
  if (value == NaN) return 0
  return value
}`

export function Pattern() {
  return (
    <div className="w-full max-w-2xl">
      <CodeBlock
        code={code}
        language="typescript"
        showLineNumbers
        lineLevels={{ error: [3], warning: [2] }}
      >
        <CodeBlockHeader>
          <CodeBlockTitle>parse-amount.ts</CodeBlockTitle>
          <div className="ml-auto flex items-center gap-1.5">
            <Badge variant="destructive-light">1 error</Badge>
            <Badge variant="warning-light">1 warning</Badge>
          </div>
        </CodeBlockHeader>

        {/*
          One group is REGISTERED for the whole block and rendered inside
          whichever row is active, so a 2,000 line file costs a single button.
          Gated on the diagnostic: a fix offer on a clean line is noise.
        */}
        <CodeBlockLineActions>
          {({ line, state }) =>
            state?.level ? (
              <Button size="xs" variant="outline" className="bg-background">
                Fix line {line}
              </Button>
            ) : null
          }
        </CodeBlockLineActions>
      </CodeBlock>
    </div>
  )
}
```