# Line selection

> Selecting lines to ask an assistant about them.

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

- Page, with a live preview: https://shadcn.exchange/r/reui/c-code-block-12
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-code-block-12-light-321116eac501908e.png
- Registry item: https://reui.io/r/new-york-v4/c-code-block-12.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-12.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-12.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 = `function applyDiscount(order: Order) {
  if (order.coupon) {
    const rate = COUPONS[order.coupon]
    order.total = order.total * (1 - rate)
  }
  return order
}`

/*
  Selection arrives sorted but not necessarily contiguous, so a range label
  would lie about a click on 2 and 6. Count is the only honest summary.
*/
function describe(lines: number[]) {
  if (!lines.length) return "Select lines to ask about them"
  if (lines.length === 1) return `Ask about line ${lines[0]}`
  return `Ask about ${lines.length} lines`
}

export function Pattern() {
  const [selected, setSelected] = useState<number[]>([])

  return (
    <div className="flex w-full max-w-2xl flex-col gap-3">
      <CodeBlock
        code={code}
        language="typescript"
        showLineNumbers
        selectable
        selectedLines={selected}
        onSelectedLinesChange={setSelected}
      >
        <CodeBlockHeader>
          <CodeBlockTitle>discount.ts</CodeBlockTitle>
          <div className="ml-auto flex items-center gap-1.5">
            {selected.length > 0 && (
              <Badge variant="primary-light">{selected.length} selected</Badge>
            )}
            <span className="text-muted-foreground text-xs">
              Click a line, shift-click to extend
            </span>
          </div>
        </CodeBlockHeader>
      </CodeBlock>

      <div className="flex items-center gap-2">
        <Button size="sm" disabled={!selected.length}>
          {describe(selected)}
        </Button>
        {selected.length > 0 && (
          <Button size="sm" variant="ghost" onClick={() => setSelected([])}>
            Clear
          </Button>
        )}
      </div>
    </div>
  )
}
```